微信小程式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 更新 元件屬性 mode 可選widthFix

• U 更新 元件屬性 range 增加ObjectArray 類型支援

• #U 更新 預設樣式

• U 更新CanvasContext.save() CanvasContext.restore()上下文API 儲存畫筆style

• U 更新CanvasContext.arc() 上下文API 參數調整，新增eAngle, counterclockwise，移除sweepAngle

• U優化 滑動體驗

• U 優化 在互動體驗

• U 優化 元件點擊體驗

• F 修復wx.request 在Android 上method 只能用大寫值的問題

• F 修復wx.uploadFile 在iOS 上無法設定header 的問題

• F 修復wx.getLocation type=gcj02 在iOS上不生效的問題

• F 修復wx.showToast 退出小程式後依然顯示的問題

• F 修復wx.showModal 回傳參數在Android 和iOS 不一致的問題

• F 修正wx.showModal content 太長時或title 為空時，佈局錯亂的問題

  #########F修正wx.showModal cancelText 和confirmText 為空時，沒有顯示預設值的問題############F 修正wx.showModal 期間，鍵盤彈出，無法收起鍵盤的問題###### #######F 修正wx.getImageInfo 在Android 無法取得http 連結圖片的問題###

• F 修復wx.getSystemInfo 因為tabbar 出現導致取得的螢幕高度不一致的問題

• F 修復wx.downloadFile 在Android 下載後圖片無法顯示的問題

• F 修復wx.request 沒有對請求資料正確encode 的問題

• F 修正wx.login 在iOS 中App.onLaunch沒有回呼的問題

• F 修復wx.createAnimationContext 設定transformOrigin 例外及動畫不能進行下一步的問題

• F 修復wx.navigateTo wx .redirectTo 在iOS 上，Page.onLoad 無法呼叫的問題

• F 修復catch 阻止事件的預設行為失效的問題

• #F 修復setInterval 在iOS 傳參錯誤導致頁面卡死的問題

• F 修復onReachBottom 觸發多次的問題

• F 修復 擁有文字節點後代時出錯的問題

• F 修復 hidden 屬性不生效的問題

• F 修復 label 無法生效的問題

• #F 修復 滑動到頂部或底部閃屏的問題

• F 修復 在iOS 上事件不生效的問題

• F 修復 在iOS 中被移除了聲音會繼續存在的問題

• F 修復 內嵌不會動態更新class 與style 的問題

• F 修正 disabled 時文字顏色不對的問題

• #F 修復 focus 屬性無效的問題

• F 修復 在iOS9 使用display:flex 的時候，第一次輸入不顯示的問題

• F 修復 初始值為undefined 時顯示異常的問題

• F 修復

• F 修復 聚焦前後顏色異常的問題

• # F 修復 position:fixed 定位異常的問題

• F 修復 在開啟picker 後不觸發blur 事件的問題

• F 修復 設定auto-height 時高度變化的問題

• F 修復 銷毀異常的問題

• F 修復 在Android 全螢幕按鈕點擊兩次才能生效的問題

• F 修復 在在多個頁面中使用相同id 衝突的問題

• F 修復 drawImage 無法正常顯示的問題

• F 修復 在bindload 事件裡面setData 會出現死循環的問題

• F 修復 scroll-into-view 失效的問題

• F 修復

  submit 取不到input 的內容的問題

• D 即將移除 redirect 屬性

• D 即將移除wx.createContext 介面

• D 即將移除 auto-focus 屬性，直接使用focus屬性即可

• D 即將移除 covers 屬性
  

開發者工具基礎功能

• A 新增wx.switchTab 的偵錯支援

• A 新增wx.startRecord wx.stopRecord wx.playVoice wx. pauseVoice wx.stopVoice API 偵錯支援

• A 新增微信支付偵錯支援

• ##A 新增二維碼掃碼偵錯支援

• A 新增app.json 重複定義頁面檔案導致提交預覽錯誤的提示

• A 新增模擬器載入圖片網路錯誤的提示訊息

• A 新增編譯時候設定初始化頁面以及參數的功能

• A 新增提交預覽時候設定初始化頁面以及參數的功能

• F 優化appdata panel 分頁面查看數據，支援動態更新以及code 模式顯示

• F 修復wx.getBackgroundAudioPlayerState 在沒有音樂播放的時候無回傳的問題

• F 修復wx.getBackgroundAudioPlayerState 取得status 不正確的問題

• F 修正wxml panel 某些情況下白屏的問題

• F 修復wxml panel 屬性無法複製，並且複製帶有回車的問題

• F 修復wxml panel 單一文字節點展示沒有對齊的問題

• F 修復app.json 中tabbar 的position 設定為top 時模擬器顯示錯誤的問題

##F 修復devtools 和編輯器中點擊外部連結錯誤的問題
F 修復wx.requst 因為快取無法發送請求的問題

以下是更新詳情：


wx.switchTab(OBJECT)

跳到tabBar 頁面，並關閉其他所有非tabBar 頁面
OBJECT 參數說明：
[tr]參數類型必填說明[/tr]##String是#需要跳轉的tabBar 頁面的路徑（需在app.json 的  欄位定義的頁面），路徑後不能帶參數successFunction否介面呼叫成功的回呼函數failFunction否介面呼叫失敗的回呼函數completeFunction否介面呼叫結束的回呼函數（呼叫成功、失敗都會執行）範例程式碼：

