0.11.122100 更新概述
新增 4 个新 api， 2个新组件
拓展了 10 个组件属性，新增 6 个组件事件
修复数十个 api 以及组件 bug，优化部分交互体验
开发者工具增加新 api 及组件的调试支持
开发者工具增加微信支付的调试支持
详细更新日志如下：
基础库更新
a 新增 api wx.switchtab 详情
a 新增 api wx.scancode
a 新增 api wx.createmapcontext
a 新增 api wx.createcanvascontext
a 新增 api wx.showtoast 调用参数 mask
a 新增 页面方法 page.onshareappmessage 用于自定义分享内容
a 新增 框架方法 app.onerror
a 新增 页面配置 disabelscroll
a 新增 <picker-view/> 组件
a 新增 <contact-button/> 组件，用于显示客服会话按钮
a 新增 <navigator/> 组件属性 opentype
a 新增 <switch/> <checkbox/> <radio/> 组件属性 color
a 新增 <video/> 组件属性 objectfit
a 新增 <map/> 组件属性 markers polyline circles include-points controls show-location
a 新增 <swiper/> 组件属性 circular 控制衔接滑动
a 新增 <input/> 组件属性 cursor-spacing
a 新增 <textarea/> 组件属性 cursor-spacing
a 新增 <picker/> 组件属性 disabled
a 新增 <view/> 组件属性 hover-class
a 新增 <scroll-view/> 组件属性 scroll-x, scroll-y 动态修改支持
a 新增 <map/> 组件事件 bindtap bindmarkertap bindcontrolstap bindregionchange
a 新增 <input/>组件事件 bindconfirm
a 新增 <video/> 组件事件 bindtimeupdate
a 新增 <textarea/> 组件事件 bindconfirm
a 新增 <textarea/> 组件事件 bindinput
a 新增 <canvas/> 组件事件 bindlongtap
a 新增 audiocontext.setsrc() 上下文 api
a 新增 canvascontext 上下文
a 新增 canvascontext.arc() 上下文 api
a 新增 canvascontext.fillrect() 上下文 api
a 新增 canvascontext.strokerect() 上下文 api
a 新增 canvascontext.createlineargradient() 上下文 api
a 新增 canvascontext.createcirculargradient() 上下文 api
a 新增 <scroll-view/> 组件表现 滚动时禁止将页面滚动
u 更新 api wx.getsysteminfo 新增 platform 返回参数
u 更新 api wx.downloadfile 当 http 状态码为 200 或 304 的时候会返回 tmpfilepath
u 更新 api wx.showmodal 调用参数 confirmtext canceltext 的字数限制
u 更新 wxml dataset 返回 支持 object 和 array
u 更新 <image/> 组件属性 mode 可选 widthfix
u 更新 <picker/> 组件属性 range 增加 objectarray 类型支持
u 更新 <switch/> <checkbox/> <radio/> 默认样式
u 更新 canvascontext.save() canvascontext.restore() 上下文 api 保存画笔 style
u 更新 canvascontext.arc() 上下文 api 参数调整，新增 eangle, counterclockwise，去除 sweepangle
u 优化 <swiper/> 滑动体验
u 优化 <swiper/> <slider/> 在 <scroll-view/> 交互体验
u 优化 <navigator/> <button/> 组件点击体验
f 修复 wx.request 在 android 上 method 只能用大写值的问题
f 修复 wx.uploadfile 在 ios 上无法设置 header 的问题
f 修复 wx.getlocation type=gcj02 在 ios 上不生效的问题
f 修复 wx.showtoast 退出小程序后依然显示的问题
f 修复 wx.showmodal 返回参数在 android 和 ios 不一致的问题
f 修复 wx.showmodal content 太长时或 title 为空时，布局错乱的问题
f 修复 wx.showmodal canceltext 和 confirmtext 为空时，没有显示默认值的问题
f 修复 wx.showmodal 期间，键盘弹出，无法收起键盘的问题
f 修复 wx.getimageinfo 在 android 无法获取 http 链接图片的问题
f 修复 wx.getsysteminfo 因为 tabbar 出现导致获取的屏幕高度不一致的问题
f 修复 wx.downloadfile 在 android 上下载后图片无法显示的问题
f 修复 wx.request 没有对请求数据正确 encode 的问题
f 修复 wx.login 在 ios 中 app.onlaunch 没有回调的问题
f 修复 wx.createanimationcontext 设置 transformorigin 异常及动画不能进行下一步的问题
f 修复 wx.navigateto wx.redirectto 在 ios 上，page.onload 无法调用的问题
f 修复 catch 阻止事件的默认行为失效的问题
f 修复 setinterval 在 ios 传参错误导致页面卡死的问题
f 修复 onreachbottom 触发多次的问题
f 修复 <swiper/> 拥有文本节点后代时出错的问题
f 修复 <switch/> <radio/> <checkbox/> <image/> <video/> hidden 属性不生效的问题
f 修复 <checkbox/> <radio/> label 无法生效的问题
f 修复 <scroll-view/> 滑动到顶部或底部闪屏的问题
f 修复 <video/> 在 ios 上事件不生效的问题
f 修复 <video/> 在 ios 被移除了声音会继续存在的问题
f 修复 <text/> 内嵌不会动态更新 class 和 style 的问题
f 修复 <button/> disabled 时文字颜色不对的问题
f 修复 <input/> focus 属性无效的问题
f 修复 <input/> 在 ios9 使用 display:flex 的时候，第一次输入不显示的问题
f 修复 <input/> 初始值为 undefined 时显示异常的问题
f 修复 <input/> placeholder 重影的问题
f 修复 <input/> <textare/> 聚焦前后颜色异常的问题
f 修复 <textarea/> position:fixed 定位异常的问题
f 修复 <textarea/> 在打开 picker 后不触发 blur 事件的问题
f 修复 <textarea/> 设置 auto-height 时高度变化的问题
f 修复 <textarea/> 销毁异常的问题
f 修复 <video/> 在 android 全屏按钮点击两次才能生效的问题
f 修复 <audio/> 在多个页面中使用相同 id 冲突的问题
f 修复 <canvas/> drawimage 无法正常显示的问题
f 修复 <image/> 在 bindload 事件里面 setdata 会出现死循环的问题
f 修复 <scroll-view/> scroll-into-view 失效的问题
f 修复 <form/> submit 取不到 input 的内容的问题
d 即将移除 <navigator/> redirect 属性
d 即将移除 wx.createcontext 接口
d 即将移除 <input/> auto-focus 属性，直接使用 focus 属性即可
d 即将移除 <map /> covers 属性
开发者工具基础功能
a 新增 wx.switchtab 的调试支持
a 新增 wx.startrecord wx.stoprecord wx.playvoice wx.pausevoice wx.stopvoice api 调试支持
a 新增 微信支付调试支持
a 新增 二维码扫码调试支持
a 新增 app.json 重复定义页面文件导致提交预览错误的提示
a 新增 模拟器加载图片网络错误的提示信息
a 新增 编译时候设置初始化页面以及参数的功能
a 新增 提交预览时候设置初始化页面以及参数的功能
f 优化 appdata panel 分页面查看数据，支持动态更新以及 code 模式显示
f 修复 wx.getbackgroundaudioplayerstate 在没有音乐播放的时候无返回的问题
f 修复 wx.getbackgroundaudioplayerstate 获取 status 不正确的问题
f 修复 wxml panel 某些情况下白屏的问题
f 修复 wxml panel 属性无法复制，并且复制带有回车的问题
f 修复 wxml panel 单一文本节点展示没有对齐的问题
f 修复 app.json 中 tabbar 的 position 设置为 top 时模拟器显示错误的问题
f 修复 devtools 和编辑器中点击外部链接错误的问题
f 修复 wx.requst 因为缓存无法发送请求的问题
以下是更新详情：
wx.switchtab(object)
跳转到 tabbar 页面，并关闭其他所有非 tabbar 页面
object 参数说明：
[tr]参数类型必填说明[/tr]url string 是 需要跳转的 tabbar 页面的路径（需在 app.json 的  字段定义的页面），路径后不能带参数
success function 否 接口调用成功的回调函数
fail function 否 接口调用失败的回调函数
complete function 否 接口调用结束的回调函数（调用成功、失败都会执行）
示例代码：
{ tabbar: { list: [{ pagepath: index, text: 首页 },{ pagepath: other, text: 其他 }] }}wx.switchtab({ url: '/index'})
wx.scancode(object)
调起客户端扫码界面，扫码成功后返回对应的结果
object 参数说明：
[tr]参数类型必填说明[/tr]success function 否 接口调用成功的回调函数，返回内容详见返回参数说明。
fail function 否 接口调用失败的回调函数
complete function 否 接口调用结束的回调函数（调用成功、失败都会执行）
success返回参数说明：
[tr]参数说明[/tr]result 码的内容
示例代码：
wx.scancode({ success: (res) => { console.log(res) }})
onshareappmessage
在 page 中定义 onshareappmessage 函数，设置该页面的分享信息。
只有定义了此事件处理函数，右上角菜单才会显示“分享”按钮
用户点击分享按钮的时候会调用
此事件需要 return 一个 object，用于自定以分享内容
自定义分享字段
[tr]字段说明默认值[/tr]title 分享标题 当前小程序名称
desc 分享描述 当前小程序名称
path 分享路径 当前页面 path ，必须是以 / 开头的完整路径
示例代码：
page({ onshareappmessage: function () { return { title: '自定义分享标题', desc: '自定义分享描述', path: '/page/user?id=123' } }})
wx.showtoast(object)
显示消息提示框
object参数说明：
[tr]参数类型必填说明[/tr]title string 是 提示的内容
icon string 否 图标，只支持success、loading
duration number 否 提示的延迟时间，单位毫秒，默认：1500, 最大为10000
mask boolean 否 是否显示透明蒙层，防止触摸穿透，默认：false
success function 否 接口调用成功的回调函数
fail function 否 接口调用失败的回调函数
complete function 否 接口调用结束的回调函数（调用成功、失败都会执行）
示例代码：
wx.showtoast({ title: '成功', icon: 'success', duration: 2000})
onshareappmessage
在 page 中定义 onshareappmessage 函数，设置该页面的分享信息。
只有定义了此事件处理函数，右上角菜单才会显示“分享”按钮
用户点击分享按钮的时候会调用
此事件需要 return 一个 object，用于自定以分享内容
自定义分享字段
[tr]字段说明默认值[/tr]title 分享标题 当前小程序名称
desc 分享描述 当前小程序名称
path 分享路径 当前页面 path ，必须是以 / 开头的完整路径
示例代码：
page({ onshareappmessage: function () { return { title: '自定义分享标题', desc: '自定义分享描述', path: '/page/user?id=123' } }})
wx.createcanvascontext(canvasid)
定义
创建 canvas 绘图上下文（指定 canvasid）
tip: 需要指定 canvasid，该绘图上下文只作用于对应的 <canvas/>
参数
[tr]参数类型说明[/tr]canvasid string 画布表示，传入定义在 <canvas/> 的 canvas-id
新增组件：
audiocontext
audiocontext 通过 audioid 跟一个 <audio/> 组件绑定，通过它可以操作对应的 <audio/> 组件。
audiocontext 对象的方法列表：
[tr]方法参数说明[/tr]setsrc src 音频的地址
play 无 播放
pause 无 暂停
seek position 跳转到指定位置，单位 s
示例代码：
<!-- 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.jspage({ onready: function (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: function () { this.audioctx.play() }, audiopause: function () { this.audioctx.pause() }, audio14: function () { this.audioctx.seek(14) }, audiostart: function () { this.audioctx.seek(0) }})
picker-view
嵌入页面的滚动选择器
[tr]属性名类型默认值说明[/tr]value number array
数组中的数字依次表示 picker-view 内的 picker-view-colume 选择的第几项（下标从 0 开始），数字大于 picker-view-column 可选项长度时，选择最后一项。
indicator-style string
设置选择器中间选中框的样式
bindchange eventhandle
当滚动选择，value 改变时触发 change 事件，event.detail = {value: value}；value为数组，表示 picker-view 内的 picker-view-column 当前选择的是第几项（下标从 0 开始）
注意：其中只可放置<picker-view-column/>组件，其他节点不会显示。
picker-view-column
仅可放置于<picker-view />中，其孩子节点的高度会自动设置成与picker-view的选中框的高度一致
示例代码：
<view> <view>{{year}}年{{month}}月{{day}}日</view> <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></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, year: date.getfullyear(), 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[1]] }) }})
canvas增强
a 新增 canvascontext 上下文
a 新增 canvascontext.arc() 上下文 api
a 新增 canvascontext.fillrect() 上下文 api
a 新增 canvascontext.strokerect() 上下文 api
a 新增 canvascontext.createlineargradient() 上下文 api
a 新增 canvascontext.createcirculargradient() 上下文 api
createcirculargradient
定义
创建一个圆形的渐变颜色。
tip: 起点在圆心，终点在圆环。
tip: 需要使用 addcolorstop() 来指定渐变点，至少要两个。
参数
[tr]参数类型定义[/tr]x number 圆心的x坐标
y number 圆心的y坐标
r number 圆的半径
例子
const ctx = wx.createcanvascontext('mycanvas')// create circular gradientconst grd = ctx.createcirculargradient(75, 50, 50)grd.addcolorstop(0, 'red')grd.addcolorstop(1, 'white')// fill with gradientctx.setfillstyle(grd)ctx.fillrect(10, 10, 150, 80)ctx.draw()
createlineargradient
定义
创建一个线性的渐变颜色。
tip: 需要使用 addcolorstop() 来指定渐变点，至少要两个。
参数
[tr]参数类型定义[/tr]x0 number 起点的x坐标
y0 number 起点的y坐标
x1 number 终点的x坐标
y1 number 终点的y坐标
例子
const ctx = wx.createcanvascontext('mycanvas')// create linear gradientconst grd = ctx.createlineargradient(0, 0, 200, 0)grd.addcolorstop(0, 'red')grd.addcolorstop(1, 'white')// fill with gradientctx.setfillstyle(grd)ctx.fillrect(10, 10, 150, 80)ctx.draw()
strokerect
定义
画一个矩形(非填充)。
tip: 用 setfillstroke() 设置矩形线条的颜色，如果没设置默认是黑色。
参数
[tr]参数类型范围说明[/tr]x number
矩形路径左上角的x坐标
y number
矩形路径左上角的y坐标
width number
矩形路径的宽度
height number
矩形路径的高度
例子
const ctx = wx.createcanvascontext('mycanvas')ctx.setstrokestyle('red')ctx.strokerect(10, 10, 150, 75)ctx.draw()
fillrect
定义
填充一个矩形。
tip: 用 setfillstyle() 设置矩形的填充色，如果没设置默认是黑色。
参数
[tr]参数类型说明[/tr]x number 矩形路径左上角的x坐标
y number 矩形路径左上角的y坐标
width number 矩形路径的宽度
height number 矩形路径的高度
例子
const ctx = wx.createcanvascontext('mycanvas')ctx.setfillstyle('red')ctx.fillrect(10, 10, 150, 75)ctx.draw()
arc
定义
画一条弧线。
tip: 创建一个圆可以用 arc() 方法指定其实弧度为0，终止弧度为 2 * math.pi。
tip: 用 stroke() 或者 fill() 方法来在 canvas 中画弧线。
参数
[tr]参数类型说明[/tr]x number 圆的x坐标
y number 圆的y坐标
r number 圆的半径
sangle number 起始弧度，单位弧度（在3点钟方向）
eangle number 终止弧度
counterclockwise boolean 可选。指定弧度的方向是逆时针还是顺时针。默认是false，即顺时针。
例子
const ctx = wx.createcanvascontext('mycanvas')// draw coordinatesctx.arc(100, 75, 50, 0, 2 * math.pi)ctx.setfillstyle('#eeeeee')ctx.fill()ctx.beginpath()ctx.moveto(40, 75)ctx.lineto(160, 75)ctx.moveto(100, 15)ctx.lineto(100, 135)ctx.setstrokestyle('#aaaaaa')ctx.stroke()ctx.setfontsize(12)ctx.setfillstyle('black')ctx.filltext('0', 165, 78)ctx.filltext('0.5*pi', 83, 145)ctx.filltext('1*pi', 15, 78)ctx.filltext('1.5*pi', 83, 10)// draw pointsctx.beginpath()ctx.arc(100, 75, 2, 0, 2 * math.pi)ctx.setfillstyle('lightgreen')ctx.fill()ctx.beginpath()ctx.arc(100, 25, 2, 0, 2 * math.pi)ctx.setfillstyle('blue')ctx.fill()ctx.beginpath()ctx.arc(150, 75, 2, 0, 2 * math.pi)ctx.setfillstyle('red')ctx.fill()// draw arcctx.beginpath()ctx.arc(100, 75, 50, 0, 1.5 * math.pi)ctx.setstrokestyle('#333333')ctx.stroke()ctx.draw()
针对 arc(100, 75, 50, 0, 1.5 * math.pi)的三个关键坐标如下：绿色: 圆心 (100, 75)
红色: 起始弧度 (0)
蓝色: 终止弧度 (1.5 * math.pi)
在canvas上画图
所有在 <canvas/> 中的画图必须用 javascript 完成：
wxml：（我们在接下来的例子中如无特殊声明都会用这个 wxml 为模板，不再重复）
<canvas canvas-id="mycanvas" style="border: 1px solid;"/>js：（我们在接下来的例子中会将 js 放在 onload 中）
const ctx = wx.createcanvascontext('mycanvas')ctx.setfillstyle('red')ctx.fillrect(10, 10, 150, 75)ctx.draw()
第一步：创建一个 canvas 绘图上下文
首先，我们需要创建一个 canvas 绘图上下文 canvascontext。
canvascontext 是小程序内建的一个对象，有一些绘图的方法：
const ctx = wx.createcanvascontext('mycanvas')
第二步：使用 canvas 绘图上下文进行绘图描述
接着，我们来描述要在 canvas 中绘制什么内容。
设置绘图上下文的填充色为红色：
ctx.setfillstyle('red')用 fillrect(x, y, width, height) 方法画一个矩形，填充为刚刚设置的红色：
ctx.fillrect(10, 10, 150, 75)
第三步：画图
告诉 <canvas/> 组件你要将刚刚的描述绘制上去：
ctx.draw()
以上就是微信小程序0.11.122100 版本更新详情介绍的详细内容。