介紹

項目介紹

WeScale 定位為音樂訓練小程序，初期規劃了基礎音階的三個訓練，以及他們的鏡像模式。

• 數字簡譜
• 字母簡譜
• 數字簡譜對字母簡譜

后期看情況更新追加其他訓練。

產品展示

掃描下方小程序碼或在微信小程序中搜索 WeScale，即可使用。

人員介紹

• Myou Aki：明神，北漂前端，總有奇奇怪怪的想法想要實現，適合做產品的前端

• Dr.Chan：老陳，后端、前端通吃，長得帥說話又好聽的茂名吃貨

• Jackliu：大堅，產品、偽前端，不想做前端的產品不是好司機

緣起

明神每晚都要練著他的電吉他，敲著他的木魚，突然一道光在腦海中閃過，機智的他迅速捕獲到，當晚凌晨三點做完了這次小程序的原型。

之前和老陳搞了個 A股股票助手 — stock-helper ，這次有明神帶路，我們都想積累點小程序開發的經驗，于是我和老陳就上車了。（滴~~學生卡）

恰逢美團剛剛開源了 mpvue，短短幾周就迅速獲得幾千個 star，在 mpvue 開源前，最流行的應該是 wepy 。據說用 mpvue，能夠像德芙一樣順滑地使用 vue 寫微信小程序，于是我們開始了踩坑之路。

項目統計

預計一周完成，畢竟是大家都有正經事要做，硬是拖到了兩周才完成。四個分支，總計提交 51次，越到 deadline 提交越多，目前已發布 v1.0.0 版本，已審核上線。

踩到的坑

• 微信小程序不能使用本地資源

這個坑很常見，微信小程序不支持本地引用圖片、音頻、視頻，所以需要外鏈。對于圖片還可以使用 Base64 編碼，直接在 html 或 css 中引用。根據圖片根據圖片體積或者可維護性考慮，酌情使用外鏈或者Base64編碼。

• 新增頁面需要 npm run dev

這個是 mpvue 的問題。常見問題可以發現。解決的方法就是手動 npm run dev 一下。

• 生命周期問題

mpvue 是兼容微信小程序的生命周期與 vue 的生命周期，也就是 vue 實例會接管小程序 Page 實例的生命鉤子，因此需要使用到小程序的生命周期鉤子時，可將相應的鉤子方法定義在 vue 實例中，如定義當前Page的分享標題內容圖片：

new Vue({data () {return {score: ''}},onShareAppMessage (res) {return {title: '我獲得 ' this.score ' 分，快來一起掌握基礎音階知識吧！',path: '/pages/index/index',imageUrl: 'https://wechat.dddog.com.cn/static/wescale.jpg'}} })

這個不知道如何描述，大致是非當前頁面的 create() 會在當前頁面執行，解決方法，用小程序的 onload()/ vue 的 mounted()，遇到問題看圖就好：

• Class 與 Style 綁定

不支持 vue 官方文檔：Class 與 Style 綁定中的 classObject 和 styleObject 語法。 暫不支持在組件上使用 Class 與 Style 綁定

不支持就不用咯~

• 沒有 BOM／DOM 操作

mpvue 使得開發者可以使用標準 html、css 去編寫小程序，當我們查看 mpvue 項目中的 dist 文件夾時可以發現，編寫的 html、css 被解析成了小程序的 wxml、wxss ，固然小程序的運行環境也就是非標準的 WebView 了。因此我們web開發進行經常使用的 browser、navigator 實例自然是無法使用了，取而代之的是使用小程序瀏覽器提供的API —— wx實例去操作native元素。至于 DOM 操作，即使在vue中也是不建議使用的，還是用數據驅動去轉化吧。也就是說所有關于 BOM / DOM 的操作都不行。用 vue 第三方 UI庫時要注意， Dom 和 Bom 相關的 API 操作都無法實現。 解決方案： 這塊主要是動畫不能用，那就用 css3 咯~

• 組件名不要和微信的組件名重名

試著寫一個 swicth 的組件，發現渲染結果不對，查了原因才發現，微信小程序也有個 switch 的組件。 解決方案： 改名字啊。命名規范！

• 微信小程序多聲道

按正常的套路去使用小程序的 api —— wx.createInnerAudioContext() 是無法創建多聲道的。本次技術的難點也在于如何創建微信小程序的多聲道。查了一圈的資料，關于這點的資料甚少。查到一篇博客，通過創建多個 innerAudioContext 實例化對象，輪流調用的方式。對于原作者說小程序只能同時存在5個音頻實例這一定，不敢茍同。畢竟我直接創建了 30個都沒問題，哈哈

const audioContextNum = 30 let globalAudioContext = Array.from({ length: audioContextNum },(v, k) => wx.createInnerAudioContext())

