Ø 简介
本文主要记录微信小程序的开发笔记（上），主要包括以下内容：
1. 微信小程序基础
2. 布局
3. 视图容器
4. 视图层技术
5. 基础组件
6. 表单组件
1. 微信小程序基础
1) 微信小程序介绍
具有出色的体验，可以被便捷地获取与传播，适合有服务内容的企业和组织注册。
2) 开发环境安装与配置
1. 首先，下载开发IDE（微信开发者工具）
https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
2. 下载之后进行安装即可。
3) 注册微信小程序账号
注册微信小程序分为有公众号和无公众号（已认证），这两种情况下注册小程序是不一样的，下面分别介绍：
1. 无公众号
1) 进入微信公众平台：https://mp.weixin.qq.com/，点击立即注册
2) 选择“小程序”，按照注册步骤进行即可。
2. 有公众号（已认证）
1) 登录微信公众平台：https://mp.weixin.qq.com/
2) 左侧小程序中-> 小程序管理 ->添加 -> 快速注册并认证小程序，根据注册流程即可。
注：需要新的邮箱作为登录小程序的账号。
3. 绑定开发者和体验者
进入微信公众平台-小程序，成员管理添加即可。
4) 开发微信小程序
5) 预览和上传小程序
1. 预览小程序可以使用管理员微信或者开发者微信扫描预览二维码，在真机上进行预览。
2. 上传的微信小程序“微信公众平台-小程序”的版本管理中查看到。
2. 布局
1) 水平排列布局，设置父试图样式：
height: 100px;
display: flex; /*表示弹性布局*/
flex-direction:row;
2) 水平折行排列布局，设置父试图样式：
flex-wrap:wrap;
3) 水平排列对齐布局，设置父视图样式：
justify-content: center;
可选值：flex-start:左对齐（默认值）；center:居中对齐；flex-end:右对齐
4) 水平等间隔排列布局，设置父试图样式：
justify-content: space-between;/*无边距*/
5) 带边距的水平等间隔排列布局，设置父试图样式：
justify-content: space-around; /*有边距*/
6) 垂直排列布局（默认为该布局方式），设置父视图样式：
height:300px;
display: flex; /*表示弹性布局*/
flex-direction:column;
7) 垂直折列排列布局，设置父视图样式：
flex-wrap:wrap;
8) 垂直排列对齐布局，设置父视图样式：
align-items: center;
可选值：flex-start:左对齐（默认值）；center:居中对齐；flex-end:右对齐
3. 视图容器
可以在视图容器中放置子组件，小程序中的视图容器分为三类：view、scroll-view、swiper.
1) scroll-view（滚动条）
scroll-view 支持垂直滚动和水平滚动。
1. 垂直滚动视图
1) 设置scroll-view 的样式：height:200px;
2) 设置scroll-view 的属性：scroll-y="true"
3) 定位到指定的位置或子视图
1. 滚动到指定的位置，默认值为0
scroll-top="100"
2. 滚动到指定的子视图，"yellow"为子视图Id
scroll-into-view="yellow"
2. 水平滚动视图
1) 设置scroll-view 的样式：width:100%; white-space:nowrap;
2) 设置scroll-view 的属性：scroll-x="true"
3) 设置子元素的样式：display:inline-block; width:200px; height:200px;
4) 定位到指定的位置或子视图
1. 滚动到指定的位置，默认值为0
scroll-left="100"
2. 滚动到指定的子视图，"yellow"为子视图Id
scroll-into-view="yellow"
3. 滚动条事件
1) bindscrolltoupper
滚动到最上端或者最左端触发的事件。
1. 在事件处理函数中可以使用 e.detail.direction 属性获取top 或left 来区分。
2. 可以使用 upper-threshold 属性指定滚动条与最上端或者最左端相差多少距离时触发，例如：upper-threshold="100"
2) bindscrolltolower
滚动到最下端或者最右端触发的事件。
1. 在事件处理函数中可以使用 e.detail.direction 属性获取bottom 或 right 来区分。
2. 可以使用 lower-threshold 属性指定滚动条与最下端或者最右端相差多少距离时触发，例如：lower-threshold="100"
3) bindscroll
当滚动条滚动时触发的事件。
请发表评论