258资源分享网

介绍 项目介绍

WeScale 定位为音乐训练小程序，初期规划了基础音阶的三个训练，以及他们的镜像模式。

数字简谱

字母简谱

数字简谱对字母简谱

后期看情况更新追加其他训练。

产品展示

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

人员介绍 缘起

明神每晚都要练着他的电吉他，敲着他的木鱼，突然一道光在脑海中闪过，机智的他迅速捕获到，当晚凌晨三点做完了这次小程序的原型。

之前和老陈搞了个 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.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 }

微信小程序的缓存