微信小程式0.11.122100 版本更新詳情介紹-小程式開發-PHP中文網

首頁

微信小程式

小程式開發

微信小程式0.11.122100 版本更新詳情介紹

高洛峰

Mar 08, 2017 pm 05:11 PM

微信小程式

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 新增
A 新增元件屬性markers polyline circles include-points controls show-location
A 新增元件屬性 circular 控制銜接滑動
A 新增元件屬性 cursor- spacing
A 新增元件屬性 cursor-spacing</p></li> <li><p>A 新增<picker/> 元件屬性disabled</p></li> <li><p>A 新增<view/> 元件屬性hover-class</p></li> <li><p>A 新增<scroll-view/>元件屬性scroll-x, scroll-y 動態修改支援</p></li> <li><p>A 新增<map/> 元件事件bindtap bindmarkertap bindcontrolstap bindregionchange</p></li> <li><p> #A 新增<input/>元件事件bindconfirm</p></li> <li><p>#A 新增<video/> 元件事件bindtimeupdate</p></li> <li><p>#A新增<textarea/> 元件事件bindconfirm</p></li> <li><p>#A 新增<textarea/> 元件事件bindinput</p></li> <li><p>#A 新增<canvas/> 元件事件bindlongtap</p></li> <li><p>A 新增AudioContext.setSrc() 上下文API</p></li> <li><p>A 新增CanvasContext 上下文</p></li> <li><p>A 新增CanvasContext.arc() 上下文API</p></li> <li><p>#A 新增CanvasContext.fillRect() 上下文API</p></li> <li> <p>#A 新增CanvasContext.strokeRect() 上下文API</p> </li> <li><p>A 新增CanvasContext.createLinearGradient() 上下文API</p></li> <li><p>#A 新增CanvasContext.createCircularGradient() 上下文API</p></li> <li><p>#A 新增<scroll-view/> 元件表現滾動時禁止將頁面捲動</p></li> <li><p></p></li> <li><p></p></li> <li><p>U 更新API wx.getSystemInfo 新增platform 回傳參數</p></li> <li><p>#U 更新API wx.downloadFile 當HTTP 狀態碼為200 或304 的時候會回傳tmpFilePath</p></li> <li><p>U 更新API wx.showModal 呼叫參數confirmText cancelText 的字數限制</p></li> <li><p>U 更新WXML dataset 回傳支援Object 和Array</p></li> <li><p> #U 更新<image/> 元件屬性 mode 可選widthFix</p></li> <li><p>U 更新<picker/> 元件屬性 range 增加ObjectArray 類型支援</p></li> <li> <p>#U 更新<switch/> <checkbox/> <radio/> 預設樣式</p> </li> <li><p>U 更新CanvasContext.save() CanvasContext.restore()上下文API 儲存畫筆style</p></li> <li><p>U 更新CanvasContext.arc() 上下文API 參數調整，新增eAngle, counterclockwise，移除sweepAngle</p></li> <li><p>U優化<swiper/> 滑動體驗</p></li> <li><p>U 優化<swiper/> <slider/> 在<scroll-view/>互動體驗</p></li> <li><p>U 優化<navigator/> <button/> 元件點擊體驗</p></li> <li><p>F 修復wx.request 在Android 上method 只能用大寫值的問題</p></li> <li><p>F 修復wx.uploadFile 在iOS 上無法設定header 的問題</p></li> <li><p>F 修復wx.getLocation type=gcj02 在iOS上不生效的問題</p></li> <li><p>F 修復wx.showToast 退出小程式後依然顯示的問題</p></li> <li><p>F 修復wx.showModal 回傳參數在Android 和iOS 不一致的問題</p></li> <li> <p>F 修正wx.showModal content 太長時或title 為空時，佈局錯亂的問題</p>#########F修正wx.showModal cancelText 和confirmText 為空時，沒有顯示預設值的問題############F 修正wx.showModal 期間，鍵盤彈出，無法收起鍵盤的問題###### #######F 修正wx.getImageInfo 在Android 無法取得http 連結圖片的問題###</li> <li><p>F 修復wx.getSystemInfo 因為tabbar 出現導致取得的螢幕高度不一致的問題</p></li> <li><p>F 修復wx.downloadFile 在Android 下載後圖片無法顯示的問題</p></li> <li><p>F 修復wx.request 沒有對請求資料正確encode 的問題</p></li> <li><p>F 修正wx.login 在iOS 中App.onLaunch沒有回呼的問題</p></li> <li><p>F 修復wx.createAnimationContext 設定transformOrigin 例外及動畫不能進行下一步的問題</p></li> <li><p>F 修復wx.navigateTo wx .redirectTo 在iOS 上，Page.onLoad 無法呼叫的問題</p></li> <li><p>F 修復catch 阻止事件的預設行為失效的問題</p></li> <li><p>#F 修復setInterval 在iOS 傳參錯誤導致頁面卡死的問題</p></li> <li><p>F 修復onReachBottom 觸發多次的問題</p></li> <li><p>F 修復<swiper/ > 擁有文字節點後代時出錯的問題</p></li> <li><p>F 修復<switch/> <radio/> <checkbox/> <image/> < video/> hidden 屬性不生效的問題</p></li> <li><p>F 修復<checkbox/> <radio/> label 無法生效的問題</p></li> <li><p>#F 修復<scroll-view/> 滑動到頂部或底部閃屏的問題</p></li> <li><p>F 修復<video/> 在iOS 上事件不生效的問題</p></li> <li><p>F 修復<video/> 在iOS 中被移除了聲音會繼續存在的問題</p></li> <li><p>F 修復<text/ > 內嵌不會動態更新class 與style 的問題</p></li> <li><p>F 修正<button/> disabled 時文字顏色不對的問題</p></li> <li><p>#F 修復<input/> focus 屬性無效的問題</p></li> <li><p>F 修復<input/> 在iOS9 使用display:flex 的時候，第一次輸入不顯示的問題</p></li> <li><p>F 修復<input/> 初始值為undefined 時顯示異常的問題</p></li> <li><p>F 修復<input/> ; placeholder 重影的問題</p></li> <li><p>F 修復<input/> <textare/> 聚焦前後顏色異常的問題</p></li> <li><p># F 修復<textarea/> position:fixed 定位異常的問題</p></li> <li><p>F 修復<textarea/> 在開啟picker 後不觸發blur 事件的問題</p></li> <li><p>F 修復<textarea/> 設定auto-height 時高度變化的問題</p></li> <li><p>F 修復<textarea/> 銷毀異常的問題</p></li> <li><p>F 修復<video/> 在Android 全螢幕按鈕點擊兩次才能生效的問題</p></li> <li><p>F 修復<audio/> 在在多個頁面中使用相同id 衝突的問題</p></li> <li><p>F 修復<canvas/> drawImage 無法正常顯示的問題</p></li> <li><p>F 修復<image/> 在bindload 事件裡面setData 會出現死循環的問題</p></li> <li> <p>F 修復<scroll-view/> scroll-into-view 失效的問題</p> </li> <li><p>F 修復<form/> submit 取不到input 的內容的問題</p></li> <li><p>D 即將移除<navigator/> redirect 屬性</p></li> <li><p>D 即將移除wx.createContext 介面</p></li> <li><p>D 即將移除<input/> auto-focus 屬性，直接使用focus屬性即可</p></li> <li><p>D 即將移除<map /> covers 屬性<br></p></li> </ul> <br><br>開發者工具基礎功能<br><br><ul class="litype_1 list-paddingleft-2"> <li><p>A 新增wx.switchTab 的偵錯支援</p></li> <li><p>A 新增wx.startRecord wx.stopRecord wx.playVoice wx. pauseVoice wx.stopVoice API 偵錯支援</p></li> <li><p>A 新增微信支付偵錯支援</p></li> <li>##A 新增二維碼掃碼偵錯支援<p></p> </li> <li>A 新增app.json 重複定義頁面檔案導致提交預覽錯誤的提示<p></p> </li> <li>A 新增模擬器載入圖片網路錯誤的提示訊息<p></p> </li> <li>A 新增編譯時候設定初始化頁面以及參數的功能<p></p> </li> <li>A 新增提交預覽時候設定初始化頁面以及參數的功能<p></p> </li> <li>F 優化appdata panel 分頁面查看數據，支援動態更新以及code 模式顯示<p></p> </li> <li>F 修復wx.getBackgroundAudioPlayerState 在沒有音樂播放的時候無回傳的問題<p></p> </li> <li>F 修復wx.getBackgroundAudioPlayerState 取得status 不正確的問題<p></p> </li> <li>F 修正wxml panel 某些情況下白屏的問題<p></p> </li> <li>F 修復wxml panel 屬性無法複製，並且複製帶有回車的問題<p></p> </li> <li>F 修復wxml panel 單一文字節點展示沒有對齊的問題<p></p> </li> <li>F 修復app.json 中tabbar 的position 設定為top 時模擬器顯示錯誤的問題<p></p> </li>##F 修復devtools 和編輯器中點擊外部連結錯誤的問題<li><p></p></li>F 修復wx.requst 因為快取無法發送請求的問題<li><p></p></li> </ul>以下是更新詳情：<br><br><br>wx.switchTab(OBJECT)<br><br>跳到tabBar 頁面，並關閉其他所有非tabBar 頁面<br>OBJECT 參數說明：<br>[tr]參數類型必填說明[/tr]<table class="t_table"> <tbody> <tr class="firstRow"> <td>url</td>##String<td></td>是<td></td>#需要跳轉的tabBar 頁面的路徑（需在app.json 的欄位定義的頁面），路徑後不能帶參數<td></td> </tr> <tr>success<td></td>Function<td></td>否<td></td>介面呼叫成功的回呼函數<td></td> </tr> <tr>fail<td></td>Function<td></td>否<td></td>介面呼叫失敗的回呼函數<td></td> </tr> <tr>complete<td></td>Function<td></td>否<td></td>介面呼叫結束的回呼函數（呼叫成功、失敗都會執行）<td></td> </tr> </tbody>範例程式碼：</table>{ "tabBar": { "list": [{ "pagePath": "index", "text": "首頁" },{ " pagePath": "other", "text": "其他" }] }}wx.switchTab({ url: '/index'})<br><br><br><br><br>wx.scanCode( OBJECT)<br><br>調起客戶端掃碼介面，掃碼成功後傳回對應的結果<br>Object 參數說明：<br>[tr]參數類型必填說明[/tr]<br><table class="t_table"> <tbody> <tr class="firstRow">success<td></td>Function<td></td>否<td></td>介面呼叫成功的回呼函數，傳回內容詳見傳回參數說明。 <td></td> </tr> <tr>fail<td></td>Function<td></td>否<td></td>介面呼叫失敗的回呼函數<td></td> </tr> <tr>complete<td></td>Function<td></td>否<td></td>介面呼叫結束的回呼函數（呼叫成功、失敗都會執行）<td></td> </tr> </tbody>success返回參數說明：</table>[tr]參數說明[/tr]<br><table class="t_table"> <tbody> <tr class="firstRow">result<td></td>碼的內容<td></td> </tr>##範例程式碼：</tbody>wx.scanCode({ success: (res) => { console.log(res) }})</table> <br><br><br>##onShareAppMessage<br><br>在Page 中定義onShareAppMessage 函數，設定該頁面的分享資訊。 <br><br><br><br>只有定義了此事件處理函數，右上角選單才會顯示「分享」按鈕<ul class=" list-paddingleft-2"> <li> <p></p>使用者點擊分享按鈕的時候會調用</li> <li> <p></p>此事件需要return 一個Object，用於自定以分享內容</li> <li> <p><br>自訂分享欄位</p>[tr]欄位說明預設值[/tr]</li> </ul> <br><table class="t_table">title<tbody> <tr class="firstRow">分享標題<td></td>目前小程式名稱<td></td> <td>##desc </td> </tr>分享描述<tr> <td>目前小程式名稱</td> <td></td> <td>path</td> </tr>分享路徑<tr> <td>目前頁面path ，必須是以/ 開頭的完整路徑</td> <td></td> <td>範例程式碼：</td>Page({ onShareAppMessage: function () { return { title: '自訂分享標題', desc: '自訂分享描述', path: '/page/user?id=123' } }})</tr> </tbody> </table> <br><br>#wx.showToast(OBJECT)<br><br>顯示訊息提示框<br>OBJECT參數說明：<br>[tr]參數類型必填說明[/tr]<br><br><br><br>#title<table class="t_table">##String<tbody> <tr class="firstRow">是<td></td>提示的內容<td></td> <td></td>icon<td></td>String</tr> <tr> <td></td>#圖標，只支援"success"、 "loading"<td></td> <td></td>duration<td></td>Number</tr> <tr>#否<td></td>提示的延遲時間，單位毫秒，預設：1500, 最大為10000<td></td> <td></td>mask<td></td>Boolean</tr> <tr>否<td></td>是否顯示透明遮罩，防止觸控穿透，預設：false<td></td> <td></td>success<td></td>Function</tr> <tr>否<td></td>介面呼叫成功的回呼函數<td></td> <td></td>fail <td></td>Function</tr> <tr>否<td></td>介面呼叫失敗的回呼函數<td></td> <td></td>#complete<td></td>Function</tr> <tr>#否<td></td>介面呼叫結束的回呼函數（呼叫成功、失敗都會執行）<td></td> <td></td>#範例程式碼：<td>wx.showToast({ title: '成功', icon: 'success', duration: 2000})</td> </tr> </tbody>onShareAppMessage</table> <br>在Page 中定義onShareAppMessage 函數，設定該頁面的分享資訊。 <br><br><br><br>只有定義了此事件處理函數，右上角選單才會顯示「分享」按鈕<br><br><ul class=" list-paddingleft-2"> <li>使用者點擊分享按鈕的時候會調用<p></p> </li> <li>此事件需要return 一個Object，用於自定以分享內容<p></p> </li> <li>自訂分享欄位<p>[tr]欄位說明預設值[/tr]<br></p> </li> </ul>title<br><table class="t_table">分享標題<tbody> <tr class="firstRow">目前小程式名稱<td></td> <td>##desc </td> <td>分享描述</td> </tr>目前小程式名稱<tr> <td></td> <td>path</td> <td>分享路徑</td> </tr>目前頁面path ，必須是以/ 開頭的完整路徑<tr> <td></td> <td>範例程式碼：<br>Page({ onShareAppMessage: function () { return { title: '自訂分享標題', desc: '自訂分享描述', path: '/page/user?id=123' } }} )<br><br><br><br><br>wx.createCanvasContext(canvasId)<br><br>定義<br><br>建立canvas 繪圖上下文（指定canvasId）<br>Tip: 需要指定canvasId，此繪圖上下文只作用於對應的<canvas/><br><br><br><br>#參數<br><br>[tr]參數型別說明[/tr]<table class="t_table"><tbody> <tr class="firstRow"> <td>#canvasId</td> <td>String</td> <td>畫布表示，傳入定義在<canvas/> 的canvas-id</td> </tr> </tbody></table> <br><br><br>#新增元件：<br><br><br>audioContext<br><br>#audioContext 透過audioId 跟一個<audio/> 元件綁定，透過它可以操作對應的<audio/> 組件。 <br>audioContext 物件的方法清單：<br>[tr]方法參數說明[/tr]<table class="t_table"> <tbody> <tr class="firstRow"> <td>#setSrc</td>##src<td></td>音訊的位址<td></td> </tr> <tr>play<td></td>無<td></td>播放<td></td> </tr> <tr>pause<td></td>#無<td></td>暫停<td></td> </tr> <tr>seek<td></td>position<td></td>#跳到指定位置，單位s<td></td> </tr> </tbody>範例程式碼：</table><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/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) }})<br><br><br><img src="/static/imghw/default1.png" data-src="https://img.php.cn//upload/image/189/517/243/1488964166491492.png" class="lazy" title="微信小程序0.11.122100 版本更新详情介绍" alt="微信小程序0.11.122100 版本更新详情介绍" style="max-width:90%" style="max-width:90%"><br><br><br><br><br><table class="t_table"><tbody> <tr class="firstRow"> <td>picker-view</td> <td>嵌入頁面的捲動選擇器</td>[tr]屬性名稱類型預設值說明[/tr]<td><br></td> <td>value</td> </tr>Number Array<tr> <td></td> <td></td>陣列中的數字依序表示picker-view 內的picker-view-colume 選擇的第幾項（下標從0 開始），數字大於picker-view-column 可選項長度時，選擇最後一項。 <td><br></td> <td>indicator-style</td> </tr>String<tr> <td></td> <td></td>#設定選擇器中間選取框的樣式<td><br></td> <td>bindchange</td> </tr>EventHandle</tbody></table>#########當捲動選擇，value 改變時觸發change 事件，event.detail = {value: value} ；value為數組，表示picker-view 內的picker-view-column 目前選擇的是第幾項（下標從0 開始）############注意：其中只可放置<picker-view-column/>元件，其他節點不會顯示。 <br><br><br>picker-view-column<br><br>僅可放置於<picker-view />中，其孩子節點的高度會自動設定成與picker-view的選取框的高度一致<br>範例程式碼：<br><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]] }) }})<br>Canvas增強<br><ul class="litype_1 list-paddingleft-2"> <li><p>A 新增CanvasContext 上下文</p></li> <li><p>#A 新增CanvasContext.arc() 上下文API</p></li> <li><p>#A 新增CanvasContext.fillRect() 上下文API</p></li> <li><p> #A 新增CanvasContext.strokeRect() 上下文API</p></li> <li><p>A 新增CanvasContext.createLinearGradient() 上下文API</p></li> <li><p>#A 新增CanvasContext. createCircularGradient() 上下文API<br></p></li> </ul> <br><br>#createCircularGradient<br><br>定義<br><br>建立一個圓形的漸層顏色。 <br>Tip: 起點在圓心，終點在圓環。 <br>Tip: 需要使用 addColorStop() 來指定漸層點，至少要兩個。 <br><br><br><br>參數<br><br>[tr]參數類型定義[/tr]<table class="t_table"><tbody> <tr class="firstRow"> <td>x</td>##Number<td></td>圓心的x座標<td></td> </tr> <tr>y<td></td>Number<td></td>圓心的y座標<td></td> </tr>## r<tr> <td>Number</td> <td>圓的半徑</td> <td></td> </tr> </tbody></table> <br>#範例<br><br>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()<br><br><br><br><img src="/static/imghw/default1.png" data-src="https://img.php.cn//upload/image/423/329/798/1488964146381136.png" class="lazy" title="微信小程序0.11.122100 版本更新详情介绍" alt="微信小程序0.11.122100 版本更新详情介绍" style="max-width:90%" style="max-width:90%"><br>createLinearGradient<br><br><br><br><br><br>createLinearGradient<br><br><br><br>#建立一個線性的漸層顏色。 <br>Tip: 需要使用 addColorStop() 來指定漸層點，至少要兩個。 <br><br><table class="t_table"> <tbody>參數<tr class="firstRow"> <td>[tr]參數類型定義[/tr]</td> <td></td> <td>x0</td> </tr>#Number<tr> <td>起點的x座標</td> <td></td> <td>y0</td> </tr>Number<tr> <td>起點的y座標</td> <td></td># #x1<td></td>Number</tr> <tr>終點的x座標<td></td> <td></td>#y1<td></td>Number</tr> </tbody>#終點的y座標</table> <br><br><br><br><br><br>範例<img src="/static/imghw/default1.png" data-src="https://img.php.cn//upload/image/319/264/577/1488964126768032.png" class="lazy" title="微信小程序0.11.122100 版本更新详情介绍" alt="微信小程序0.11.122100 版本更新详情介绍" style="max-width:90%" style="max-width:90%"><br>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()<br><br><br>strokeRect<br><br>定義<br><br>#畫一個矩形(非填滿)。 <br>Tip: 用 setFillStroke() 設定矩形線條的顏色，如果沒設定預設是黑色。 <br><br><br><table class="t_table">參數<tbody> <tr class="firstRow">[tr]參數類型範圍說明[/tr]<td></td> <td>##x</td> <td>#Number<br> </td> <td></td> </tr>矩形路徑左上角的x座標<tr> <td></td> <td>#y</td> <td>Number<br> </td> <td> </td> </tr>矩形路徑左上角的y座標<tr> <td></td> <td>width</td> <td>#Number<br> </td> <td></td> </tr>矩形路徑的寬度<tr> <td></td> <td>height</td> <td>Number<br> </td> <td></td> </tr>矩形路徑的高度</tbody> </table>### ###<br><br><br>範例<br><br>const ctx = wx.createCanvasContext('myCanvas')ctx.setStrokeStyle('red')ctx.strokeRect(10, 10, 150, 75)ctx.draw ()<br><br><img src="/static/imghw/default1.png" data-src="https://img.php.cn//upload/image/939/521/900/1488964112354042.png" class="lazy" title="微信小程序0.11.122100 版本更新详情介绍" alt="微信小程序0.11.122100 版本更新详情介绍" style="max-width:90%" style="max-width:90%"><br>fillRect<br><br>#定義<br><br>填入一個矩形。 <br>Tip: 用 setFillStyle() 設定矩形的填滿色，如果沒設定預設是黑色。 <br><br><br><br>參數<br><br>[tr]參數型別說明[/tr]<table class="t_table"><tbody> <tr class="firstRow"> <td>x</td>##Number<td></td>矩形路徑左上角的x座標<td></td> </tr> <tr>y<td></td>Number<td></td>矩形路徑左上角的y座標<td></td> </tr> <tr>#width<td></td>Number<td></td>#矩形路徑的寬度<td></td> </tr> <tr>height<td></td>Number<td></td>矩形路徑的高度<td></td> </tr> </tbody></table> <br><br>範例<br><br>const ctx = wx.createCanvasContext('myCanvas')ctx.setFillStyle('red' )ctx.fillRect(10, 10, 150, 75)ctx.draw()<br><br><br><img src="/static/imghw/default1.png" data-src="https://img.php.cn//upload/image/656/510/394/1488964097771237.png" class="lazy" title="微信小程序0.11.122100 版本更新详情介绍" alt="微信小程序0.11.122100 版本更新详情介绍" style="max-width:90%" style="max-width:90%"><br><br>arc<br><br><br><br>##畫一條弧線。 <br>Tip: 建立一個圓可以用 arc() 方法指定其實弧度為0，終止弧度為 2 * Math.PI。 <br>Tip: 用 stroke() 或 fill() 方法來在 canvas 畫弧線。 <br><br><br><br>參數<br><br>[tr]參數型別說明[/tr]<br><table class="t_table"><tbody> <tr class="firstRow">x<td>##Number</td> <td>圓的x座標</td> <td></td> </tr>y<tr> <td>Number</td> <td>圓的y座標</td> <td></td> </tr> r<tr> <td>Number</td> <td>圓的半徑</td> <td></td> </tr>sAngle<tr> <td>Number</td> <td>起始弧度，單位弧度（在3點鐘方向）</td> <td></td> </tr>eAngle<tr> <td>Number</td> <td>終止弧度</td> <td></td>##counterclockwise</tr> <tr>Boolean<td></td>可選。指定弧度的方向是逆時針還是順時針。預設是false，即順時針。 <td></td> <td></td> </tr> </tbody></table>範例<br><br>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()<br>針對arc(100, 75, 50, 0, 1.5 * Math.PI)的三個關鍵座標如下：<br><br><br><img src="/static/imghw/default1.png" data-src="https://img.php.cn//upload/image/352/893/518/1488964083105591.png" class="lazy" title="微信小程序0.11.122100 版本更新详情介绍" alt="微信小程序0.11.122100 版本更新详情介绍" style="max-width:90%" style="max-width:90%"> 綠色: 圓心(100, 75)<ul class=" list-paddingleft-2"> <li> <p></p>紅色: 起始弧度(0)</li> <li> <p></p>藍色: 終止弧度(1.5 * Math.PI)</li> <li><p><br></p></li> </ul> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>#在Canvas上畫圖<br><br>所有在<canvas/> 中的畫圖必須用JavaScript 完成：<br>WXML：（我們在接下來的例子中如無特殊聲明都會用這個WXML 為模板，不再重複）<br><canvas canvas-id="myCanvas" style="border: 1px solid;"/>JS：（我們在接下來的範例中會將JS 放在onLoad 中）<br>const ctx = wx.createCanvasContext('myCanvas')ctx.setFillStyle('red')ctx.fillRect(10, 10, 150, 75)ctx. draw()<br><br><br>第一步：建立一個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()############</td> </tr> </tbody> </table><p>以上是微信小程式0.11.122100 版本更新詳情介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！</p> </div> </div> <div class="wzconShengming_sp"> <div class="bzsmdiv_sp">本網站聲明</div> <div>本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn</div> </div> </div> <ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5902227090019525" data-ad-slot="2507867629"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <div class="AI_ToolDetails_main4sR"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-5902227090019525" data-ad-slot="3653428331" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script>  <div class="phpgenera_Details_mainR3"> <div class="phpmain1_4R_readrank"> <div class="phpmain1_4R_readrank_top"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/hottools2.png" alt="" /> <h2>熱AI工具</h2> </div> <div class="phpgenera_Details_mainR3_bottom"> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/zh-tw/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411540686492.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undresser.AI Undress" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/zh-tw/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_title"> <h3>Undresser.AI Undress</h3> </a> <p>人工智慧驅動的應用程序，用於創建逼真的裸體照片</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/zh-tw/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411552797167.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="AI Clothes Remover" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/zh-tw/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_title"> <h3>AI Clothes Remover</h3> </a> <p>用於從照片中去除衣服的線上人工智慧工具。</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/zh-tw/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173410641626608.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undress AI Tool" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/zh-tw/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_title"> <h3>Undress AI Tool</h3> </a> <p>免費脫衣圖片</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/zh-tw/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411529149311.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Clothoff.io" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/zh-tw/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_title"> <h3>Clothoff.io</h3> </a> <p>AI脫衣器</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/zh-tw/ai/video-swap" title="Video Face Swap" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173414504068133.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Video Face Swap" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/zh-tw/ai/video-swap" title="Video Face Swap" class="phpmain_tab2_mids_title"> <h3>Video Face Swap</h3> </a> <p>使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！</p> </div> </div> </div> <div class="phpgenera_Details_mainR3_more"> <a href="https://www.php.cn/zh-tw/ai">顯示更多</a> </div> </div> </div> <script src="https://sw.php.cn/hezuo/cac1399ab368127f9b113b14eb3316d0.js" type="text/javascript"></script> <div class="phpgenera_Details_mainR4"> <div class="phpmain1_4R_readrank"> <div class="phpmain1_4R_readrank_top"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/hotarticle2.png" alt="" /> <h2>熱門文章</h2> </div> <div class="phpgenera_Details_mainR4_bottom"> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/zh-tw/faq/1796797907.html" title="<🎜>：種植花園 - 完整的突變指南" class="phpgenera_Details_mainR4_bottom_title"><🎜>：種植花園 - 完整的突變指南</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>3 週前</span> <span>By DDD</span> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/zh-tw/faq/1796797130.html" title="<🎜>：泡泡膠模擬器無窮大 - 如何獲取和使用皇家鑰匙" class="phpgenera_Details_mainR4_bottom_title"><🎜>：泡泡膠模擬器無窮大 - 如何獲取和使用皇家鑰匙</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>3 週前</span> <span>By 尊渡假赌尊渡假赌尊渡假赌</span> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/zh-tw/faq/1796796771.html" title="如何修復KB5055612無法在Windows 10中安裝？" class="phpgenera_Details_mainR4_bottom_title">如何修復KB5055612無法在Windows 10中安裝？</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>3 週前</span> <span>By DDD</span> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/zh-tw/faq/1796796926.html" title="北端：融合系統，解釋" class="phpgenera_Details_mainR4_bottom_title">北端：融合系統，解釋</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>3 週前</span> <span>By 尊渡假赌尊渡假赌尊渡假赌</span> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/zh-tw/faq/1796797896.html" title="Mandragora：巫婆樹的耳語 - 如何解鎖抓鉤" class="phpgenera_Details_mainR4_bottom_title">Mandragora：巫婆樹的耳語 - 如何解鎖抓鉤</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>3 週前</span> <span>By 尊渡假赌尊渡假赌尊渡假赌</span> </div> </div> </div> <div class="phpgenera_Details_mainR3_more"> <a href="https://www.php.cn/zh-tw/article.html">顯示更多</a> </div> </div> </div> <div class="phpgenera_Details_mainR3"> <div class="phpmain1_4R_readrank"> <div class="phpmain1_4R_readrank_top"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/hottools2.png" alt="" /> <h2>熱工具</h2> </div> <div class="phpgenera_Details_mainR3_bottom"> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/zh-tw/toolset/development-tools/92" title="記事本++7.3.1" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab96f0f39f7357.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="記事本++7.3.1" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/zh-tw/toolset/development-tools/92" title="記事本++7.3.1" class="phpmain_tab2_mids_title"> <h3>記事本++7.3.1</h3> </a> <p>好用且免費的程式碼編輯器</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/zh-tw/toolset/development-tools/93" title="SublimeText3漢化版" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab97a3baad9677.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="SublimeText3漢化版" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/zh-tw/toolset/development-tools/93" title="SublimeText3漢化版" class="phpmain_tab2_mids_title"> <h3>SublimeText3漢化版</h3> </a> <p>中文版，非常好用</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/zh-tw/toolset/development-tools/121" title="禪工作室 13.0.1" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab97ecd1ab2670.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="禪工作室 13.0.1" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/zh-tw/toolset/development-tools/121" title="禪工作室 13.0.1" class="phpmain_tab2_mids_title"> <h3>禪工作室 13.0.1</h3> </a> <p>強大的PHP整合開發環境</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/zh-tw/toolset/development-tools/469" title="Dreamweaver CS6" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58d0e0fc74683535.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="Dreamweaver CS6" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/zh-tw/toolset/development-tools/469" title="Dreamweaver CS6" class="phpmain_tab2_mids_title"> <h3>Dreamweaver CS6</h3> </a> <p>視覺化網頁開發工具</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/zh-tw/toolset/development-tools/500" title="SublimeText3 Mac版" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58d34035e2757995.png?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="SublimeText3 Mac版" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/zh-tw/toolset/development-tools/500" title="SublimeText3 Mac版" class="phpmain_tab2_mids_title"> <h3>SublimeText3 Mac版</h3> </a> <p>神級程式碼編輯軟體(SublimeText3)</p> </div> </div> </div> <div class="phpgenera_Details_mainR3_more"> <a href="https://www.php.cn/zh-tw/ai">顯示更多</a> </div> </div> </div> <div class="phpgenera_Details_mainR4"> <div class="phpmain1_4R_readrank"> <div class="phpmain1_4R_readrank_top"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/hotarticle2.png" alt="" /> <h2>熱門話題</h2> </div> <div class="phpgenera_Details_mainR4_bottom"> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/zh-tw/faq/java-tutorial" title="Java教學" class="phpgenera_Details_mainR4_bottom_title">Java教學</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>1664</span> </div> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>14</span> </div> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/zh-tw/faq/cakephp-tutor" title="CakePHP 教程" class="phpgenera_Details_mainR4_bottom_title">CakePHP 教程</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>1423</span> </div> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>52</span> </div> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/zh-tw/faq/laravel-tutori" title="Laravel 教程" class="phpgenera_Details_mainR4_bottom_title">Laravel 教程</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>1321</span> </div> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>25</span> </div> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/zh-tw/faq/php-tutorial" title="PHP教程" class="phpgenera_Details_mainR4_bottom_title">PHP教程</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>1269</span> </div> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>29</span> </div> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/zh-tw/faq/c-tutorial" title="C# 教程" class="phpgenera_Details_mainR4_bottom_title">C# 教程</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>1249</span> </div> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>24</span> </div> </div> </div> </div> <div class="phpgenera_Details_mainR3_more"> <a href="https://www.php.cn/zh-tw/faq/zt">顯示更多</a> </div> </div> </div> </div> </div> <div class="Article_Details_main2"> <div class="phpgenera_Details_mainL4"> <div class="phpmain1_2_top"> <a href="javascript:void(0);" class="phpmain1_2_top_title">Related knowledge<img src="/static/imghw/index2_title2.png" alt="" /></a> </div> <div class="phpgenera_Details_mainL4_info"> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/zh-tw/faq/673693.html" title="閒魚微信小程式正式上線" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/000/887/227/170757595943212.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="閒魚微信小程式正式上線" /> </a> <a href="https://www.php.cn/zh-tw/faq/673693.html" title="閒魚微信小程式正式上線" class="phphistorical_Version2_mids_title">閒魚微信小程式正式上線</a> <span class="Articlelist_txts_time">Feb 10, 2024 pm 10:39 PM</span> <p class="Articlelist_txts_p">閒魚官方微信小程式悄悄上線，在小程式中可以發布閒置與買家/賣家私訊交流、查看個人資料及訂單、搜尋物品等，有用好奇閒魚微信小程式叫什麼，現在快來看一下。閒魚微信小程式叫什麼答案：閒魚，閒置交易二手買賣估價回收。 1、在小程式中可以發布閒置、與買家/賣家私訊交流、查看個人資料及訂單、搜尋指定物品等功能;2、在小程式的頁面中有首頁、附近、發閒置、訊息、我的5項功能；3、想要使用的話必要要開通微信支付才可以購買；</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/zh-tw/faq/629820.html" title="實現微信小程式中的圖片濾鏡效果" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/000/887/227/170056213860475.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="實現微信小程式中的圖片濾鏡效果" /> </a> <a href="https://www.php.cn/zh-tw/faq/629820.html" title="實現微信小程式中的圖片濾鏡效果" class="phphistorical_Version2_mids_title">實現微信小程式中的圖片濾鏡效果</a> <span class="Articlelist_txts_time">Nov 21, 2023 pm 06:22 PM</span> <p class="Articlelist_txts_p">實現微信小程式中的圖片濾鏡效果隨著社群媒體應用程式的流行，人們越來越喜歡在照片中應用濾鏡效果，以增強照片的藝術效果和吸引力。在微信小程式中也可以實現圖片濾鏡效果，為使用者提供更多有趣和創意的照片編輯功能。本文將介紹如何在微信小程式中實現圖片濾鏡效果，並提供具體的程式碼範例。首先，我們需要在微信小程式中使用canvas元件來載入和編輯圖片。 canvas元件可以在頁面</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/zh-tw/faq/629690.html" title="實作微信小程式中的下拉式選單效果" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/000/887/227/170055022352293.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="實作微信小程式中的下拉式選單效果" /> </a> <a href="https://www.php.cn/zh-tw/faq/629690.html" title="實作微信小程式中的下拉式選單效果" class="phphistorical_Version2_mids_title">實作微信小程式中的下拉式選單效果</a> <span class="Articlelist_txts_time">Nov 21, 2023 pm 03:03 PM</span> <p class="Articlelist_txts_p">實現微信小程式中的下拉式選單效果，需要具體程式碼範例隨著行動互聯網的普及，微信小程式成為了網路開發的重要一環，越來越多的人開始關注和使用微信小程式。微信小程式的開發相比傳統的APP開發更加簡單快捷，但也需要掌握一定的開發技巧。在微信小程式的開發中，下拉式選單是一個常見的UI元件，實現了更好的使用者操作體驗。本文將詳細介紹如何在微信小程式中實現下拉式選單效果，並提供具</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/zh-tw/faq/691200.html" title="閒魚微信小程式叫什麼" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/000/465/014/170901068659339.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="閒魚微信小程式叫什麼" /> </a> <a href="https://www.php.cn/zh-tw/faq/691200.html" title="閒魚微信小程式叫什麼" class="phphistorical_Version2_mids_title">閒魚微信小程式叫什麼</a> <span class="Articlelist_txts_time">Feb 27, 2024 pm 01:11 PM</span> <p class="Articlelist_txts_p">閒魚官方微信小程式已經悄悄上線，它為用戶提供了一個便捷的平台，讓你可以輕鬆地發布和交易閒置物品。在小程式中，你可以與買家或賣家進行私訊交流，查看個人資料和訂單，以及搜尋你想要的物品。那麼閒魚在微信小程式中究竟叫什麼呢，這篇教學攻略將為您詳細介紹，想要了解的用戶們快來跟著本文繼續閱讀吧！閒魚微信小程式叫什麼答案：閒魚，閒置交易二手買賣估價回收。 1、在小程式中可以發布閒置、與買家/賣家私訊交流、查看個人資料及訂單、搜尋指定物品等功能;2、在小程式的頁面中有首頁、附近、發閒置、訊息、我的5項功能；3、</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/zh-tw/faq/629465.html" title="微信小程式實現圖片上傳功能" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/000/887/227/170052888311890.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="微信小程式實現圖片上傳功能" /> </a> <a href="https://www.php.cn/zh-tw/faq/629465.html" title="微信小程式實現圖片上傳功能" class="phphistorical_Version2_mids_title">微信小程式實現圖片上傳功能</a> <span class="Articlelist_txts_time">Nov 21, 2023 am 09:08 AM</span> <p class="Articlelist_txts_p">微信小程式實現圖片上傳功能隨著行動網路的發展，微信小程式已經成為了人們生活中不可或缺的一部分。微信小程式不僅提供了豐富的應用場景，還支援開發者自訂功能，其中包括圖片上傳功能。本文將介紹如何在微信小程式中實作圖片上傳功能，並提供具體的程式碼範例。一、前期準備工作在開始編寫程式碼之前，我們需要先下載並安裝微信開發者工具，並註冊成為微信開發者。同時，也需要了解微信</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/zh-tw/faq/629806.html" title="使用微信小程式實現輪播圖切換效果" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/000/887/227/170056077741291.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="使用微信小程式實現輪播圖切換效果" /> </a> <a href="https://www.php.cn/zh-tw/faq/629806.html" title="使用微信小程式實現輪播圖切換效果" class="phphistorical_Version2_mids_title">使用微信小程式實現輪播圖切換效果</a> <span class="Articlelist_txts_time">Nov 21, 2023 pm 05:59 PM</span> <p class="Articlelist_txts_p">使用微信小程式實現輪播圖切換效果微信小程式是一種輕量級的應用程序，具有簡單、高效的開發和使用特點。在微信小程式中，實作輪播圖切換效果是常見的需求。本文將介紹如何使用微信小程式實現輪播圖切換效果，並給出具體的程式碼範例。首先，在微信小程式的頁面檔案中，新增一個輪播圖元件。例如，可以使用<swiper>標籤來實現輪播圖的切換效果。在該組件中，可以透過b</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/zh-tw/faq/629437.html" title="實現微信小程式中的圖片旋轉效果" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/000/887/227/170052639172010.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="實現微信小程式中的圖片旋轉效果" /> </a> <a href="https://www.php.cn/zh-tw/faq/629437.html" title="實現微信小程式中的圖片旋轉效果" class="phphistorical_Version2_mids_title">實現微信小程式中的圖片旋轉效果</a> <span class="Articlelist_txts_time">Nov 21, 2023 am 08:26 AM</span> <p class="Articlelist_txts_p">實現微信小程式中的圖片旋轉效果，需要具體程式碼範例微信小程式是一種輕量級的應用程序，為用戶提供了豐富的功能和良好的用戶體驗。在小程式中，開發者可以利用各種元件和API來實現各種效果。其中，圖片旋轉效果是一種常見的動畫效果，可以為小程式增添趣味性和視覺效果。在微信小程式中實作圖片旋轉效果，需要使用小程式提供的動畫API。以下是一個具體的程式碼範例，展示如何在小程</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/zh-tw/faq/629819.html" title="實作微信小程式中的滑動刪除功能" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/000/465/014/170056213220708.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="實作微信小程式中的滑動刪除功能" /> </a> <a href="https://www.php.cn/zh-tw/faq/629819.html" title="實作微信小程式中的滑動刪除功能" class="phphistorical_Version2_mids_title">實作微信小程式中的滑動刪除功能</a> <span class="Articlelist_txts_time">Nov 21, 2023 pm 06:22 PM</span> <p class="Articlelist_txts_p">實作微信小程式中的滑動刪除功能，需要具體程式碼範例隨著微信小程式的流行，開發者在開發過程中經常會遇到一些常見功能的實作問題。其中，滑動刪除功能是常見、常用的功能需求。本文將為大家詳細介紹如何在微信小程式中實現滑動刪除功能，並給出具體的程式碼範例。一、需求分析在微信小程式中，滑動刪除功能的實作涉及以下要點：列表展示：要顯示可滑動刪除的列表，每個列表項目需要包</p> </div> </div> <a href="https://www.php.cn/zh-tw/weixin-marketing.html" class="phpgenera_Details_mainL4_botton"> <span>See all articles</span> <img src="/static/imghw/down_right.png" alt="" /> </a> </div> </div> </div> </main> <footer> <div class="footer"> <div class="footertop"> <img src="/static/imghw/logo.png" alt=""> <p>公益線上PHP培訓，幫助PHP學習者快速成長！</p> </div> <div class="footermid"> <a href="https://www.php.cn/zh-tw/about/us.html">關於我們</a> <a href="https://www.php.cn/zh-tw/about/disclaimer.html">免責聲明</a> <a href="https://www.php.cn/zh-tw/update/article_0_1.html">Sitemap</a> </div> <div class="footerbottom"> <p> © php.cn All rights reserved </p> </div> </div> </footer> <input type="hidden" id="verifycode" value="/captcha.html"> <script>layui.use(['element', 'carousel'], function () {var element = layui.element;$ = layui.jquery;var carousel = layui.carousel;carousel.render({elem: '#test1', width: '100%', height: '330px', arrow: 'always'});$.getScript('/static/js/jquery.lazyload.min.js', function () {$("img").lazyload({placeholder: "/static/images/load.jpg", effect: "fadeIn", threshold: 200, skip_invisible: false});});});</script> <script src="/static/js/common_new.js"></script> <script type="text/javascript" src="/static/js/jquery.cookie.js?1746990744"></script> <script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script> <link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css?2' type='text/css' media='all' /> <script type='text/javascript' src='/static/js/viewer.min.js?1'></script> <script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script> <script type="text/javascript" src="/static/js/global.min.js?5.5.53"></script> <script> var _paq = window._paq = window._paq || []; /* tracker methods like "setCustomDimension" should be called before "trackPageView" */ _paq.push(['trackPageView']); _paq.push(['enableLinkTracking']); (function () { var u = "https://tongji.php.cn/"; _paq.push(['setTrackerUrl', u + 'matomo.php']); _paq.push(['setSiteId', '9']); var d = document, g = d.createElement('script'), s = d.getElementsByTagName('script')[0]; g.async = true; g.src = u + 'matomo.js'; s.parentNode.insertBefore(g, s); })(); </script> <script> // top layui.use(function () { var util = layui.util; util.fixbar({ on: { mouseenter: function (type) { layer.tips(type, this, { tips: 4, fixed: true, }); }, mouseleave: function (type) { layer.closeAll("tips"); }, }, }); }); document.addEventListener("DOMContentLoaded", (event) => { // 定义一个函数来处理滚动链接的点击事件 function setupScrollLink(scrollLinkId, targetElementId) { const scrollLink = document.getElementById(scrollLinkId); const targetElement = document.getElementById(targetElementId); if (scrollLink && targetElement) { scrollLink.addEventListener("click", (e) => { e.preventDefault(); // 阻止默认链接行为 targetElement.scrollIntoView({ behavior: "smooth" }); // 平滑滚动到目标元素 }); } else { console.warn( `Either scroll link with ID '${scrollLinkId}' or target element with ID '${targetElementId}' not found.` ); } } // 使用该函数设置多个滚动链接 setupScrollLink("Article_Details_main1L2s_1", "article_main_title1"); setupScrollLink("Article_Details_main1L2s_2", "article_main_title2"); setupScrollLink("Article_Details_main1L2s_3", "article_main_title3"); setupScrollLink("Article_Details_main1L2s_4", "article_main_title4"); setupScrollLink("Article_Details_main1L2s_5", "article_main_title5"); setupScrollLink("Article_Details_main1L2s_6", "article_main_title6"); // 可以继续添加更多的滚动链接设置 }); window.addEventListener("scroll", function () { var fixedElement = document.getElementById("Article_Details_main1Lmain"); var scrollTop = window.scrollY || document.documentElement.scrollTop; // 兼容不同浏览器 var clientHeight = window.innerHeight || document.documentElement.clientHeight; // 视口高度 var scrollHeight = document.documentElement.scrollHeight; // 页面总高度 // 计算距离底部的距离 var distanceToBottom = scrollHeight - scrollTop - clientHeight; // 当距离底部小于或等于300px时，取消固定定位 if (distanceToBottom <= 980) { fixedElement.classList.remove("Article_Details_main1Lmain"); fixedElement.classList.add("Article_Details_main1Lmain_relative"); } else { // 否则，保持固定定位 fixedElement.classList.remove("Article_Details_main1Lmain_relative"); fixedElement.classList.add("Article_Details_main1Lmain"); } }); </script> <script> document.addEventListener('DOMContentLoaded', function() { const mainNav = document.querySelector('.Article_Details_main1Lmain'); const header = document.querySelector('header'); if (mainNav) { window.addEventListener('scroll', function() { const scrollPosition = window.scrollY; if (scrollPosition > 84) { mainNav.classList.add('fixed'); } else { mainNav.classList.remove('fixed'); } }); } }); </script> </body> </html>