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

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 新增 组件

• A 新增 组件，用于显示客服会话按钮

• A 新增 组件属性 openType

• A 新增 组件属性 color

• A 新增 组件属性 objectFit

• A 新增 组件属性 markers polyline circles include-points controls show-location

• A 新增 组件属性 circular 控制衔接滑动

• A 新增 组件属性 cursor-spacing

• A 新增 组件属性 cursor-spacing

• A 新增 组件属性 disabled

• A 新增 组件属性 hover-class

• A 新增 组件属性 scroll-x, scroll-y 动态修改支持

• A 新增 组件事件 bindtap bindmarkertap bindcontrolstap bindregionchange

• A 新增 组件事件 bindconfirm

• A 新增 组件事件 bindtimeupdate

• A 新增 组件事件 bindconfirm

• A 新增 组件事件 bindinput

• A 新增 组件事件 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 新增 组件表现 滚动时禁止将页面滚动

• 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 更新 组件属性 ></> <><>></> <><>></> <><>></> <><>></> <><>></> <><>></> <><>></> <><>></> <><>></> <><>></> <><>></> <><>></> <><>></> <><>></> <><>></> <><>></> <><>></> <><>></> <><>></> <><>></> <><>></> <><>></> <><>></> <><>></> <><>></> <><>></> <><>> ></> <><>></> <><>></> <><>></> <><>></> <><>></> <><>></> <><>></> <><>></> <><>></> <><>></> <><>></> <><>></> <><>></> <><>></> <><>></> <><>></> <><>></> <><>></> <><>> 在 ></> <><>></> <> <>> > <><>></> <><>></> <><>></> <><>></></> </> <> <>开发者工具基础功能 <> <> <> <><>></> <><>></> <><>></> <><>></> <><>></> <><>></> <><>></> <><>></> <><>></> <><>></> <><>></> <><>></> <><>></> <><>></> <><>></> <><>></> <><>></></> </>以下是更新详情： <> <> <>> <>跳转到 >>[> <> <> <>> <>> <>是</> <>需要跳转的 > </> <> <>> <>> <>否</> <>接口调用成功的回调函数</> </> <> <>> <>> <>否</> <>接口调用失败的回调函数</> </> <> <>> <>> <>否</> <>接口调用结束的回调函数（调用成功、失败都会执行）</> </> </> </>示例代码： <>{ "> <> <> <> <>> <>调起客户端扫码界面，扫码成功后返回对应的结果 <>>[> <> <> <>> <>> <>否</> <>接口调用成功的回调函数，返回内容详见返回参数说明。</> </> <> <>> <>> <>否</> <>接口调用失败的回调函数</> </> <> <>> <>> <>否</> <>接口调用结束的回调函数（调用成功、失败都会执行）</> </> </> </>>[> <> <> <>> <>码的内容</> </> </> </>示例代码： <>> { > <> <> <> <>> <>在 > <> <><>只有定义了此事件处理函数，右上角菜单才会显示“分享”按钮</></> <><>用户点击分享按钮的时候会调用</></> <><>此事件需要 ></></> </>自定义分享字段 <>[> <> <> <>> <>分享标题</> <>当前小程序名称</> </> <> <>> <>分享描述</> <>当前小程序名称</> </> <> <>> <>分享路径</> <>当前页面 > </> </> </>示例代码： <>> <> <> <> <>> <>显示消息提示框 <>>[> <> <> <>> <>> <>是</> <>提示的内容</> </> <> <>> <>> <>否</> <>图标，只支持"> </> <> <>> <>> <>否</> <>提示的延迟时间，单位毫秒，默认：> </> <> <>> <>> <>否</> <>是否显示透明蒙层，防止触摸穿透，默认：> </> <> <>> <>> <>否</> <>接口调用成功的回调函数</> </> <> <>> <>> <>否</> <>接口调用失败的回调函数</> </> <> <>> <>> <>否</> <>接口调用结束的回调函数（调用成功、失败都会执行）</> </> </> </>示例代码： <>> <> <>> <>在 > <> <><>只有定义了此事件处理函数，右上角菜单才会显示“分享”按钮</></> <><>用户点击分享按钮的时候会调用</></> <><>此事件需要 ></></> </>自定义分享字段 <>[> <> <> <>> <>分享标题</> <>当前小程序名称</> </> <> <>> <>分享描述</> <>当前小程序名称</> </> <> <>> <>分享路径</> <>当前页面 > </> </> </>示例代码： <>> <> <> <> <>> <>定义 <> <>创建 >> <> <> <>参数 <> <>[> <> <> <>> <>> <>画布表示，传入定义在 的 > </> </> </> <> <> <>新增组件： <> <> <>> <>>>[> <> <> <>> <>> <>音频的地址</> </> <> <>> <>无</> <>播放</> </> <> <>> <>无</> <>暂停</> </> <> <>> <>> <>跳转到指定位置，单位 > </> </> </>示例代码： <> 播放 暂停 设置当前播放时间为> <> < src xss=removed class="aligncenter">
  
  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的选中框的高度一致
  示例代码：
  {{year}}年{{month}}月{{day}}日 {{item}}年 {{item}}月 {{item}}日 const date = new Date()const years = []const months = []const days = []for (let i = 1990; i 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上画图
  
  所有在 中的画图必须用 JavaScript 完成：
  WXML：（我们在接下来的例子中如无特殊声明都会用这个 WXML 为模板，不再重复）
  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)
  
  
  第三步：画图
  
  告诉 组件你要将刚刚的描述绘制上去：
  ctx.draw()
  
  
  

  以上就是微信小程序0.11.122100 版本更新详情介绍的详细内容，更多请关注慧达安全导航其它相关文章！