如何尋找當前可用的聲道，也是個難點，大致的思想是，把正在播放的實例封鎖，待實例的 onEnded() 回調執行時取消封鎖，使用時需要遍歷所有實例，尋找當前可用的實例，看實例代碼(與實際代碼有刪改)：

// 自動尋找一個當前可用的 audioContext 實例 export function playedMusic (url) {let contextList = store.getters.globalAudioContextwhile (contextList !== store.getters.audioContextStatus.map(item => item === false).length) {let audioContextStatus = store.getters.audioContextStatuslet index = store.getters.currentAudioIndex// 如果當前可用，封鎖if (audioContextStatus[index]) {store.commit('setAudioContextStatus', {index, status: false})break} else {// 否則 indexstore.commit('setCurrentAudioIndex', index)}}const resultPromise = new Promise((resolve, reject) => {contextList[index].onPlay(() => {})contextList[index].onError((res) => {reject(res)})contextList[index].onEnded((res) => {reset(resolve)})})return resultPromise }

• 微信小程序的緩存

實際開發過程中發現。如果不預先對音頻進行緩存，實際播放時會有一定的延遲，視網絡情況。解決方案是先預加載，然后存在小程序的緩存中，官網介紹緩存有 10 M，足夠用了。 首先是下載文件 wx.downloadFile()，得到 tempFilePath，再把臨時文件保存為本地文件 wx.saveFile(),得到 savedFilePath，再將本地文件的的路徑保存在緩存中 wx.setStorage()。這么多異步操作，當然用 Promise 再封裝一下啦。

多文件的下載、保存、緩存, 回調、遞歸的思想：

// 加載資源, 加載完隱藏loading_load(0, () => {// 更改Audio.js的config對象屬性。config.musicUrl = JSON.parse(musicUrlTemp)const temp = JSON.parse(musicUrlTemp)temp.tempVerison = tempVerisonwx.setStorage({key: 'musicUrl', data: temp})wx.hideLoading()})function _load (index, callback) {if (!musicUrlArr[index]) {callback()} else {downloadFile(musicUrlArr[index]).then((tempFilePath) => {saveFile(tempFilePath).then((savedFilePath) => {musicUrlTemp = musicUrlTemp.replace(musicUrlArr[index],savedFilePath)index _load(index, callback)})})}}

緩存是否存在及緩存版本的判斷：

// 判斷是否已有緩存且緩存版本正確if (temp && temp.tempVerison === tempVerison) {return false}

• 全局變量

遇到很多需要全局變量，特別是狀態的，最好統一管理。vue 的 vuex 是專為 Vue.js 應用程序開發的狀態管理模式。使用過程遇到的坑是無法使用它的輔助函數 mapState、 mapGetters、 mapActions、 mapMutations 等。看下 mpvue 的 issue 感覺是 mpvue 的問題。 解決方案： 用最原始的 store.commit()、 store.getter

• 數據分析及合法域名

調用微信小程序的網絡請求 wx.request()、 wx.downloadFile() 之類 都需要 https 協議。 調微信的數據分析還要隔兩個小時獲取 access_token, 這些就是要服務器端的配置了。

條件： 域名及域名證書、服務器

獲取 token 及 服務器寫接口返回靜態文件及微信的數據分析接口 可以參考這個, node.js 寫的，寫的很隨意，隨便看看。

• ES6 的模塊動態引用

參考博客:

ES6 模塊中的值屬于【動態只讀引用】。只說明一下復雜數據類型。

對于只讀來說，即不允許修改引入變量的值， import 的變量是只讀的，不論是基本數據類型還是復雜數據類型。當模塊遇到 import 命令時，就會生成一個只讀引用。等到腳本真正執行時，再根據這個只讀引用，到被加載的那個模塊里面去取值。

對于動態來說，原始值發生變化， import 加載的值也會發生變化。不論是基本數據類型還是復雜數據類型。

// b.js export let counter = {count: 1 } setTimeout(() => {console.log('b.js-1', counter.count) }, 1000)// a.js import { counter } from './b.js' counter = {} console.log('a.js-1', counter)// Syntax Error: "counter" is read-only

雖然不能將 counter 重新賦值一個新的對象，但是可以給對象添加屬性和方法。此時不會報錯。這種行為類型與關鍵字 const 的用法。

// a.js import { counter } from './b.js' counter.count console.log(counter)// 2

致謝

致謝所有參與產品、開發、測試，貢獻出創意想法與建議的小伙伴。

我們有個小團隊，自嘲為“咸魚科技”，誰說咸魚不能有夢想，哈哈。我們還需要 UI、運營等，如果你有想法、有創意、有技能可以加入我們的小團隊！2333~

更多專業前端知識，請上 【猿2048】www.mk2048.com

總結

以上是生活随笔為你收集整理的WeScale 技术篇 —— mpvue 与微信小程序的火花的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。