微信小程序填坑之路（四）--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的就不寫了。