微信小程序开发文档 第54页

AudioContext AudioContext 实例，可通过 wx.createAudioContext 获取。 AudioContext 通过 id 跟一个 audio 组件绑定，操作对应的 audio 组件。 方法： AudioContext.pause() 暂停音频。 AudioContext.play() 播放音频。 AudioContext.seek(number position) 跳转到指定位置。 参数 number position 跳转位置，单位 s AudioContext.setSrc(string src) 设置音频地址 参数 string src 音频地址 示例代码： <!-- audio.wxml --> <audio src="{{src}}" id="myAudio" ></audio> <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> // audio.js Page({ onReady (e) { // 使用 wx.createAudioContext 获取 audio 上下文 context this.audioCtx = wx.createAudioContext('myAudio') this.audioCtx.setSrc('http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E384E06DCBDC9AB7C49FD713D632D313AC4858BACB8DDD29067D3C601481D36E62053BF8DFEAF74C0A5CCFADD6471160CAF3E6A&fromtag=46') this.audioCtx.play() }, data: { src: '' }, audioPlay () { this.audioCtx.play() }, audioPause () { this.audioCtx.pause() }, audio14 () { this.audioCtx.seek(14) }, audioStart () { this.audioCtx.seek(0) } })

MapContext 实例，可通过 wx.createMapContext 获取。 MapContext 通过 id 跟一个 map 组件绑定，操作对应的 map 组件。 方法 MapContext.getCenterLocation() 获取当前地图中心的经纬度。返回的是 gcj02 坐标系，可以用于 wx.openLocation() MapContext.moveToLocation(Object object) 将地图中心移置当前定位点，此时需设置地图组件 show-location 为true。2.8.0 起支持将地图中心移动到指定位置。 MapContext.translateMarker(Object object) 平移marker，带动画 MapContext.includePoints(Object object) 缩放视野展示所有经纬度 MapContext.getRegion() 获取当前地图的视野范围 MapContext.getRotate() 获取当前地图的旋转角 MapContext.getSkew() 获取当前地图的倾斜角 MapContext.getScale() 获取当前地图的缩放级别 MapContext.setCenterOffset(Object object) 设置地图中心点偏移，向后向下为增长，屏幕比例范围(0.25~0.75)，默认偏移为[0.5, 0.5] MapContext.removeCustomLayer(Object object) 移除个性化图层。 MapContext.addCustomLayer(Object object) 添加个性化图层。 示例代码 <!-- map.wxml --> <map id="myMap" show-location /> <button type="primary" bindtap="getCenterLocation">获取位置</button> <button type="primary" bindtap="moveToLocation">移动位置</button> <button type="primary" bindtap="translateMarker">移动标注</button> <button type="primary" bindtap="includePoints">缩放视野展示所有经纬度</button> // map.js Page({ onReady: function (e) { // 使用 wx.createMapContext 获取 map 上下文 this.mapCtx = wx.createMapContext('myMap') }, getCenterLocation: function () { this.mapCtx.getCenterLocation({ success: function(res){ console.log(res.longitude) console.log(res.latitude) } }) }, moveToLocation: function () { this.mapCtx.moveToLocation() }, translateMarker: function() { this.mapCtx.translateMarker({ markerId: 0, autoRotate: true, duration: 1000, destination: { latitude:23.10229, longitude:113.3345211, }, animationEnd() { console.log('animation end') } }) }, includePoints: function() { this.mapCtx.includePoints({ padding: [10],...

aria-component 无障碍访问 为了更好地满足视障人士对于小程序的访问需求，基础库自2.7.1起，支持部分ARIA标签。 无障碍特性在读屏模式下可以访问，iOS可通过设置->通用->辅助功能->旁白打开。 以 view 组件为例，开发者可以增加aria-role和aria-label属性。 其中aria-role表示组件的角色，当设置为’img’时，读屏模式下聚焦后系统会朗读出’图像’。设置为’button’时，聚焦后后系统朗读出’按钮’。 aria-label表示组件附带的额外信息，聚焦后系统会自动朗读出来。 小程序已经内置了一些无障碍的特性，对于非原生组件，开发者可以添加以下无障碍标签。 aria-hidden aria-role aria-label aria-checked aria-disabled aria-describedby aria-expanded aria-haspopup aria-selected aria-required aria-orientation aria-valuemin aria-valuemax aria-valuenow aria-readonly aria-multiselectable aria-controls tabindex aria-labelledby ria-orientation aia-multiselectable aria-labelledby 示例代码 <view aria-role="button" aria-label="提交表单">提交</view> 提示： 安卓和iOS读屏模式下设置aria-role后朗读的内容不同系统之间会有差异 可设置的aria-role可参看 Using Aria中的Widget Roles，部分role的设置在移动端可能无效。

