wescale 技术篇 —— mpvue 与微信小程序的火花 -凯发ag旗舰厅登录网址下载

介绍

项目介绍

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

• 数字简谱
• 字母简谱
• 数字简谱对字母简谱

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

凯发ag旗舰厅登录网址下载的产品展示

扫描下方小程序码或在微信小程序中搜索 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 操作都无法实现。 凯发ag旗舰厅登录网址下载的解决方案： 这块主要是动画不能用，那就用 css3 咯~

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

试着写一个 swicth 的组件，发现渲染结果不对，查了原因才发现，微信小程序也有个 switch 的组件。 凯发ag旗舰厅登录网址下载的解决方案： 改名字啊。命名规范！

• 微信小程序多声道

按正常的套路去使用小程序的 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 }

• 微信小程序的缓存

实际开发过程中发现。如果不预先对音频进行缓存，实际播放时会有一定的延迟，视网络情况。凯发ag旗舰厅登录网址下载的解决方案是先预加载，然后存在小程序的缓存中，凯发ag旗舰厅登录网址下载官网介绍缓存有 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 的问题。 凯发ag旗舰厅登录网址下载的解决方案： 用最原始的 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、运营等，如果你有想法、有创意、有技能可以加入凯发ag旗舰厅登录网址下载的小团队！2333~

更多专业前端知识，请上 【猿2048】www.mk2048.com

总结

以上是凯发ag旗舰厅登录网址下载为你收集整理的wescale 技术篇 —— mpvue 与微信小程序的火花的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得凯发ag旗舰厅登录网址下载网站内容还不错，欢迎将凯发ag旗舰厅登录网址下载推荐给好友。