url

{ "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 函數，設定該頁面的分享資訊。



只有定義了此事件處理函數，右上角選單才會顯示「分享」按鈕

• 使用者點擊分享按鈕的時候會調用

• 此事件需要return 一個Object，用於自定以分享內容

• 
  自訂分享欄位

  [tr]欄位說明預設值[/tr]

title分享標題目前小程式名稱分享描述分享路徑Page({ onShareAppMessage: function () { return { title: '自訂分享標題', desc: '自訂分享描述', path: '/page/user?id=123' } }})

		##desc
目前小程式名稱		path
目前頁面path ，必須是以/ 開頭的完整路徑		範例程式碼：

#wx.showToast(OBJECT)

顯示訊息提示框
OBJECT參數說明：
[tr]參數類型必填說明[/tr]



#title##String是提示的內容iconString#圖標，只支援"success"、 "loading"durationNumber#否提示的延遲時間，單位毫秒，預設：1500, 最大為10000maskBoolean否是否顯示透明遮罩，防止觸控穿透，預設：falsesuccessFunction否介面呼叫成功的回呼函數fail Function否介面呼叫失敗的回呼函數#completeFunction#否介面呼叫結束的回呼函數（呼叫成功、失敗都會執行）#範例程式碼：onShareAppMessage

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

在Page 中定義onShareAppMessage 函數，設定該頁面的分享資訊。



只有定義了此事件處理函數，右上角選單才會顯示「分享」按鈕

• 使用者點擊分享按鈕的時候會調用

• 此事件需要return 一個Object，用於自定以分享內容

• 自訂分享欄位

  [tr]欄位說明預設值[/tr]
  

title
分享標題目前小程式名稱目前小程式名稱目前頁面path ，必須是以/ 開頭的完整路徑

##desc

分享描述

path

分享路徑

範例程式碼：
Page({ onShareAppMessage: function () { return { title: '自訂分享標題', desc: '自訂分享描述', path: '/page/user?id=123' } }} )




wx.createCanvasContext(canvasId)

定義

建立canvas 繪圖上下文（指定canvasId）
Tip: 需要指定canvasId，此繪圖上下文只作用於對應的



#參數

[tr]參數型別說明[/tr]

#canvasId

String

畫布表示，傳入定義在 的canvas-id

#新增元件：


audioContext

#audioContext 透過audioId 跟一個 元件綁定，透過它可以操作對應的 組件。
audioContext 物件的方法清單：
[tr]方法參數說明[/tr]##src音訊的位址play無播放pause#無暫停seekposition#跳到指定位置，單位s範例程式碼：

#setSrc

播放暫停設定目前播放時間為14秒回到開頭// audio.jsPage({ onReady: function (e) { / / 使用wx.createAudioContext 取得audio 上下文context this.audioCtx = wx.createAudioContext('myAudio') this.audioCtx.setSrc('http://ws.stream.qqmusic.qq.com/M500001VfvsJ21streamxFffb. 7&uin= 346897220& 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) }})







[tr]屬性名稱類型預設值說明[/tr]Number Array陣列中的數字依序表示picker-view 內的picker-view-colume 選擇的第幾項（下標從0 開始），數字大於picker-view-column 可選項長度時，選擇最後一項。 String#設定選擇器中間選取框的樣式EventHandle

picker-view	嵌入頁面的捲動選擇器		value
			indicator-style
			bindchange

#########當捲動選擇，value 改變時觸發change 事件，event.detail = {value: value} ；value為數組，表示picker-view 內的picker-view-column 目前選擇的是第幾項（下標從0 開始）############注意：其中只可放置元件，其他節點不會顯示。


picker-view-column

僅可放置於中，其孩子節點的高度會自動設定成與picker-view的選取框的高度一致
範例程式碼：
{{year}}年{{month}}月{{day}}日 {{item}}年 {{item}}月 {{item}}日 -view>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]##Number圓心的x座標yNumber圓心的y座標## r

x
Number	圓的半徑

#範例

const ctx = wx. createCanvasContext('myCanvas')// Create circular gradientconst grd = ctx.createCircularGradient(75, 50, 50)grd.addColorStop(0, 'red')grd.地址(grd)ctx.fillRect(10, 10, 150, 80)ctx.draw()




createLinearGradient





createLinearGradient



#建立一個線性的漸層顏色。
Tip: 需要使用 addColorStop() 來指定漸層點，至少要兩個。

參數#NumberNumber# #x1Number終點的x座標#y1Number#終點的y座標

[tr]參數類型定義[/tr]		x0
起點的x座標		y0
起點的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座標矩形路徑左上角的y座標矩形路徑的寬度矩形路徑的高度

	##x	#Number
	#y	Number
	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]##Number矩形路徑左上角的x座標yNumber矩形路徑左上角的y座標#widthNumber#矩形路徑的寬度heightNumber矩形路徑的高度

x

範例

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]
xy rsAngleeAngle##counterclockwiseBoolean可選。指定弧度的方向是逆時針還是順時針。預設是false，即順時針。

##Number	圓的x座標
Number	圓的y座標
Number	圓的半徑
Number	起始弧度，單位弧度（在3點鐘方向）
Number	終止弧度

範例

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 版本更新詳情介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！