|
导读微信小程序，简称小程序，英文名Mini Program，是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用。小程序是一种不用下载就能使用的应用，也是一... 微信小程序，简称小程序，英文名Mini Program，是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用。小程序是一种不用下载就能使用的应用，也是一项门槛非常高的创新，经过将近两年的发展，已经构造了新的小程序开发环境和开发者生态。 0.11.122100 更新概述
基础库更新
开发者工具基础功能
wx.switchTab(OBJECT) 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面 OBJECT 参数说明： [tr]参数类型必填说明[/tr]
{ "tabBar": { "list": [{ "pagePath": "index", "text": "首页" },{ "pagePath": "other", "text": "其他" }] }}wx.switchTab({ url: '/index'}) wx.scanCode(OBJECT) 调起客户端扫码界面，扫码成功后返回对应的结果 Object 参数说明： [tr]参数类型必填说明[/tr]
[tr]参数说明[/tr]
wx.scanCode({ success: (res) => { console.log(res) }}) onShareAppMessage 在 Page 中定义 onShareAppMessage 函数，设置该页面的分享信息。
[tr]字段说明默认值[/tr]
Page({ onShareAppMessage: function () { return { title: '自定义分享标题', desc: '自定义分享描述', path: '/page/user?id=123' } }}) wx.showToast(OBJECT) 显示消息提示框 OBJECT参数说明： [tr]参数类型必填说明[/tr]
wx.showToast({ title: '成功', icon: 'success', duration: 2000}) onShareAppMessage 在 Page 中定义 onShareAppMessage 函数，设置该页面的分享信息。
[tr]字段说明默认值[/tr]
Page({ onShareAppMessage: function () { return { title: '自定义分享标题', desc: '自定义分享描述', path: '/page/user?id=123' } }}) wx.createCanvasContext(canvasId) 定义 创建 canvas 绘图上下文（指定 canvasId） Tip: 需要指定 canvasId，该绘图上下文只作用于对应的 <canvas/> 参数 [tr]参数类型说明[/tr]
新增组件： audioContext audioContext 通过 audioId 跟一个 <audio/> 组件绑定，通过它可以操作对应的 <audio/> 组件。 audioContext 对象的方法列表： [tr]方法参数说明[/tr]
<!-- 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]
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]
例子 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]
例子 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]
例子 const ctx = wx.createCanvasContext('myCanvas')ctx.setStrokeStyle('red')ctx.strokeRect(10, 10, 150, 75)ctx.draw()  fillRect 定义 填充一个矩形。 Tip: 用 setFillStyle() 设置矩形的填充色，如果没设置默认是黑色。 参数 [tr]参数类型说明[/tr]
例子 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]
例子 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)的三个关键坐标如下： 
在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中文网其它相关文章！ 小程序是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或者搜一下即可打开应用。 |
温馨提示：喜欢本站的话，请收藏一下本站！
本站发布的Win7纯净版系统、Win10纯净版和XP纯净版系统仅为个人学习测试使用，请在下载后24小时内删除，不得用于任何商业用途，否则后果自负，请支持购买微软正版软件！
本站所有资源全部来自于网络资源,如侵犯到您的权益,请及时通知我们(peng896066052@126.com),我们会及时处理.
Copyright © 2018-2020 雨林木风下载站
