微信小程式之音訊播放-wx.createInnerAudioContext()小坑
咱們先看看官方示例
地址：https://mp.weixin.qq.com/debug/wxadoc/dev/api/createInnerAudioContext.html
建立innerAudioContext 物件。
autoplay自動播放開啟，
src音訊路徑
onPlay()以及onError()播放以及錯誤回撥。
以上咱們理解的不難懂。
那麼問題來。很多童鞋、猿哥們都會直接運用在自己需要的事件中。比如：
Page外：
const innerAudioContext = wx.createInnerAudioContext()Page內：
audioPlay: function() {innerAudioContext.src = 'xxx';innerAudioContext.play();innerAudioContext.onPlay(() => {console.log('錄音播放中');})innerAudioContext.onStop(() => {console.log('錄音播放停止');})innerAudioContext.onEnded(() => {console.log('錄音播放結束');})}})直接觸發audioPlay方法 簡單粗暴是不
結果發現。innerAudioContext.onPlay()，innerAudioContext.onStop()，innerAudioContext.onEnded(),播放停止多少次，就會疊加回調。
意外不意外。驚喜不驚喜。
其實不是官方誤導我們，而是我們理解錯了
回撥事件，是每一次觸發都會註冊一次。
也就是這個事件觸發過一次。這個回撥就已經一直存在了。所以不需要一直去建立回撥事件。
那麼應該怎麼做呢~
只需要把所有的回撥寫在onLoad中即可。頁面載入即註冊。不需要重複。
控制播放在其他事件進行即可。回撥只需要在onLoad中註冊就可以了
相關推薦
微信小程式之音訊播放-wx.createInnerAudioContext()小坑
咱們先看看官方示例地址：https://mp.weixin.qq.com/debug/wxadoc/dev/api/createInnerAudioContext.html建立innerAudioCon
微信小程式之條件渲染 wx:if與hidden比較
wx:if 1、在框架中，使用wx:if="{{condition}}" 來判斷是否需要渲染該程式碼： 如果條件成立就渲染 <view wx:if="{{condition}}">123</view> 2、在花括號中也可以寫條件判斷 <view>
微信小程式之音樂播放器
首先還是貼出專案檔案截圖： 如圖可知有5個頁面需要設計 首先是app.json頁面： { "pages": [ "pages/index/index", "pages/singer/singer", "pages/son
微信小程式之30分鐘學會開發小程式（小程式總覽）
一.註冊小程式賬號，下載IDE 1.官網註冊https://mp.weixin.qq.com/，並下載IDE。 2.官方文件一向都是最好的學習資料。 注意： （1）註冊賬號之後會有一個appid，新建專案的時候需要填上，不然很多功能是用不了的，比如不能預覽，不能上傳程式碼等等。
微信小程式之生成自定義引數小程式二維碼
掃碼已經成為一種常見又方便的進入移動應用的途徑，可以把線上線下的使用者流量帶入你的移動應用中來。微信小程式也提供了掃碼進入的功能，可以通過掃描二維碼或者微信小程式專有的小程式碼，進入到相應的小程式頁面。 微信官方提供了3個不同的REST API用於生成帶引數的小程式
小程式之下載檔案 —— wx.downloadFile
技術文件如下js程式碼downloadFile:function(){ wx.downloadFile({ url:"https://www.minshu.xin/My/
微信小程式之地理位置授權 wx.getLocation
1. 授權地理位置 點選按鈕，彈出授權彈窗，點選允許後，在以後的操作中可以隨時獲取到使用者地理位置 點選拒絕後，將無法獲取到地理位置，也無法再次點選彈出彈窗。 <button bindtap='onAuthLocation' >授權位置</button> onAut
微信小程式之使用者資訊授權 wx.getUserInfo
使用者授權 <button open-type="getUserInfo" bindgetuserinfo='getUser'>授權使用者資訊</button> getUser(e) { console.log(e); wx.getUserInfo({
微信小程式之音樂控制播放（audio的API）
一.小知識 1.wx.getBackgroundAudioPlayerState(OBJECT)：獲取後臺音樂播放狀態。 wx.getBackgroundAudioPlayerState({
微信小程式之wx.showActionSheet(OBJECT)彈出的後續處理
這是官方的文件這個api是用來顯示操作選單，彈出一個選單框，用來顯示一些操作，如下圖檢視文件OBJECT引數說明：引數 型別 必填 說明 itemList String Array 是 按鈕的文字陣列，陣列長度最大為6個 itemColor HexColor
微信小程式之wx:for迴圈輸出及require引入外部資料
迴圈輸出很有用滴 格式： <view wx:for="{{array}}" wx:for-item="item" wx:for-index="idx"> {{index}}: {{item.message}} </view> wx:for-ite
微信小程式之 wx.request統一呼叫
起因 在小程式裡發起網路請求的時候需要寫很多的引數，當頻繁呼叫時，每次都寫真心覺得累，那就封個方法統一呼叫吧 官方文件 官方文件 官方示例 wx.request({ url: '
微信小程式之wx.request:fail錯誤，真機預覽請求無效問題解決，安卓,ios網路預覽異常
問題描述：域名已經備案，我全部都有，也在後臺配置了，但是手機預覽，還是請求失敗， PC端是可以請求資料出來的 新版開發者工具增加了https檢查功能；可使用此功能直接檢查排查ssl協議版本問題：可能原因：0：後臺域名沒有配置0.1：域名不支援https1：沒有重啟工具；2：
微信小程式之物流狀態時間軸
一個月左右沒更新部落格了，最近有點懶了哈（工作上真的忙），很多工作上學習到的東西都沒有及時分享出來，有點愧疚，不過自己最近一直在收集資料和學習一些新技術，最主要是想要構建自己的前端技術體系和自定義一個前端規範文件，哈哈哈。說重點啦，微信小程式裡面開發的商城模組還挺多的，剛好寫了一個物流狀態的時間軸，簡單分享一
微信小程式之微信登陸 —— 微信小程式教程系列（20）
簡介： 微信登陸，在新建一個微信小程式Hello World專案的時候，就可以看到專案中出現了我們的微信頭像，其實這個Hello World專案，就有一個簡化版的微信登陸。只不過是，還沒有寫入到咱們自家的後臺中而已。 新建一個Hello World專案，找到a
微信小程式之swiper限制迴圈滑動
最近接的一個單子是使用swiper來達到頁面之間完美滑動的效果的。也就三個頁面首頁、內容頁、尾頁。 但是客戶要求首頁不能滑到尾頁，尾頁不能滑到首頁。 在官方文件中沒有找到方法，因此只能繞彎路了。 wxml頁面程式碼：重點在於 current='{{show_index}}'
11.微信小程式之canvas生成圖片並儲存到手機
在小程式中，會有這樣一種需求，儲存某一個頁面並將其分享到朋友圈。一般的做法是：將這個頁面用canvas繪製出來，通過wx.canvasToTempFilePath，把當前畫布指定區域的內容匯出生成指定大小的圖片。然後再通過wx.saveImageToPhotosAlbum，儲存圖片到系統相簿。由
微信小程式之介面互動反饋
互動反饋就是在使用者觸發某事件之後，給使用者一個反饋資訊。 在小程式中是通過以下幾種方式實現的： 1.wx.showToast()方法 showToast: function (postscollected, postcollected) {
微信小程式資料請求方法wx.request
<view wx:for='{{images}}' wx:key = 'index'> <image src='{{item.pic}}'></image> &nbs
微信小程式之側邊欄滑動實現（附完整原始碼）
目錄 一、效果圖 二、原理解析 三、原始碼 四、專案下載 同類文章推薦： 更多幹貨關注公眾號： 一、效果圖 講什麼都不如直接上效果圖好，所以我們先來看下實現效果如何。 通過滑動螢幕，或者點選左上角的圖示按鈕，都能實現側邊欄的劃出效果。 &nb