微信小程序开发笔记(上)
Ø 简介
本文主要记录微信小程序的开发笔记(上),主要包括以下内容:
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
当滚动条滚动时触发的事件。
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
当轮询图开始滚动时触发。
4. 视图层技术
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 满足某一个条件时,比如:
<view wx:if="{{count > 0 && count <= 10}}">count为1~10的数字</view>
<view wx:elif="{{count < 20 || count <= 30}}">count为11~30的数字</view>
<view wx:else>count不在1~30的数字</view>
3. block if-elif-else 满足某个条件时,以块显示。
3) 循环属性
1) for 循环输出,例如:
<view wx:for="{{provinces}}">
provinces[{{index}}] = {{item}}
</view>
2) for-item 与for-index 属性的使用
<view wx:for="{{provinces}}" wx:for-item="name" wx:for-index="i">
provinces[{{i}}] = {{name}}
</view>
3) block 嵌套循环
<block wx:for="{{[1,2,3]}}" wx:for-item="i">
<view wx:for="{{[1,2,3]}}" wx:for-item="j">
<view wx:if="{{i <= j}}">
i({{i}}) 小于等于 j({{j}})
</view>
<view wx:elif="{{i > j}}">
i({{i}}) 大于 j({{j}})
</view>
</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的值(需要唯一)
<switch wx:for="{{numberArray}}" style="display:block;" wx:key="*this">
item-{{item}}
</switch>
5) 模板
1. 定义模板
<template name="rowSquares">
<view style="display:flex;flex-direction:row;">
<view class="bc_{{color1}}" style="width:100px;height:100px;"></view>
<view class="bc_{{color2}}" style="width:100px;height:100px;"></view>
<view class="bc_{{color3}}" style="width:100px;height:100px;"></view>
</view>
</template>
2. 引用模板
1) 方式一:传递固定个数的变量
<template is="rowSquares" data="{{ color1, color3, color2}}" />
2) 方式二:传递一个对象
<template is="rowSquares" data="{{ ...colorItem1}}" />
3. 定义未知数量的模板并引用
1. 定义数据
colorCountItem1: { colorArray: ['blue', 'yellow', 'red'] },
colorCountItem2: { colorArray: ['yellow', 'red'] },
colorCountItem3: { colorArray: ['red'] }
2. 定义与引用模板
<!--定义模板-->
<template name="rowCountSquares">
<view style="display:flex;flex-display:row">
<block wx:for="{{colorArray}}">
<view class="bc_{{item}}" style="width:100px;height:100px;" />
</block>
</view>
</template>
<!--引用模板-->
<template is="rowCountSquares" data="{{...colorCountItem1}}"/>
<template is="rowCountSquares" data="{{...colorCountItem2}}"/>
<template is="rowCountSquares" data="{{...colorCountItem3}}"/>
6) 引用
1. import 引用外部模板
1) 定模模板文件,例如:mytemplate.wxml,在该文件中写入模板代码(同上)。
2) 导入模板
<!--引用外部模板-->
<import src="mytemplate.wxml"/>
<template is="rowCountSquares" data="{{...colorCountItem1}}"/>
2. include 引用外部文件代码内容
1) 定义代码文件,比如:templateCode.wxml
<!--除了模板,其他代码都将被引入-->
<view>This is the code in the template file</view>
2) 引入外部代码
<include src="../template/templateCode.wxml"/>
<view>这是当前文件的代码</view>
5. 基础组件
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. 属性
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. 属性
1) percent: Float 类型,取值1~100之间数值,默认值为0。
2) show-info: Boolean 类型,是否显示数值,默认值为false。
注意:只要设置了该属性,无论设置什么值都以true 值处理。
3) color: Color 类型,用于设置进度条的颜色,默认值为绿色:#09BB07。
4) active: Boolean 类型,是否从左向右动画显示,默认值为false。
5) stroke-width: Number 类型,用于设置进度条的宽度,默认值为6。
6. 表单组件
与 Web 中的表单类似,一系列的可录入数据的组件,使用表单可以将这就组件中的数据统一提交。
1) button 按钮(提交和重置)
1. 属性
1) size: String 类型,用于设置按钮大小,可以设置值为mini,默认值为 default。
2) type: 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.
2. 事件
1) bindtap
按钮点击事件,当点击按钮是触发。
2) checkbox 复选框组件
checkbox 必须与 checkbox-group 一起使用,checkbox-group 是checkbox 组件的容器,它有一个 bindchange 事件,在选择任意一个checkbox 时被触发。
1. 属性
1) value: 选中某个checked 的返回值。
2) disabled: 是否禁用checked 组件。
3) checked: 表示 checkbox 是否被选中。
3) input 单行文本录入组件
1. 属性
1) value: 文本输入框的值。
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 显示搜索键盘。
2. 事件
1. bindinput
当输入框中的值发生改变时触发。
2. bindfocus
输入框获取焦点时触发。
3. bindblur
输入框失去焦点时触发。
4. bindconfirm
点击完成按钮时触发。
1) label 组件
label 并不是用于录入信息的,而是用于将组件和文本进行绑定。
1. label 可绑定的组件:button、checkbox、radio、switch。
2. 绑定的方式:
1) 第一种方式,将待绑定的组件放在 label 中。
<view style="margin:20px;" wx:for-items="{{checkboxItems}}">
<label>
<checkbox value="{{item.name}}" checked="{{item.checked}}" />
<text>{{item.value}}</text>
</label>
</view>
注意:如果label 中有多个可绑定的组件(例如多个checkbox),则只会绑定到第一个 checkbox 之上。
2) 第二种方式,使用label 的for 属性指定要绑定的组件id。如果指定了for 属性,绑定的组件就可以不需要再label 中了。
<radio-group>
<view style="margin:20px;" wx:for-items="{{radioItems}}">
<radio id="{{item.name}}" value="{{item.name}}" checked="{{item.checked}}" />
<label for="{{item.name}}">
<text>{{item.name}}</text>
</label>
</view>
</radio-group>
2) radio 单选按钮组件
radio 必须与 radio-group 一起使用,radio-group 是radio 组件的容器,它有一个 bindchange 事件,在选择任意一个radio 时被触发。
1. 属性
1) value: 选中某个 radio 的返回值。
2) disabled: 是否禁用 radio 组件。
3) checked: 表示 radio 是否被选中。
3) switch 开关组件
用于两个值之间进行切换,switch 有两种风格:iOS 和 Android 风格。
1. 属性
1) type: 设置为checkbox 时则显示为 Android 风格(即:复选框)。
2) disabled: 是否禁用radio 组件。
3) checked: 表示 switch 是否被选中。
2. 事件
1) bindchange
当 switch 选择状态改变时触发。
4) picker 列表选择组件
picker 是一个选择器组件,支持三种类型的数据选择:数据列表选择器、日期选择器、时间选择器。
1. 属性
1) value: 用于获取或设置picker 的值。
2) mode: 用于设置picker 列表的类型:date 为日期选择器,time 为时间选择器,默认为数据列表选择器。
3) range: 该属性用于数据列表,用于定义数据列表展示的数据。
4) start: 该属性用于日期或时间选择器,用于定义可选择的最小值,格式为:2019、2019-07、2019-07-12;21:05.
5) end: 该属性用于日期或时间选择器,用于定义可选择的最小值,格式为:2019、2019-07、2019-07-12;21:05.
6) fields: 该属性用于日期选择器,用于指定日期选择器将要显示的日期格式:year 表示只显示年;month 表示显示年和月;默认显示年月日。
2. 事件
1) bindchange
选择某一项是被触发。
3. 使用示例
<view style="margin:20px;">
<view style="margin-left:15px;">地区选择器</view>
<picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
<view style="padding:13px;">
请选择城市:{{array[index]}}
</view>
</picker>
</view>
5) slider 滑杆组件
用于左右滑动的功能,比如调解音量等。
1. 属性
1) value: 设置slider 的值。
2) setp: 用于设置slider 滑动的步长。
3) show-value: 表示是否显示slider 的当前值,该属性不需要设置值。
4) min: 设置slider 可调解的最小值。
5) max: 设置slider 可调解的最大值。
2. 事件
1) bindchange
改变当前滑动条的值时被触发。
6) textarea 多行输入组件
textarea 与input 组件很多事件和属性类似,只是 input 用于输入单行文本,而textarea 可以输入多行文本。所以其他属性和事件可以参考input 组件。
1. 属性
1) auto-height: 设置是否根据输入的内容自动扩展高度,不设置该属性,超过 textarea 的输入内容时将出现滚动条。该属性不需要设置值。
2) auto-focus: 设置是否第一个获得焦点。
3) 其他属性与input 组件类似。
7) form 提交和重置组件
form 用于统一提交form 表单内数据,在提交按钮的处理函数中可以使用e.detail.value 获取所有的表单数据。
1. 事件
1) catchsubmit
当点击提交按钮时,将触发事件所绑定的函数。
2) catchreset
当点击重置按钮时,将触发事件所绑定的函数。注意:当点击重置按钮时,将重置为组件的默认值,并不是初始值。