介紹

項目介紹

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

• 數(shù)字簡譜
• 字母簡譜
• 數(shù)字簡譜對字母簡譜

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

產(chǎn)品展示

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

人員介紹

緣起

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

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

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

項目統(tǒng)計

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

踩到的坑

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

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

• 新增頁面需要 npm run dev

這個是 mpvue 的問題。常見問題可以發(fā)現(xiàn)。解決的方法就是手動 npm run dev 一下。

• 生命周期問題

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

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() 會在當前頁面執(zhí)行，解決方法，用小程序的 onload()/ vue 的 mounted()，遇到問題看圖就好：

• Class 與 Style 綁定

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

不支持就不用咯~

• 沒有 BOM／DOM 操作

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

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

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

• 微信小程序多聲道

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

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

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

// 自動尋找一個當前可用的 audioContext 實例
export function playedMusic (url) {
  let contextList = store.getters.globalAudioContext

  while (contextList !== store.getters.audioContextStatus.map(item => item === false).length) {
    let audioContextStatus = store.getters.audioContextStatus
    let index = store.getters.currentAudioIndex
    // 如果當前可用，封鎖
    if (audioContextStatus[index]) {
      store.commit('setAudioContextStatus', {index, status: false})
      break
    } else {
      // 否則 ++index
      store.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
}

• 微信小程序的緩存

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

多文件的下載、保存、緩存, 回調(diào)、遞歸的思想：

// 加載資源, 加載完隱藏loading
  _load(0, () => {
    // 更改Audio.js的config對象屬性。
    config.musicUrl = JSON.parse(musicUrlTemp)

    const temp = JSON.parse(musicUrlTemp)
    temp.tempVerison = tempVerison
    wx.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
  }

• 全局變量

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

• 數(shù)據(jù)分析及合法域名

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

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

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

• ES6 的模塊動態(tài)引用

參考 博客 :

1. ES6 模塊中的值屬于【動態(tài)只讀引用】。只說明一下復雜數(shù)據(jù)類型。
2. 對于只讀來說，即不允許修改引入變量的值， import 的變量是只讀的，不論是基本數(shù)據(jù)類型還是復雜數(shù)據(jù)類型。當模塊遇到 import 命令時，就會生成一個只讀引用。等到腳本真正執(zhí)行時，再根據(jù)這個只讀引用，到被加載的那個模塊里面去取值。
3. 對于動態(tài)來說，原始值發(fā)生變化， import 加載的值也會發(fā)生變化。不論是基本數(shù)據(jù)類型還是復雜數(shù)據(jù)類型。

// 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

致謝

致謝所有參與產(chǎn)品、開發(fā)、測試，貢獻出創(chuàng)意想法與建議的小伙伴。