手揣网教程/应用软件/内容

微信小程序0.11.122100 版本更新详情介绍

应用软件2024-06-15 阅读
[摘要]0.11.122100 更新概述新增 4 个新 API， 2个新组件拓展了 10 个组件属性，新增 6 个组件事件修复数十个 API 以及组件 bug，优化部分交互体验开发者工具增加新 API 及组...
0.11.122100 更新概述


详细更新日志如下：


基础库更新



开发者工具基础功能

以下是更新详情：


wx.switchTab(OBJECT)

跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
OBJECT 参数说明：
[tr]参数类型必填说明[/tr]
urlString是需要跳转的 tabBar 页面的路径（需在 app.json 的 字段定义的页面），路径后不能带参数
successFunction否接口调用成功的回调函数
failFunction否接口调用失败的回调函数
completeFunction否接口调用结束的回调函数（调用成功、失败都会执行）
示例代码：
{ "tabBar": { "list": [{ "pagePath": "index", "text": "首页" },{ "pagePath": "other", "text": "其他" }] }}wx.switchTab({ url: '/index'})




wx.scanCode(OBJECT)

调起客户端扫码界面，扫码成功后返回对应的结果
Object 参数说明：
[tr]参数类型必填说明[/tr]
successFunction否接口调用成功的回调函数，返回内容详见返回参数说明。
failFunction否接口调用失败的回调函数
completeFunction否接口调用结束的回调函数（调用成功、失败都会执行）
success返回参数说明：
[tr]参数说明[/tr]
result码的内容
示例代码：
wx.scanCode({ success: (res) => { console.log(res) }})




onShareAppMessage

在 Page 中定义 onShareAppMessage 函数，设置该页面的分享信息。
自定义分享字段
[tr]字段说明默认值[/tr]
title分享标题当前小程序名称
desc分享描述当前小程序名称
path分享路径当前页面 path ，必须是以 / 开头的完整路径
示例代码：
Page({ onShareAppMessage: function () { return { title: '自定义分享标题', desc: '自定义分享描述', path: '/page/user?id=123' } }})




wx.showToast(OBJECT)

显示消息提示框
OBJECT参数说明：
[tr]参数类型必填说明[/tr]
titleString是提示的内容
iconString否图标，只支持"success"、"loading"
durationNumber否提示的延迟时间，单位毫秒，默认：1500, 最大为10000
maskBoolean否是否显示透明蒙层，防止触摸穿透，默认：false
successFunction否接口调用成功的回调函数
failFunction否接口调用失败的回调函数
completeFunction否接口调用结束的回调函数（调用成功、失败都会执行）
示例代码：
wx.showToast({ title: '成功', icon: 'success', duration: 2000})


onShareAppMessage

在 Page 中定义 onShareAppMessage 函数，设置该页面的分享信息。
自定义分享字段
[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]
canvasIdString画布表示，传入定义在 <canvas/> 的 canvas-id



新增组件：


audioContext

audioContext 通过 audioId 跟一个 <audio/> 组件绑定，通过它可以操作对应的 <audio/> 组件。
audioContext 对象的方法列表：
[tr]方法参数说明[/tr]
setSrcsrc音频的地址
play无播放
pause无暂停
seekposition跳转到指定位置，单位 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) }})

微信小程序0.11.122100 版本更新详情介绍

picker-view

嵌入页面的滚动选择器
[tr]属性名类型默认值说明[/tr]
valueNumber Array
数组中的数字依次表示 picker-view 内的 picker-view-colume 选择的第几项（下标从 0 开始），数字大于 picker-view-column 可选项长度时，选择最后一项。
indicator-styleString
设置选择器中间选中框的样式
bindchangeEventHandle
当滚动选择，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增强


createCircularGradient

定义

创建一个圆形的渐变颜色。
Tip: 起点在圆心，终点在圆环。
Tip: 需要使用 addColorStop() 来指定渐变点，至少要两个。



参数

[tr]参数类型定义[/tr]
xNumber圆心的x坐标
yNumber圆心的y坐标
rNumber圆的半径



例子

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()

微信小程序0.11.122100 版本更新详情介绍


createLinearGradient

定义

创建一个线性的渐变颜色。
Tip: 需要使用 addColorStop() 来指定渐变点，至少要两个。



参数

[tr]参数类型定义[/tr]
x0Number起点的x坐标
y0Number起点的y坐标
x1Number终点的x坐标
y1Number终点的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()
微信小程序0.11.122100 版本更新详情介绍
strokeRect

定义

画一个矩形(非填充)。
Tip: 用 setFillStroke() 设置矩形线条的颜色，如果没设置默认是黑色。



参数

[tr]参数类型范围说明[/tr]
xNumber
矩形路径左上角的x坐标
yNumber
矩形路径左上角的y坐标
widthNumber
矩形路径的宽度
heightNumber
矩形路径的高度



例子

const ctx = wx.createCanvasContext('myCanvas')ctx.setStrokeStyle('red')ctx.strokeRect(10, 10, 150, 75)ctx.draw()

微信小程序0.11.122100 版本更新详情介绍
fillRect

定义

填充一个矩形。
Tip: 用 setFillStyle() 设置矩形的填充色，如果没设置默认是黑色。



参数

[tr]参数类型说明[/tr]
xNumber矩形路径左上角的x坐标
yNumber矩形路径左上角的y坐标
widthNumber矩形路径的宽度
heightNumber矩形路径的高度



例子

const ctx = wx.createCanvasContext('myCanvas')ctx.setFillStyle('red')ctx.fillRect(10, 10, 150, 75)ctx.draw()

微信小程序0.11.122100 版本更新详情介绍


arc

定义

画一条弧线。
Tip: 创建一个圆可以用 arc() 方法指定其实弧度为0，终止弧度为 2 * Math.PI。
Tip: 用 stroke() 或者 fill() 方法来在 canvas 中画弧线。



参数

[tr]参数类型说明[/tr]
xNumber圆的x坐标
yNumber圆的y坐标
rNumber圆的半径
sAngleNumber起始弧度，单位弧度（在3点钟方向）
eAngleNumber终止弧度
counterclockwiseBoolean可选。指定弧度的方向是逆时针还是顺时针。默认是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)的三个关键坐标如下：微信小程序0.11.122100 版本更新详情介绍




在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 版本更新详情介绍的详细内容，更多请关注php中文网其它相关文章！


小程序是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或者搜一下即可打开应用。

……

标签:微信小程序0.11.122100 版本更新详情介绍
相关阅读