Ø 简介
本文主要记录微信小程序的开发笔记（上），主要包括以下内容：
1. 微信小程序基础
2. 布局
3. 视图容器
4. 视图层技术
5. 基础组件
6. 表单组件
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. 上传的微信小程序“微信公众平台-小程序”的版本管理中查看到。
1) 水平排列布局，设置父试图样式：
height:
100px;
display:
flex; /*表示弹性布局*/
flex-direction:row;
2) 水平折行排列布局，设置父试图样式：
flex-wrap:wrap;
3) 水平排列对齐布局，设置父视图样式：
justify-content:
center;
可选值：flex-start:左对齐（默认值）；center:居中对齐；flex-end:右对齐
4) 水平等间隔排列布局，设置父试图样式：
space-between;/*无边距*/
5) 带边距的水平等间隔排列布局，设置父试图样式：
space-around; /*有边距*/
6) 垂直排列布局（默认为该布局方式），设置父视图样式：
height:300px;flex-direction:column;
7) 垂直折列排列布局，设置父视图样式：
8) 垂直排列对齐布局，设置父视图样式：
align-items:
center;
可以在视图容器中放置子组件，小程序中的视图容器分为三类：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. 水平滚动视图
的样式：width:100%; white-space:nowrap;
的属性：scroll-x="true"
3) 设置子元素的样式：display:inline-block;
width:200px; height:200px;
4) 定位到指定的位置或子视图
scroll-left="100"
3. 滚动条事件
1) bindscrolltoupper
滚动到
最上端或者
最左端触发的事件。
1. 在事件处理函数中可以使用 e.detail.direction
属性获取top 或left
来区分。
2. 可以使用 upper-threshold
属性指定滚动条与
相差多少距离时触发，例如：upper-threshold="100"
2) bindscrolltolower
最下端 最右端属性获取bottom 或 right
2. 可以使用 lower-threshold
相差多少距离时触发，例如：lower-threshold="100"
3) bindscroll
当滚动条滚动时触发的事件。
1. 事件处理函数中 e.detail
属性中属性值如下：
1) scrollTop：垂直滚动时滚动条的当前位置，在水平滚动时该值为0。
2) scrollHeight：垂直滚动时所有子视图的总高度。
3) deltaY：垂直滚动时的增量，也就滚动前与滚动后的位置。向下滚动时小于0；向上滚动时大于0。
4) scrollLeft：水平滚动时滚动条的当前位置，在垂直滚动时该值为0。
5) scrollWidth：水平滚动时所有子视图的总宽度。
6) deltaX：水平滚动时的增量，也就滚动前与滚动后的位置。向右滚动时小于0；向左滚动时大于0。
2) swiper（轮播、轮询图视图容器）
1. 属性
1) indicator-dots: 是否显示圆点，默认为false。
2) vertical:
是否显示为垂直轮询图，默认为false。
3) current:
默认显示第几项（从0开始），默认为0。
4) autoplay:
是否自动切换轮询页面，默认为false。
5) interval:
自动切换的时间间隔，单位为毫秒，默认为5000 ms。
6) duration:
相邻两个页面之间切换的动画所经历的时间，默认为1000ms。
7) circular:
是否采用衔接滑动，默认为false。
2. 事件
1) bindchange
当轮询图开始滚动时触发。
1) 双向绑定
<input model:value="{{value1}}" />
注意事项：
1) 该元素如果没有定义 bindinput
事件处理程序，会出现警告；
2) 不能绑定data
中对象中的属性，例如：data.form.value1
参考：https://www.mnjblog.cn/article/51
2) 条件属性
1. if
满足条件时，比如：
<view
wx:if="{{condition}}">满足条件我就显示</vie
2. if-elif-else 满足某一个条件时，比如：
wx:if="{{count
> 0 && count <= 10}}">count为1~10的数字</view>
wx:elif="{{count
< 20 || count <= 30}}">count为11~30的数字</view>
wx:else>count不在1~30的数字</view>
3. block if-elif-else
满足某个条件时，以块显示。
3) 循环属性
1) for
循环输出，例如：
wx:for="{{provinces}}">
provinces[{{index}}] =
{{item}}
</view>
2) for-item 与for-index
属性的使用
wx:for="{{provinces}}"
wx:for-item="name"
wx:for-index="i">
provinces[{{i}}] =
{{name}}
3) block 嵌套循环
<block
wx:for="{{[1,2,3]}}"
wx:for-item="i">
<view
wx:for-item="j">
<view
wx:if="{{i <= j}}">
i({{i}}) 小于等于
j({{j}})
</view>
wx:elif="{{i > j}}">
i({{i}}) 大于
</view>
</block>
4) wx:key
属性
1. 循环指定【对象数组】输出switch，以【属性】为wx:key的值（需要唯一）
<switch
wx:for="{{objectArray}}"
style="display:block;"
wx:key="unique">
item-{{item.id}}
</switch>
2. 循环指定【数字数组】输出switch，以【值】为wx:key的值（需要唯一）
wx:for="{{numberArray}}"
wx:key="*this">
item-{{item}}
5) 模板
1. 定义模板
<template
name="rowSquares">
style="display:flex;flex-direction:row;">
class="bc_{{color1}}"
style="width:100px;height:100px;"></view>
class="bc_{{color2}}"
class="bc_{{color3}}"
</template>
2. 引用模板
1) 方式一：传递固定个数的变量
is="rowSquares"
data="{{
color1, color3, color2}}"
/>
2) 方式二：传递一个对象
...colorItem1}}"
3. 定义未知数量的模板并引用
1. 定义数据
colorCountItem1: { colorArray: ['blue',
'yellow',
'red'] },
colorCountItem2: { colorArray: ['yellow',
colorCountItem3: { colorArray: ['red'] }
2. 定义与引用模板
<!--定义模板-->
name="rowCountSquares">
style="display:flex;flex-display:row">
<block
wx:for="{{colorArray}}">
<view
class="bc_{{item}}"
style="width:100px;height:100px;"
</block>
<!--引用模板-->
is="rowCountSquares"
data="{{...colorCountItem1}}"/>
data="{{...colorCountItem2}}"/>
data="{{...colorCountItem3}}"/>
6) 引用
1. import 引用外部模板
1) 定模模板文件，例如：mytemplate.wxml，在该文件中写入模板代码（同上）。
2) 导入模板
<!--引用外部模板-->
<import
src="mytemplate.wxml"/>
2. include 引用外部文件代码内容
1) 定义代码文件，比如：templateCode.wxml
<!--除了模板，其他代码都将被引入-->
<view>This
is the code in the template file</view>
2) 引入外部代码
<include
src="../template/templateCode.wxml"/>
<view>这是当前文件的代码</view>
1) text
文本组件
用于显示文本，没有什么属性，它支持转义符"\n"（可用于换行）。text 中可以嵌套text,
例如：
<text
style="margin:50px;font-size:20px;color:{{text_color}}">
这一段文字，变量：{{text1}}
<text
sytle="color:#00ffff">这是嵌套文本</text>
</text>
2) icon
系统图标组件
icon
用于显示系统内置的一些图标。
1) size:
Number 类型，用于设置图标显示的尺寸，
默认为23。
2) type:
String 类型，用于设置系统图标的类型，包含15种类型的图标，包括：success,
info,warn, waiting, safe_success, safe_warn, success_circle, success_no_circle,
waiting_circle, circle, download, info_circle, cancel, search, clear
3) color:
Color 类型，用于设置图标的颜色，与
css 中的 color
是一样的。
3) progress
进度条
progress
用于显示进度。
1) percent:
Float 类型，取值1~100之间数值，默认值为0。
2) show-info:
Boolean 类型，是否显示数值，默认值为false。
注意：只要设置了该属性，无论设置什么值都以true
值处理。
Color 类型，用于设置进度条的颜色，默认值为绿色：#09BB07。
4) active:
Boolean 类型，是否从左向右动画显示，默认值为false。
5) stroke-width: Number 类型，用于设置进度条的宽度，默认值为6。
与 Web 中的表单类似，一系列的可录入数据的组件，使用表单可以将这就组件中的数据统一提交。
1) button
按钮（提交和重置）
String 类型，用于设置按钮大小，可以设置值为mini，默认值为 default。
String 类型，用于设置按钮的样式类型，可以设置值为primary、warn, 默认值为default。
3) plain:
Boolean 类型，设置按钮是否镂空，背景色是否透明。默认值为false。
4) disabled:
Boolean 类型，是否禁用按钮，默认为false。
5) loading:
Boolean 类型，是否在左侧显示加载的圆圈，默认为false。
6) form-type:
String 类型，设置表单中按钮的类型，可选值：submit、resset。
7) haver-class: 用于指定按钮按下去的 class
样式名称，默认值为：button-hover:{background-color:rgba(0,0,0,0.1);opacity:0.7;}
8) hover-stop-propagation: 指定是否阻止本节点的祖先节点出现点击态，默认值为 false.
1) bindtap
按钮点击事件，当点击按钮是触发。
2) checkbox
复选框组件
checkbox
必须与
checkbox-group一起使用，checkbox-group 是checkbox 组件的容器，
它有一个 bindchange
事件
，在选择任意一个checkbox 时被触发。
1) value:
选中某个checked 的返回值。
2) disabled:
是否禁用checked 组件。
3) checked:
表示
checkbox 是否被选中。
3) input
单行文本录入组件
文本输入框的值。
2) placeholder: 占位符字符串，用于提示输入的文本，默认显示为灰色。
3) placeholder-style: 用于设置占位符的样式，比如字体颜色。
4) placeholder-class: 用于设置占位符的class
名称。
5) auto-focus:
用户标记获得焦点的文本框，注意：一个form 中只能一个input
组件设置该属性。该属性不需要设置任何值。
6) focus:
该属性通常设置为变量，可以在代码中使其获取焦点。
7) maxlength:
设置最大可以输入多少个字符，-1表示不限制，默认（未设置时）为140个。
8) password:
显示为密码输入键盘。
9) type:
显示不同类型的输入键盘：包含如下值：
1. emoji:
输入键盘中显示表情输入选项。
2. digit:
显示带小数点的数字键盘。
3. idcard:
显示身份证输入键盘。
10) disabled:
禁用，disabled="disabled"。
11) confirm-type: 设置为 search
显示搜索键盘。
1. bindinput
当输入框中的值发生改变时触发。
2. bindfocus
输入框获取焦点时触发。
3. bindblur
输入框失去焦点时触发。
4. bindconfirm
点击完成按钮时触发。
1) label
组件
label
并不是用于录入信息的，而是用于将组件和文本进行绑定。
1. label
可绑定的组件：button、checkbox、radio、switch。
2. 绑定的方式：
1) 第一种方式，将待绑定的组件放在 label
中。
style="margin:20px;"
wx:for-items="{{checkboxItems}}">
<label>
<checkbox
value="{{item.name}}"
checked="{{item.checked}}"
<text>{{item.value}}</text>
</label>
注意：如果label
中有多个可绑定的组件（例如多个checkbox），则只会绑定到第一个 checkbox
之上。
2) 第二种方式，使用label 的for
属性指定要绑定的组件id。如果指定了for
属性，绑定的组件就可以不需要再label 中了。
<radio-group>
wx:for-items="{{radioItems}}">
<radio
id="{{item.name}}"
<label
for="{{item.name}}">
<text>{{item.name}}</text>
</label>
</radio-group>
2) radio
单选按钮组件
radio
radio-group一起使用，radio-group 是radio
组件的容器，
，在选择任意一个radio 时被触发。
选中某个
radio 的返回值。
是否禁用
radio 组件。
radio 是否被选中。
3) switch
开关组件
用于两个值之间进行切换，switch
有两种风格：iOS 和 Android
风格。
1) type:
设置为checkbox 时则显示为 Android
风格（即：复选框）。
是否禁用radio 组件。
switch 是否被选中。
当 switch 选择状态改变时触发。
4) picker
列表选择组件
picker
是一个选择器组件，支持三种类型的数据选择：数据列表选择器、日期选择器、时间选择器。
用于获取或设置picker 的值。
2) mode:
用于设置picker 列表的类型：date 为日期选择器，time 为时间选择器，默认为数据列表选择器。
3) range:
该属性用于数据列表，用于定义数据列表展示的数据。
4) start:
该属性用于日期或时间选择器，用于定义可选择的最小值，格式为：2019、2019-07、2019-07-12；21:05.
5) end:
6) fields:
该属性用于日期选择器，用于指定日期选择器将要显示的日期格式：year 表示只显示年；month
表示显示年和月；默认显示年月日。
选择某一项是被触发。
3. 使用示例
style="margin:20px;">
style="margin-left:15px;">地区选择器</view>
<picker
bindchange="bindPickerChange"
value="{{index}}"
range="{{array}}">
style="padding:13px;">
请选择城市：{{array[index]}}
</picker>
5) slider
滑杆组件
用于左右滑动的功能，比如调解音量等。
设置slider 的值。
2) setp:
用于设置slider 滑动的步长。
3) show-value:
表示是否显示slider 的当前值，该属性不需要设置值。
4) min:
设置slider 可调解的最小值。
5) max:
设置slider 可调解的最大值。
改变当前滑动条的值时被触发。
6) textarea
多行输入组件
textarea
与input 组件很多事件和属性类似，只是 input
用于输入单行文本，而textarea 可以输入多行文本。所以其他属性和事件可以参考input 组件。
1) auto-height: 设置是否根据输入的内容自动扩展高度，不设置该属性，超过 textarea 的输入内容时将出现滚动条。该属性不需要设置值。
2) auto-focus:
设置是否第一个获得焦点。
3) 其他属性与input
组件类似。
7) form
提交和重置组件
form
用于统一提交form 表单内数据，在提交按钮的处理函数中可以使用e.detail.value
获取所有的表单数据。
1. 事件
1) catchsubmit
当点击提交按钮时，将触发事件所绑定的函数。
2) catchreset
当点击重置按钮时，将触发事件所绑定的函数。
注意：当点击重置按钮时，将重置为组件的默认值，并不是初始值。