小程序的功能不断的增加，但是旧版本的微信客户端并不支持新功能，所以在使用这些新能力的时候需要做兼容。 文档会在组件，API等页面描述中带上各个功能所支持的版本号。 可以通过wx.getSystemInfo或者wx.getSystemInfoSync获取到小程序的基础库版本号。 也可以通过wx.canIUse 详情 来判断是否可以在该基础库版本下直接使用对应的API或者组件 兼容方式 – 接口 对于新增的 API，可以用以下代码来判断是否支持用户的手机。 if (wx.openBluetoothAdapter) { wx.openBluetoothAdapter() } else { // 如果希望用户在最新版本的客户端上体验您的小程序，可以这样子提示 wx.showModal({ title: '提示', content: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。' }) } 兼容方式 – 参数 对于 API 的参数或者返回值有新增的参数，可以判断用以下代码判断。 wx.showModal({ success: function(res) { if (wx.canIUse('showModal.cancel')) { console.log(res.cancel) } } }) 兼容方式 – 组件 对于组件，新增的属性在旧版本上不会被处理，不过也不会报错。如果特殊场景需要对旧版本做一些降级处理，可以这样子做。 Page({ data: { canIUse: wx.canIUse('button.open-type.contact') } }) <button wx:if="{{canIUse}}" open-type="contact"> 客服消息 </button> <contact-button wx:else></contact-button>

基础库 2.9.3 开始支持，低版本需做兼容处理。 双向绑定语法 在 WXML 中，普通的属性的绑定是单向的。例如： <input value="{{value}}" /> 如果使用 ​this.setData({ value: 'leaf' })​ 来更新 ​value​ ，​this.data.value​ 和输入框的中显示的值都会被更新为 leaf ；但如果用户修改了输入框里的值，却不会同时改变 ​this.data.value​ 。 如果需要在用户输入的同时改变 ​this.data.value​ ，需要借助简易双向绑定机制。此时，可以在对应项目之前加入 ​model​: 前缀： <input model:value="{{value}}" /> 这样，如果输入框的值被改变了， ​this.data.value​ 也会同时改变。同时， WXML 中所有绑定了 ​value​ 的位置也会被一同更新， 数据监听器 也会被正常触发。 用于双向绑定的表达式有如下限制： 只能是一个单一字段的绑定，如 <input model:value="值为 {{value}}" /> <input model:value="{{ a + b }}" /> 都是非法的； 目前，尚不能 data 路径，如 <input model:value="{{ a.b }}" /> 这样的表达式目前暂不支持。 在自定义组件中传递双向绑定 双向绑定同样可以使用在自定义组件上。如下的自定义组件： // custom-component.js Component({ properties: { myValue: String } }) <!-- custom-component.wxml --> <input model:value="{{myValue}}" /> 这个自定义组件将自身的 ​myValue​ 属性双向绑定到了组件内输入框的 ​value​ 属性上。这样，如果页面这样使用这个组件： <custom-component model:my-value="{{pageValue}}" /> 当输入框的值变更时，自定义组件的 ​myValue​ 属性会同时变更，这样，页面的 ​this.data.pageValue​ 也会同时变更，页面 WXML 中所有绑定了 ​pageValue​ 的位置也会被一同更新。 在自定义组件中触发双向绑定更新 自定义组件还可以自己触发双向绑定更新，做法就是：使用 setData 设置自身的属性。例如： // custom-component.js Component({ properties: { myValue: String }, methods: { update: function() { // 更新 myValue this.setData({ myValue: 'leaf' }) } } }) 如果页面这样使用这个组件： <custom-component model:my-value="{{pageValue}}" /> 当组件使用 ​setData​ 更新 ​myValue​ 时，页面的 ​this.data.pageValue​ 也会同时变更，页面 WXML 中所有绑定了 ​pageValue​ 的位置也会被一同更新。

基础组件 框架为开发者提供了一系列基础组件，开发者可以通过组合这些基础组件进行快速开发。 详细介绍请参考组件文档

console console.log 方法用于在 console 窗口输出信息。它可以接受多个参数，将它们的结果连接起来输出。 Math 属性 E LN10 LN2 LOG2E LOG10E PI SQRT1_2 SQRT2 以上属性的具体使用请参考 ES5 标准。 方法 abs acos asin atan atan2 ceil cos exp floor log max min pow random round sin sqrt tan 以上方法的具体使用请参考 ES5 标准。 JSON 方法 stringify(object): 将 object 对象转换为 JSON 字符串，并返回该字符串。 parse(string): 将 JSON 字符串转化成对象，并返回该对象。 示例代码： console.log(undefined === JSON.stringify()); console.log(undefined === JSON.stringify(undefined)); console.log("null"===JSON.stringify(null)); console.log("111"===JSON.stringify(111)); console.log('"111"'===JSON.stringify("111")); console.log("true"===JSON.stringify(true)); console.log(undefined===JSON.stringify(function(){})); console.log(undefined===JSON.parse(JSON.stringify())); console.log(undefined===JSON.parse(JSON.stringify(undefined))); console.log(null===JSON.parse(JSON.stringify(null))); console.log(111===JSON.parse(JSON.stringify(111))); console.log("111"===JSON.parse(JSON.stringify("111"))); console.log(true===JSON.parse(JSON.stringify(true))); console.log(undefined===JSON.parse(JSON.stringify(function(){}))); Number 属性 MAX_VALUE MIN_VALUE NEGATIVE_INFINITY POSITIVE_INFINITY 以上属性的具体使用请参考 ES5 标准。 Date 属性 parse UTC now 以上属性的具体使用请参考 ES5 标准。 Global 属性 NaN Infinity undefined 以上属性的具体使用请参考 ES5 标准。 方法 parseInt parseFloat isNaN isFinite decodeURI decodeURIComponent encodeURI encodeURIComponent 以上方法的具体使用请参考 ES5 标准。

数据类型 WXS 语言目前共有以下几种数据类型： number ： 数值 string ：字符串 boolean：布尔值 object：对象 function：函数 array : 数组 date：日期 regexp：正则 number 语法 number 包括两种数值：整数，小数。 var a = 10; var PI = 3.141592653589793; 属性 constructor：返回字符串 “Number”。 方法 toString toLocaleString valueOf toFixed toExponential toPrecision 以上方法的具体使用请参考 ES5 标准。 string 语法 string 有两种写法： 'hello world'; "hello world"; 属性 constructor：返回字符串 “String”。 length 除constructor外属性的具体含义请参考 ES5 标准。 方法 toString valueOf charAt charCodeAt concat indexOf lastIndexOf localeCompare match replace search slice split substring toLowerCase toLocaleLowerCase toUpperCase toLocaleUpperCase trim 以上方法的具体使用请参考 ES5 标准。 boolean 语法 布尔值只有两个特定的值：true 和 false。 属性 constructor：返回字符串 “Boolean”。 方法 toString valueOf 以上方法的具体使用请参考 ES5 标准。 object 语法 object 是一种无序的键值对。使用方法如下所示： var o = {} //生成一个新的空对象 //生成一个新的非空对象 o = { 'string' : 1, //object 的 key 可以是字符串 const_var : 2, //object 的 key 也可以是符合变量定义规则的标识符 func : {}, //object 的 value 可以是任何类型 }; //对象属性的读操作 console.log(1 === o['string']); console.log(2 === o.const_var); //对象属性的写操作...

WXS 主要有 3 种注释的方法。 示例代码： <!-- wxml --><wxs module="sample">// 方法一：单行注释/*方法二：多行注释*//*方法三：结尾注释。即从 /* 开始往后的所有 WXS 代码均被注释var a = 1;var b = 2;var c = "fake";</wxs> 上述例子中，所有 WXS 代码均被注释掉了。 方法三 和 方法二 的唯一区别是，没有 */ 结束符。 示例： 1.在文件中选中一行代码 2.然后再代码前面使用//，表示注释。 3.另外我们还可以在代码的头部和尾部分别加上/*和*/，也是表示注释！ 4.将模拟器打开。 5.在下面我们就发现内容是空白的，是因为我们的代码被注释掉了，就不起作用了

模板 WXML提供模板（template），可以在模板中定义代码片段，然后在不同的地方调用。 定义模板 使用name属性，作为模板的名字。然后在<template/>内定义代码片段，如： <!-- index: int msg: string time: string --> <template name="msgItem"> <view> <text> {{index}}: {{msg}} </text> <text> Time: {{time}} </text> </view> </template> 使用模板 使用is属性，声明需要的使用的模板，然后将模板所需要的data传入，如： <template is="msgItem" data="{{...item}}"/> Page({ data: { item: { index: 0, msg: 'this is a template', time: '2016-09-15' } } }) is属性可以使用Mustache语法，来动态决定具体需要渲染哪个模板： <template name="odd"> <view> odd </view> </template> <template name="even"> <view> even </view> </template> <block wx:for="{{[1, 2, 3, 4, 5]}}"> <template is="{{item % 2 == 0 ? 'even' : 'odd'}}"/> </block> 模板的作用域 模板拥有自己的作用域，只能使用data传入的数据。