微信小程序填坑之路（四）--2016.12.21 更新

今天又一次更新，继续填坑了。。

更新概述

• 新增分享、模板消息、客服消息、扫一扫、带参数二维码（当前仅限开发者和体验者使用）等功能
• 新增 4 个新 API， 2个新组件
• 拓展了 10 个组件属性，新增 6 个组件事件
• 修复数十个 API 以及组件 bug，优化部分交互体验
• 开发者工具增加新 API 及组件的调试支持
• 开发者工具增加微信支付的调试支持

具体以下：

1。新增 API wx.switchTab。跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。

wx.switchTab({

      url: '/pages/index/index',
      success: function(res){},
      fail: function() {},
      complete: function() {}
    })

2.新增 API wx.scanCode.调起客户端扫描界面，扫描成功后返回对应的结果。

wx.scanCode({
    success: function(res){
     console.log("扫描了"+res)
    },
    fail: function() {}
    complete: function() {}
  })

3.新增 API wx.createMapContext。创建map的上下文。

Page({

  onReady: function (e){

// 使用 wx.createMapContext 获取 map 上下文 

    this.mapCtx = wx.createMapContext('myMap')

  },

//获取当前地图中心的经纬度，返回的事gcj02座标系，可以用于 wx.openLocation()

  getCenterLocation: function (){

    this.mapCtx.getCenterLocation({

      success: function(res){

        console.log(res.longitude)

        console.log(res.latitude)

      }

    })

  },

//将地图中心移动到当前定位点，需要配合map组建的show-location使用

moveToLocation: function (){

    this.mapCtx.moveToLocation()

  }

})

4.新增 API wx.createCanvasContext .

创建 canvas 绘图上下文（指定 canvasId）

Tip: 需要指定 canvasId，该绘图上下文只作用于对应的 <canvas/>

5.新增 APIwx.showToast 调用参数 mask(是否显示透明蒙层，防止触摸穿透，默认是false),实际效果就是当mask为true的时候页面无法滑动无法进行任何操作。

wx.showToast({
  title: '成功',
  icon: 'success',
  duration: 2000,
  mask:false//ture
})

6.新增 页面方法 Page.onShareAppMessage 用于自定义分享内容。这就是能分享的方法。

Page({

  onShareAppMessage: function (){

    return {

      title: '这是我的第一个分享',
      desc: '真的能分享？',
      path: '/page/myinfo?id=123'

    }

  }

})

7.新增 框架方法 App.onError。增加了APP()生命周期的方法。现在为 onLaunch ，onShow， onHide， onError。

8.新增 页面配置disabelScroll 。//具体怎么用 还没试出来什么样，后面发现的时候在说明

disableScroll

Boolean

false

设置为 true 则页面整体不能上下滚动；只在 page.json 中有效，无法在 app.json 中设置该项

9.新增 <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>

10. 新增<contact-button/> 组件，用于显示客服会话按钮。这个可以直接跟客服连接，挺方便 也挺6666的

客服会话按钮，用于在页面上显示一个客服会话按钮，用户点击该按钮后会进入客服会话。

<contact-button 

  type="default-light" 

  size="20"

  session-from="weapp"

>

</contact-button>

11.新增<navigator/> 组件属性 openType。可选值 'navigate'、'redirect'、'switchTab'，对应于wx.navigateTo、wx.redirectTo、wx.switchTab的功能。

12.新增 <switch/> <checkbox/><radio/> 组件属性 color。终于可以自定义颜色了。实际效果是点击的颜色，就是打勾的颜色
13.新增 <video/> 组件属性 objectFit 。具体还没有试23.新增<video/> 组件事件 bindtimeupdate。播放进度变化时触发，event.detail = {currentTime: '当前播放时间'} 。触发频率应该在 250ms 一次

objectFit

String

contain

当视频大小与 video 容器大小不一致时，视频的表现形式。contain：包含，fill：填充，cover：覆盖

14.新增 <map/> 组件属性    markers polyline circles include-points controls show-location。完善了map的功能，打车定位路线什么的就好办了。

21.新增 <map/> 组件事件 bindtap bindmarkertap bindcontrolstap bindregionchange。（实际上也是对于map的功能，所以给放到前面来了）

15.新增<swiper/> 组件属性 circular 控制衔接滑动.实际效果还是很好的，原来是直接会回到第一张然后在轮播，现在这个可以接着最后一张继续播放第一张图片。
16.新增 <input/> 组件属性 cursor-spacing 。具体还没有发现有什么东东。不过我估计是光标不会挡住输入键盘。

22.新增<input/>组件事件 bindconfirm 。为了更好的操作体验，点击键盘的完成按钮时触发，event.detail = {value: value}

指定光标与键盘的距离，单位 px 。取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离。

17。新增 <textarea/> 组件属性 cursor-spacing。同16.

18。新增<picker/> 组件属性 disabled。 是否禁用 。

19.新增<view/> 组件属性 hover-class。点击状态。

hover	Boolean	false	是否启用点击态
hover-class	String	none	指定按下去的样式类。当 hover-class="none" 时，没有点击态效果
hover-start-time	Number	50	按住后多久出现点击态，单位毫秒
hover-stay-time	Number	400	手指松开后点击态保留时间，单位毫秒

20.新增 <scroll-view/> 组件属性 scroll-x, scroll-y 动态修改支持。

24.新增<canvas/> 组件事件 bindlongtap。手指长按 500ms 之后触发，触发了长按事件后进行移动不会触发屏幕的滚动

25.更新 API wx.showModal 调用参数 confirmText （确定按钮的文字，默认为"确定"，最多 4 个字符），cancelText（取消按钮的文字，默认为"取消"），最多 4 个字符 的字数限制

26.新增 <scroll-view/> 组件表现 滚动时禁止将页面滚动。

27.新增 AudioContext.setSrc()。音频的地址。


28.CanvasContext。所有的canvas将豆由js完成。

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

新的api。画一条弧线：CanvasContext.arc()，填充一个矩形：CanvasContext.fillRect()。画一个矩形(非填充)：CanvasContext.strokeRect()，创建一个线性渐变的颜色：CanvasContext.createLinearGradient()，创建一个圆形的渐变颜色。CanvasContext.createCircularGradient()

29.更新 API wx.getSystemInfo 新增 platform 返回参数（返回值有ios，android，devtools）

30.更新 API wx.downloadFile 当 HTTP 状态码为 200 或 304 的时候会返回 tmpFilePath

31.更新 API wx.navigateTo wx.redirectTo 不允许跳转到 tabbar 页面，请使用 wx.switchTab。

32.更新 <image/> 组件属性 mode 可选 widthFix 。（宽度不变，高度自动变化，保持原图宽高比不变，注意的是图片本身需要设置一个width，否则将以默认宽度（320）计算）

剩下的一些修复bug的就不写了。