View篇
1： swiper(切换栏)
属性:
indicator-dots(是否显示面板指示点)
autoplay(是否自动切换)
interval(自动切换时间间隔)
duration(滑动动画时长)
vertical(滑动方向是否为纵向)
circular(是否采用衔接滑动)
示例代码如下：
测试截图
2：scroll-view(可滚动视图区域)
属性:
scroll-x(是否可以水平滑动)
scroll-y(是否可以垂直滑动)
示例代码如下：
//flex-direction:row属性和display: flex属性设置给view才能实现水平布局
green
red
blue
green
red
blue
测试截图
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-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里)
示例代码如下：
测试截图
5：icon(图标)
属性:
type(icon的类型，有效值：success, success_no_circle, info, warn, waiting, cancel, download, search, clear)
size(icon的大小，单位px)
color(icon的颜色，同css的color)
示例代码如下：
数据代码如下：
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(文本)
示例代码如下：
我是文本
7：rich-text(富文本)
示例代码如下：
我是富文本
8：progress(进度条)
属性:
percent(百分比0~100)
show-info(在进度条右侧显示百分比)
stroke-width(进度条线的宽度，单位px)
color(进度条颜色)
active(进度条从左往右的动画)
示例代码如下：
测试截图
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返回的一致)
示例代码如下：
数据代码如下：
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(示例代码如下：
{{item.value}}
数据代码如下：
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(表单，将组件内的用户输入的
属性:
bindsubmit(携带 form 中的数据触发 submit 事件，event.detail = {value : {'name': 'value'} , formId: ''})
bindreset(表单重置时会触发 reset 事件)
示例代码如下(注意表单中的其他组件必须得有name属性才能将组件的值进行提交)：
数据代码如下：
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 )自动聚焦，拉起键盘)
示例代码如下：
你输入的是：{{inputValue}}
数据代码如下：
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是邮政编码)
示例代码如下：
普通选择器
当前选择：{{array[index]}}
多列选择器
当前选择：{{multiArray[0][multiIndex[0]]}}，{{multiArray[1][multiIndex[1]]}}，{{multiArray[2][multiIndex[2]]}}
时间选择器
当前选择: {{time}}
日期选择器
当前选择: {{date}}
省市区选择器
当前选择：{{region[0]}}，{{region[1]}}，{{region[2]}}
数据代码如下：
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}}日
{{item}}年
{{item}}月
{{item}}日
数据代码如下：
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(示例代码如下：
数据代码如下：
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
数据代码如下：
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})
示例代码如下：
数据代码如下：
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})
示例代码如下：
数据代码如下：
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"时生效)
示例代码如下：
跳转方式一
跳转方式二
退出小程序
20：audio(音频)
属性:
id(audio 组件的唯一标识符)
src(要播放音频的资源地址)
loop(是否循环播放)
controls(是否显示默认控件)
poster(默认控件上的音频封面的图片资源地址，如果 controls 属性值为 false 则设置 poster 无效)
name(默认控件上的音频名字，如果 controls 属性值为 false 则设置 name 无效)
author(默认控件上的作者名字，如果 controls 属性值为 false 则设置 author 无效)
示例代码如下：
数据代码如下：
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有效)
示例代码如下：
{{item.text}}
数据代码如下：
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(是否展示弹幕，只在初始化时有效，不能动态变更 )
示例代码如下：
数据代码如下：
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(用户不允许使用摄像头时触发)
示例代码如下：
预览
数据代码如下：
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(视野发生变化时触发)
示例代码如下：
数据代码如下：
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'})
示例代码如下：
数据代码如下：
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具体的值如下图所示：
示例代码如下：
测试截图
-------------------------------------------------------------------
用到的js语言语法的总结
1：数组
在js中数组具有的方法如下：
push(参数a)：向数组中放入元素a；
pop()：移除数组中的最后一个元素；
join(参数a)：将a插入都数组的各个元素之间，然后返回各个元素和a组合成的字符串；
length：返回数组中元素的个数；