View篇
1： swiper(切换栏)
属性:
indicator-dots(是否显示面板指示点)
autoplay(是否自动切换)
interval(自动切换时间间隔)
duration(滑动动画时长)
vertical(滑动方向是否为纵向)
circular(是否采用衔接滑动)
示例代码如下：
<swiper indicator-dots="true" autoplay="true" interval="1000" duration="500" vertical='true' circular='true'>
<block wx:for="{{imgUrls}}">
<swiper-item>
<image src="{{item}}"/>
</swiper-item>
</block>
</swiper>
测试截图
2：scroll-view(可滚动视图区域)
属性:
scroll-x(是否可以水平滑动)
scroll-y(是否可以垂直滑动)
示例代码如下：
<scroll-view scroll-x="true" style="width:100%;">
<view style='flex-direction:row;width:150%;display: flex;'>//flex-direction:row属性和display: flex属性设置给view才能实现水平布局
<view style=' background-color: #aaa222;width: 200px;height: 100%;'>green</view>
<view style=' background-color: red;width: 200px;height: 100%;'>red</view>
<view style=' background-color: blue;width: 200px;height: 100%;'>blue</view>
</view>
</scroll-view>
<scroll-view scroll-y="true" style="height:100%;">
<view style='flex-direction:column;height:150%;display: flex;'>
<view style=' background-color: #aaa222;width: 100%;height: 200px;'>green</view>
<view style=' background-color: red;width: 100%;height:200px;'>red</view>
<view style=' background-color: blue;width: 100%;height: 200px;'>blue</view>
</view>
</scroll-view>
测试截图
3：movable-view(可移动视图区域)
属性:
direction(属性值有all、vertical、horizontal、none)
scale(是否支持双指缩放，默认缩放手势生效区域是在movable-view内)
scale-min(定义缩放倍数最小值)
scale-max(定义缩放倍数最大值)
scale-value(定义缩放倍数，取值范围为 0.5 - 10)
注意：
movable-area的有个属性scale-area(当里面的movable-view设置为支持双指缩放时，设置此值可将缩放手势生效区域修改为整个movable-area)
示例代码如下：
movable-view区域小于movable-area
<movable-area style="height: 200px; width: 200px; background: red;">
<movable-view style="height: 50px; width: 50px; background: blue;" direction="all">
</movable-view>
</movable-area>
movable-view区域大于movable-area
<movable-area style="height: 100px; width: 100px; background: red;">
<movable-view style="height: 200px; width: 200px; background: blue;" direction="all">
</movable-view>
</movable-area>
可放缩
<movable-area style="height: 200px; width: 200px; background: red;" scale-area="true">
<movable-view style="height: 50px; width: 50px; background: blue;" direction="all" scale="true" scale-min="0.5" scale-max="4" scale-value="2">
</movable-view>
</movable-area>
测试截图
4：cover-view(覆盖在原生组件之上的文本视图，可覆盖的原生组件包括map、video、canvas、camera、live-player、live-pusher，只支持嵌套cover-view、cover-image，可在cover-view中使用button)；cover-image(覆盖在原生组件之上的图片视图，可覆盖的原生组件同cover-view，支持嵌套在cover-view里)
示例代码如下：
<video src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400"
>
<cover-view>
<cover-view>
<cover-image style='height:20px;width:20px' src='../../image/swiper1.jpg' />
</cover-view>
<cover-view>
<cover-image style='height:20px;width:20px' src="../../image/swiper1.jpg" />
</cover-view>
<cover-view>00:00</cover-view>
</cover-view>
</video>
测试截图
5：icon(图标)
属性:
type(icon的类型，有效值：success, success_no_circle, info, warn, waiting, cancel, download, search, clear)
size(icon的大小，单位px)
color(icon的颜色，同css的color)
示例代码如下：
<block wx:for="{{iconSize}}">
<icon type="success" size="{{item}}" />
</block>
<block wx:for="{{iconType}}">
<icon type="{{item}}" size="40" />
</block>
<block wx:for="{{iconColor}}">
<icon type="success" size="40" color="{{item}}" />
</block>
数据代码如下：
data: {
iconSize: [20, 30, 40, 50, 60, 70],
iconColor: [
'red', 'orange', 'yellow', 'green', 'rgb(0,255,255)', 'blue', 'purple'
],
iconType: [
'success', 'success_no_circle', 'info', 'warn', 'waiting', 'cancel', 'download', 'search', 'clear'
]
}
测试截图
6：text(文本)
示例代码如下：
<text>我是文本</text>
7：rich-text(富文本)
示例代码如下：
<rich-text>我是富文本</rich-text>
8：progress(进度条)
属性:
percent(百分比0~100)
show-info(在进度条右侧显示百分比)
stroke-width(进度条线的宽度，单位px)
color(进度条颜色)
active(进度条从左往右的动画)
示例代码如下：
<progress percent="20" show-info="true" style='margin-bottom:20px'/>
<progress percent="40" stroke-width="12" style='margin-bottom:20px'/>
<progress percent="60" color="pink" style='margin-bottom:20px'/>
<progress percent="80" active="true" style='margin-bottom:20px'/>
测试截图
9：button(按钮)
属性:
size(按钮的大小，有默认大小default和小尺寸mini)
type(按钮的样式类型，有绿色primary，白色default，红色warn)
plain(按钮是否镂空，背景色透明)
disabled(是否禁用)
loading(名称前是否带 loading 图标)
open-type(微信开放能力，有contact打开客服会话；share触发用户转发；getUserInfo获取用户信息，可以从bindgetuserinfo回调中获取到用户信息；getPhoneNumber获取用户手机号，可以从bindgetphonenumber回调中获取到用户信息；launchApp打开APP，可以通过app-parameter属性设定向APP传的参数；openSetting打开授权设置页；feedback打开“意见反馈”页面，用户可提交反馈内容并上传日志，开发者可以登录小程序管理后台后进入左侧菜单“客服反馈”页面获取到反馈内容)
lang(指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文)
bindgetuserinfo(用户点击该按钮时，会返回获取到的用户信息，回调的detail数据与wx.getUserInfo返回的一致)
示例代码如下：
<button type="default" size="{{defaultSize}}" loading="{{loading}}" plain="{{plain}}" disabled="{{disabled}}" bindtap="default"> default </button>
<button type="primary" size="{{primarySize}}" loading="{{loading}}" plain="{{plain}}" disabled="{{disabled}}" bindtap="primary"> primary </button>
<button type="warn" size="{{warnSize}}" loading="{{loading}}" plain="{{plain}}" disabled="{{disabled}}" bindtap="warn"> warn </button>
<button bindtap="setDisabled">点击设置以上按钮disabled属性</button>
<button bindtap="setPlain">点击设置以上按钮plain属性</button>
<button bindtap="setLoading">点击设置以上按钮loading属性</button>
<button open-type="contact">进入客服会话</button>
<button open-type="getUserInfo" lang="zh_CN" bindgetuserinfo="onGotUserInfo">获取用户信息</button>
<button open-type="openSetting">打开授权设置页</button>
数据代码如下：
var types = ['default', 'primary', 'warn']
var pageObject = {
data: {
defaultSize: 'default',
primarySize: 'default',
warnSize: 'default',
disabled: false,
plain: false,
loading: false
},
setDisabled: function(e) {
this.setData({
disabled: !this.data.disabled
})
},
setPlain: function(e) {
this.setData({
plain: !this.data.plain
})
},
setLoading: function(e) {
this.setData({
loading: !this.data.loading
})
},
onGotUserInfo: function(e) {
console.log(e.detail.errMsg)
console.log(e.detail.userInfo)
console.log(e.detail.rawData)
},
}
for (var i = 0; i < types.length; ++i) {
(function(type) {
pageObject[type] = function(e) {
var key = type + 'Size'
var changedData = {}
changedData[key] =
this.data[key] === 'default' ? 'mini' : 'default'
this.setData(changedData)
}
})(types[i])
}
Page(pageObject)
测试截图
10：checkbox-group和checkbox(多选项目)
checkbox-group的属性:
bindchange(<checkbox-group/>中选中项发生改变是触发 change 事件，detail = {value:[选中的checkbox的value的数组]})
checkbox的属性:
value(<checkbox/>标识，选中时触发<checkbox-group/>的 change 事件，并携带 <checkbox/> 的 value)
checked(当前是否选中，可用来设置默认选中)
color(checkbox的颜色)
示例代码如下：
<checkbox-group bindchange="checkboxChange">
<checkbox color='red' wx:for="{{items}}" value="{{item.name}}" checked="{{item.checked}}">{{item.value}}</checkbox>
</checkbox-group>
数据代码如下：
Page({
data: {
items: [
{ name: 'USA', value: '美国' },
{ name: 'CHN', value: '中国', checked: 'true' },
{ name: 'BRA', value: '巴西' },
{ name: 'JPN', value: '日本' },
{ name: 'ENG', value: '英国' },
{ name: 'TUR', value: '法国' },
]
},
checkboxChange: function (e) {
console.log('checkbox发生change事件，携带value值为：', e.detail.value)
}
})
测试截图
11：form(表单，将组件内的用户输入的<switch/> <input/> <checkbox/> <slider/> <radio/> <picker/> 提交)
属性:
bindsubmit(携带 form 中的数据触发 submit 事件，event.detail = {value : {'name': 'value'} , formId: ''})
bindreset(表单重置时会触发 reset 事件)
示例代码如下(注意表单中的其他组件必须得有name属性才能将组件的值进行提交)：
<form bindsubmit="formSubmit" bindreset="formReset">
<switch name="switch">switch</switch>
<slider name="slider" show-value="true">slider</slider>
<input name="input" placeholder="please input here">input</input>
<radio-group name="radio-group">
radio-group
<radio value="radio1">radio1</radio>
<radio value="radio2">radio2</radio>
</radio-group>
<checkbox-group name="checkbox">
checkbox-group
<checkbox value="checkbox1">checkbox1</checkbox>
<checkbox value="checkbox2">checkbox2</checkbox>
</checkbox-group>
<button formType="submit">Submit</button>
<button formType="reset">Reset</button>
</form>
数据代码如下：
Page({
formSubmit: function (e) {
console.log('form发生了submit事件，携带数据为：', e.detail.value)
},
formReset: function () {
console.log('form发生了reset事件')
}
})
测试截图
12：input(输入框)
属性:
type(input 的类型)
password(是否是密码类型)
placeholder(输入框为空时占位符)
placeholder-style(指定 placeholder 的样式)
focus(获取焦点)
maxlength(最大输入长度，设置为 -1 的时候不限制最大长度)
auto-focus((即将废弃，请直接使用 focus )自动聚焦，拉起键盘)
示例代码如下：
<input placeholder="这是一个可以自动聚焦的input" auto-focus/>
<input placeholder="这个只有在按钮点击的时候才聚焦" focus="{{focus}}" />
<button bindtap="bindButtonTap">使得输入框获取焦点</button>
<input maxlength="10" placeholder="最大输入长度10" />
<view>你输入的是：{{inputValue}}</view>
<input bindinput="bindKeyInput" placeholder="输入同步到view中" />
<input bindinput="bindReplaceInput" placeholder="连续的两个1会变成2" />
<input password type="number" />
<input password type="text" />
<input type="digit" placeholder="带小数点的数字键盘" />
<input type="idcard" placeholder="身份证输入键盘" />
<input placeholder-style="color:red" placeholder="占位符字体是红色的" />
数据代码如下：
Page({
data: {
focus: false,
inputValue: ''
},
bindButtonTap: function () {
this.setData({
focus: true
})
},
bindKeyInput: function (e) {
this.setData({
inputValue: e.detail.value
})
},
bindReplaceInput: function (e) {
var value = e.detail.value
var pos = e.detail.cursor
if (pos != -1) {
//光标在中间
var left = e.detail.value.slice(0, pos)
//计算光标的位置
pos = left.replace(/11/g, '2').length
}
//直接返回对象，可以对输入进行过滤处理，同时可以控制光标的位置
return {
value: value.replace(/11/g, '2'),
cursor: pos
}
}
})
测试截图
13：picker(从底部弹起的滚动选择器，现支持五种选择器，通过mode来区分，分别是普通选择器，多列选择器，时间选择器，日期选择器，省市区选择器，默认是普通选择器)
普通选择器：mode = selector
属性:
range(mode为 selector 或 multiSelector 时，range 有效)
value(value 的值表示选择了 range 中的第几个(下标从 0 开始))
bindchange(value 改变时触发 change 事件，event.detail = {value: value})
多列选择器：mode = multiSelector
属性:
range(mode为 selector 或 multiSelector 时，range 有效。二维数组，长度表示多少列，数组的每项表示每列的数据，如[["a","b"], ["c","d"]])
value(value 每一项的值表示选择了 range 对应项中的第几个（下标从 0 开始）)
bindchange(value 改变时触发 change 事件，event.detail = {value: value})
bindcolumnchange(某一列的值改变时触发 columnchange 事件，event.detail = {column: column, value: value}，column 的值表示改变了第几列（下标从0开始），value 的值表示变更值的下标)
时间选择器：mode = time
属性:
value(表示选中的时间，格式为"hh:mm")
start(表示有效时间范围的开始，字符串格式为"hh:mm")
end(表示有效时间范围的结束，字符串格式为"hh:mm")
bindchange(value 改变时触发 change 事件，event.detail = {value: value} )
日期选择器：mode = date
属性:
value(表示选中的日期，格式为"YYYY-MM-DD")
start(表示有效日期范围的开始，字符串格式为"YYYY-MM-DD")
end(表示有效日期范围的结束，字符串格式为"YYYY-MM-DD")
bindchange(value 改变时触发 change 事件，event.detail = {value: value})
省市区选择器：mode = region
属性:
value(表示选中的省市区，默认选中每一列的第一个值)
custom-item(可为每一列的顶部添加一个自定义的项)
bindchange(value 改变时触发 change 事件，event.detail = {value: value, code: code, postcode: postcode}，其中字段code是统计用区划代码，postcode是邮政编码)
示例代码如下：
普通选择器
<picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
当前选择：{{array[index]}}
</picker>
多列选择器
<picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}">
当前选择：{{multiArray[0][multiIndex[0]]}}，{{multiArray[1][multiIndex[1]]}}，{{multiArray[2][multiIndex[2]]}}
</picker>
时间选择器
<picker mode="time" value="{{time}}" start="09:01" end="21:01" bindchange="bindTimeChange">
当前选择: {{time}}
</picker>
日期选择器
<picker mode="date" value="{{date}}" start="2015-09-01" end="2017-09-01" bindchange="bindDateChange">
当前选择: {{date}}
</picker>
省市区选择器
<picker mode="region" bindchange="bindRegionChange" value="{{region}}" custom-item="{{customItem}}">
当前选择：{{region[0]}}，{{region[1]}}，{{region[2]}}
</picker>
数据代码如下：
Page({
data: {
array: ['美国', '中国', '巴西', '日本'],
objectArray: [{
id: 0,
name: '美国'
},
{
id: 1,
name: '中国'
},
{
id: 2,
name: '巴西'
},
{
id: 3,
name: '日本'
}
],
index: 0,
multiArray: [
['无脊柱动物', '脊柱动物'],
['扁性动物', '线形动物', '环节动物', '软体动物', '节肢动物'],
['猪肉绦虫', '吸血虫']
],
objectMultiArray: [
[{
id: 0,
name: '无脊柱动物'
},
{
id: 1,
name: '脊柱动物'
}
],
[{
id: 0,
name: '扁性动物'
},
{
id: 1,
name: '线形动物'
},
{
id: 2,
name: '环节动物'
},
{
id: 3,
name: '软体动物'
},
{
id: 3,
name: '节肢动物'
}
],
[{
id: 0,
name: '猪肉绦虫'
},
{
id: 1,
name: '吸血虫'
}
]
],
multiIndex: [0, 0, 0],
date: '2016-09-01',
time: '12:01',
region: ['广东省', '广州市', '海珠区'],
customItem: '全部'
},
bindPickerChange: function(e) {
console.log('picker发送选择改变，携带值为', e.detail.value)
this.setData({
index: e.detail.value
})
},
bindMultiPickerChange: function(e) {
console.log('picker发送选择改变，携带值为', e.detail.value)
this.setData({
multiIndex: e.detail.value
})
},
bindMultiPickerColumnChange: function(e) {
console.log('修改的列为', e.detail.column, '，值为', e.detail.value);
var data = {
multiArray: this.data.multiArray,
multiIndex: this.data.multiIndex
};
data.multiIndex[e.detail.column] = e.detail.value;
switch (e.detail.column) {
case 0:
switch (data.multiIndex[0]) {
case 0:
data.multiArray[1] = ['扁性动物', '线形动物', '环节动物', '软体动物', '节肢动物'];
data.multiArray[2] = ['猪肉绦虫', '吸血虫'];
break;
case 1:
data.multiArray[1] = ['鱼', '两栖动物', '爬行动物'];
data.multiArray[2] = ['鲫鱼', '带鱼'];
break;
}
data.multiIndex[1] = 0;
data.multiIndex[2] = 0;
break;
case 1:
switch (data.multiIndex[0]) {
case 0:
switch (data.multiIndex[1]) {
case 0:
data.multiArray[2] = ['猪肉绦虫', '吸血虫'];
break;
case 1:
data.multiArray[2] = ['蛔虫'];
break;
case 2:
data.multiArray[2] = ['蚂蚁', '蚂蟥'];
break;
case 3:
data.multiArray[2] = ['河蚌', '蜗牛', '蛞蝓'];
break;
case 4:
data.multiArray[2] = ['昆虫', '甲壳动物', '蛛形动物', '多足动物'];
break;
}
break;
case 1:
switch (data.multiIndex[1]) {
case 0:
data.multiArray[2] = ['鲫鱼', '带鱼'];
break;
case 1:
data.multiArray[2] = ['青蛙', '娃娃鱼'];
break;
case 2:
data.multiArray[2] = ['蜥蜴', '龟', '壁虎'];
break;
}
break;
}
data.multiIndex[2] = 0;
console.log(data.multiIndex);
break;
}
this.setData(data);
},
bindDateChange: function(e) {
console.log('picker发送选择改变，携带值为', e.detail.value)
this.setData({
date: e.detail.value
})
},
bindTimeChange: function(e) {
console.log('picker发送选择改变，携带值为', e.detail.value)
this.setData({
time: e.detail.value
})
},
bindRegionChange: function(e) {
console.log('picker发送选择改变，携带值为', e.detail.value)
this.setData({
region: e.detail.value
})
}
})
测试截图
14：picker-view(嵌入页面的滚动选择器)
属性:
value(数组中的数字依次表示 picker-view 内的 picker-view-column 选择的第几项（下标从 0 开始），数字大于 picker-view-column 可选项长度时，选择最后一项)
indicator-style(设置选择器中间选中框的样式)
bindchange(当滚动选择，value 改变时触发 change 事件，event.detail = {value: value}；value为数组，表示 picker-view 内的 picker-view-column 当前选择的是第几项（下标从 0 开始）)
示例代码如下：
{{year}}年{{month}}月{{day}}日
<picker-view indicator-style="height: 50px;" style="width: 100%; height: 300px;" value="{{value}}" bindchange="bindChange">
<picker-view-column>
<view wx:for="{{years}}" style="line-height: 50px">{{item}}年</view>
</picker-view-column>
<picker-view-column>
<view wx:for="{{months}}" style="line-height: 50px">{{item}}月</view>
</picker-view-column>
<picker-view-column>
<view wx:for="{{days}}" style="line-height: 50px">{{item}}日</view>
</picker-view-column>
</picker-view>
数据代码如下：
const date = new Date()
const years = []
const months = []
const days = []
for (let i = 1990; i <= date.getFullYear(); i++) {
years.push(i)
}
for (let i = 1; i <= 12; i++) {
months.push(i)
}
for (let i = 1; i <= 31; i++) {
days.push(i)
}
Page({
data: {
years: years,
year: date.getFullYear(),
months: months,
month: 2,
days: days,
day: 2,
value: [9999, 1, 1],
},
bindChange: function (e) {
const val = e.detail.value
this.setData({
year: this.data.years[val[0]],
month: this.data.months[val[1]],
day: this.data.days[val[2]]
})
}
})
测试截图
15：radio(单选项目)
属性:
value(<radio/> 标识。当该<radio/> 选中时，<radio-group/> 的 change 事件会携带<radio/>的value)
checked(当前是否选中)
color(radio的颜色)
示例代码如下：
<radio-group bindchange="radioChange">
<block wx:for="{{items}}">
<radio color='red' value="{{item.name}}" checked="{{item.checked}}" />{{item.value}}
</block>
</radio-group>
数据代码如下：
Page({
data: {
items: [
{ name: 'USA', value: '美国' },
{ name: 'CHN', value: '中国', checked: 'true' },
{ name: 'BRA', value: '巴西' },
{ name: 'JPN', value: '日本' },
{ name: 'ENG', value: '英国' },
{ name: 'TUR', value: '法国' },
]
},
radioChange: function (e) {
console.log('radio发生change事件，携带value值为：', e.detail.value)
}
})
测试截图
16：slider(滑动选择器)
属性:
min(最小值)
max(最大值)
step(步长，取值必须大于 0，并且可被(max - min)整除)
show-value(是否显示当前 value)
bindchange(完成一次拖动后触发的事件，event.detail = {value: value} )
示例代码如下：
设置step
<slider bindchange="slider2change" step="5" /> 显示当前value
<slider bindchange="slider3change" show-value/> 设置最小/最大值
<slider bindchange="slider4change" min="50" max="200" show-value/>
数据代码如下：
var pageData = {}
for (var i = 1; i < 5; i++) {
(function (index) {
pageData['slider' + index + 'change'] = function (e) {
console.log('slider' + 'index' + '发生 change 事件，携带值为', e.detail.value)
}
})(i)
}
Page(pageData)
测试截图
17：switch(开关选择器)
属性:
checked(是否选中)
bindchange(checked 改变时触发 change 事件，event.detail={ value:checked})
示例代码如下：
<switch checked bindchange="switch1Change" />
<switch bindchange="switch2Change" />
数据代码如下：
Page({
switch1Change: function (e) {
console.log('switch1 发生 change 事件，携带值为', e.detail.value)
},
switch2Change: function (e) {
console.log('switch2 发生 change 事件，携带值为', e.detail.value)
}
})
测试截图
18：textarea(多行输入框)
属性:
placeholder(输入框为空时占位符)
placeholder-style(指定 placeholder 的样式)
auto-height(是否自动增高，设置auto-height时，style.height不生效)
focus(获取焦点)
auto-focus(自动聚焦，拉起键盘)
bindblur(输入框失去焦点时触发，event.detail = {value, cursor})
示例代码如下：
<textarea bindblur="bindTextAreaBlur" auto-height placeholder="自动变高" />
<textarea placeholder="placeholder颜色是红色的" placeholder-style="color:red;" />
<textarea placeholder="这是一个可以自动聚焦的textarea" auto-focus />
<textarea placeholder="这个只有在按钮点击的时候才聚焦" focus="{{focus}}" />
<button bindtap="bindButtonTap">使得输入框获取焦点</button>
<form bindsubmit="bindFormSubmit">
<textarea placeholder="form 中的 textarea" name="textarea" />
<button form-type="submit"> 提交 </button>
</form>
数据代码如下：
Page({
data: {
height: 20,
focus: false
},
bindButtonTap: function () {
this.setData({
focus: true
})
},
bindTextAreaBlur: function (e) {
console.log(e.detail.value)
},
bindFormSubmit: function (e) {
console.log(e.detail.value.textarea)
}
})
测试截图
19：navigator(页面链接)
属性:
url(当前小程序内的跳转链接)
open-type(跳转方式，默认方式为navigate，它的值有navigate，对应 wx.navigateTo 或 wx.navigateToMiniProgram 的功能；redirect，对应 wx.redirectTo 的功能；switchTab，对应 wx.switchTab 的功能；reLaunch，对应 wx.reLaunch 的功能；navigateBack，对应 wx.navigateBack 的功能；exit，退出小程序，target="miniProgram"时生效)
示例代码如下：
<navigator url="../../pages/ceshi/ceshi" open-type="redirect">跳转方式一</navigator>
<navigator url="../../pages/ceshi/ceshi" open-type="navigate">跳转方式二</navigator>
<navigator url="../../pages/ceshi/ceshi" open-type="exit" target="miniProgram">退出小程序</navigator>
20：audio(音频)
属性:
id(audio 组件的唯一标识符)
src(要播放音频的资源地址)
loop(是否循环播放)
controls(是否显示默认控件)
poster(默认控件上的音频封面的图片资源地址，如果 controls 属性值为 false 则设置 poster 无效)
name(默认控件上的音频名字，如果 controls 属性值为 false 则设置 name 无效)
author(默认控件上的作者名字，如果 controls 属性值为 false 则设置 author 无效)
示例代码如下：
<audio poster="{{poster}}" name="{{name}}" author="{{author}}" src="{{src}}" id="myAudio" controls loop/>
<button type="primary" bindtap="audioPlay">播放</button>
<button type="primary" bindtap="audioPause">暂停</button>
<button type="primary" bindtap="audio14">设置当前播放时间为14秒</button>
<button type="primary" bindtap="audioStart">回到开头</button>
数据代码如下：
Page({
onReady: function (e) {
// 使用 wx.createAudioContext 获取 audio 上下文 context
this.audioCtx = wx.createAudioContext('myAudio')
},
data: {
poster: 'http://y.gtimg.cn/music/photo_new/T002R300x300M000003rsKF44GyaSk.jpg?max_age=2592000',
name: '此时此刻',
author: '许巍',
src: 'http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E384E06DCBDC9AB7C49FD713D632D313AC4858BACB8DDD29067D3C601481D36E62053BF8DFEAF74C0A5CCFADD6471160CAF3E6A&fromtag=46',
},
audioPlay: function () {
this.audioCtx.play()
},
audioPause: function () {
this.audioCtx.pause()
},
audio14: function () {
this.audioCtx.seek(14)
},
audioStart: function () {
this.audioCtx.seek(0)
}
})
测试截图
21：image(图片)
属性:
src(图片资源地址)
mode(图片裁剪、缩放的模式)
lazy-load(图片懒加载。只针对page与scroll-view下的image有效)
示例代码如下：
<view wx:for="{{array}}">
<view>{{item.text}}</view>
<view>
<image style="width: 200px; height: 200px; background-color: #eeeeee;" mode="{{item.mode}}" src="{{src}}"></image>
</view>
</view>
数据代码如下：
Page({
data: {
array: [{
mode: 'scaleToFill',
text: 'scaleToFill：不保持纵横比缩放图片，使图片完全适应'
}, {
mode: 'aspectFit',
text: 'aspectFit：保持纵横比缩放图片，使图片的长边能完全显示出来'
}, {
mode: 'aspectFill',
text: 'aspectFill：保持纵横比缩放图片，只保证图片的短边能完全显示出来'
}, {
mode: 'top',
text: 'top：不缩放图片，只显示图片的顶部区域'
}, {
mode: 'bottom',
text: 'bottom：不缩放图片，只显示图片的底部区域'
}, {
mode: 'center',
text: 'center：不缩放图片，只显示图片的中间区域'
}, {
mode: 'left',
text: 'left：不缩放图片，只显示图片的左边区域'
}, {
mode: 'right',
text: 'right：不缩放图片，只显示图片的右边边区域'
}, {
mode: 'top left',
text: 'top left：不缩放图片，只显示图片的左上边区域'
}, {
mode: 'top right',
text: 'top right：不缩放图片，只显示图片的右上边区域'
}, {
mode: 'bottom left',
text: 'bottom left：不缩放图片，只显示图片的左下边区域'
}, {
mode: 'bottom right',
text: 'bottom right：不缩放图片，只显示图片的右下边区域'
}],
src: '../../image/swiper1.jpg'
},
imageError: function (e) {
console.log('image3发生error事件，携带值为', e.detail.errMsg)
}
})
测试截图
22：video(视频)
属性:
src(要播放视频的资源地址)
controls(是否显示默认播放控件（播放/暂停按钮、播放进度、时间）)
danmu-list(弹幕列表)
danmu-btn(是否显示弹幕按钮，只在初始化时有效，不能动态变更)
enable-danmu(是否展示弹幕，只在初始化时有效，不能动态变更 )
示例代码如下：
<video src="{{src}}" controls></video>
<button bindtap="bindButtonTap">获取视频</button>
<video id="myVideo" src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400"
danmu-list="{{danmuList}}" enable-danmu danmu-btn controls></video>
<button bindtap="bindButtonTap">获取视频</button>
<input bindblur="bindInputBlur" />
<button bindtap="bindSendDanmu">发送弹幕</button>
数据代码如下：
function getRandomColor() {
let rgb = []
for (let i = 0; i < 3; ++i) {
let color = Math.floor(Math.random() * 256).toString(16)
color = color.length == 1 ? '0' + color : color
rgb.push(color)
}
return '#' + rgb.join('')
}
Page({
onReady: function (res) {
this.videoContext = wx.createVideoContext('myVideo')
},
inputValue: '',
data: {
src: '',
danmuList: [
{
text: '第 1s 出现的弹幕',
color: '#ff0000',
time: 1
},
{
text: '第 3s 出现的弹幕',
color: '#ff00ff',
time: 3
}]
},
bindInputBlur: function (e) {
this.inputValue = e.detail.value
},
bindButtonTap: function () {
var that = this
wx.chooseVideo({
sourceType: ['album', 'camera'],
maxDuration: 60,
camera: ['front', 'back'],
success: function (res) {
that.setData({
src: res.tempFilePath
})
}
})
},
bindSendDanmu: function () {
this.videoContext.sendDanmu({
text: this.inputValue,
color: getRandomColor()
})
}
})
测试截图
23：camera(系统相机)
属性:
device-position(前置或后置，值为front, back)
flash(闪光灯，值为auto, on, off)
binderror(用户不允许使用摄像头时触发)
示例代码如下：
<camera device-position="back" flash="off" binderror="error" style="width: 100%; height: 300px;"></camera>
<button type="primary" bindtap="takePhoto">拍照</button>
<view>预览</view>
<image mode="widthFix" src="{{src}}"></image>
数据代码如下：
Page({
takePhoto() {
const ctx = wx.createCameraContext()
ctx.takePhoto({
quality: 'high',
success: (res) => {
this.setData({
src: res.tempImagePath
})
}
})
},
error(e) {
console.log(e.detail)
}
})
测试截图
24：map(地图)
属性:
longitude(中心经度)
latitude(中心纬度)
scale(缩放级别，取值范围为5-18)
controls(控件)
markers(标记点)
polyline(路线)
show-location(显示带有方向的当前定位点)
bindmarkertap(点击标记点时触发，会返回marker的id)
bindregionchange(视野发生变化时触发)
示例代码如下：
<map longitude="113.324520" latitude="23.099994" scale="14" controls="{{controls}}" bindcontroltap="controltap" markers="{{markers}}" bindmarkertap="markertap" polyline="{{polyline}}" bindregionchange="regionchange" show-location style="width: 100%; height: 300px;"></map>
数据代码如下：
Page({
data: {
markers: [{
iconPath: "../../image/swiper1.jpg",
id: 0,
latitude: 23.099994,
longitude: 113.324520,
width: 50,
height: 50
}],
polyline: [{
points: [{
longitude: 113.3245211,
latitude: 23.10229
}, {
longitude: 113.324520,
latitude: 23.21229
}],
color: "#FF0000DD",
width: 2,
dottedLine: true
}],
controls: [{
id: 1,
iconPath: '../../image/swiper1.jpg',
position: {
left: 0,
top: 300 - 50,
width: 50,
height: 50
},
clickable: true
}]
},
regionchange(e) {
console.log(e.type)
},
markertap(e) {
console.log(e.markerId)
},
controltap(e) {
console.log(e.controlId)
}
})
测试截图
25：canvas(画布)
属性:
canvas-id(canvas 组件的唯一标识符)
binderror(当发生错误时触发 error 事件，detail = {errMsg: 'something wrong'})
示例代码如下：
<canvas style="width: 300px; height: 200px;" canvas-id="firstCanvas"></canvas>
<!-- 当使用绝对定位时，文档流后边的 canvas 的显示层级高于前边的 canvas -->
<canvas style="width: 400px; height: 500px;" canvas-id="secondCanvas"></canvas>
<!-- 因为 canvas-id 与前一个 canvas 重复，该 canvas 不会显示，并会发送一个错误事件到 AppService -->
<canvas style="width: 400px; height: 500px;" canvas-id="secondCanvas" binderror="canvasIdErrorCallback"></canvas>
数据代码如下：
Page({
canvasIdErrorCallback: function (e) {
console.error(e.detail.errMsg)
},
onReady: function (e) {
// 使用 wx.createContext 获取绘图上下文 context
var context = wx.createCanvasContext('firstCanvas')
context.setStrokeStyle("#00ff00")
context.setLineWidth(5)
context.rect(0, 0, 200, 200)
context.stroke()
context.setStrokeStyle("#ff0000")
context.setLineWidth(2)
context.moveTo(160, 100)
context.arc(100, 100, 60, 0, 2 * Math.PI, true)
context.moveTo(140, 100)
context.arc(100, 100, 40, 0, Math.PI, false)
context.moveTo(85, 80)
context.arc(80, 80, 5, 0, 2 * Math.PI, true)
context.moveTo(125, 80)
context.arc(120, 80, 5, 0, 2 * Math.PI, true)
context.stroke()
context.draw()
}
})
测试截图
26：icon(图标)
属性:
type(开放数据类型，具体的值如下图所示)
open-gid(当 type="groupName" 时生效, 群id)
lang(当 type="user*" 时生效，以哪种语言展示 userInfo，有效值有：en, zh_CN, zh_TW)
type具体的值如下图所示：
示例代码如下：
<open-data type="userAvatarUrl"></open-data>
<open-data type="userGender" lang="zh_CN"></open-data>
测试截图
-------------------------------------------------------------------
用到的js语言语法的总结
1：数组
在js中数组具有的方法如下：
push(参数a)：向数组中放入元素a；
pop()：移除数组中的最后一个元素；
join(参数a)：将a插入都数组的各个元素之间，然后返回各个元素和a组合成的字符串；
length：返回数组中元素的个数；
