使用mpvue开发小程序

前言：

最近接到小程序的开发需求，因为以前也没开发太小程序，心情仍是有点激动。先花15分钟看一遍小程序官方文档，再花10分钟看一遍mpvue官方文档，而后拿着原型图和UI图就开干。踩了很多坑，写篇博客记录一下。PS：小程序官方文档地址：https://developers.weixin.qq.com/miniprogram/dev/ ，mpvue官方文档： http://mpvue.com/

mpvue：

mpvue 是一个使用 Vue.js 开发小程序的前端框架。框架基于 Vue.js 核心，mpvue 修改了 Vue.js 的 runtime 和 compiler 实现，使其能够运行在小程序环境中，从而为小程序开发引入了整套 Vue.js 开发体验。

不得不说对于会vue的人来讲，使用mpvue开发小程序基本就是0成本，看一遍文档就能直接上手开发小程序。固然mpvue框架也有不少须要吐槽的地方：好比不支持slot，致使封装公共组件很是的不方便；不支持vue-router，不过经过引入mpvue-router-patch能够在 mpvue 中使用 vue-router 兼容的路由写法。mpvue-router-patch的GitHub地址为：https://github.com/F-loat/mpvue-router-patch。更多mpvue项目能够在https://github.com/Meituan-Dianping/mpvue/issues/21找到。

碰见的一些问题：

（1）：在mpvue里面若是在A页面的created钩子函数里面进行了一些初始化操做，可是在B页面加载的时候也会执行A页面的created钩子函数里面的初始化操做

（2）：小程序里面使用css的background-image是无效的，除非将图片的放在服务器端才能够。（对于习惯使用background-image布局的人来讲是很是难受的）

（3）：web-view组件，因为公司只是将部分页面迁移到小程序中，不可避免会存在小程序页面与h5的页面互相跳转的状况，这种状况就须要使用web-view了。

小程序跳转h5页面：　

<web-view :src="webViewUrl"></web-view>

注意：

　　①  src的地址须要在小程序管理后台配置域名白名单，h5页面内部请求的api接口不须要配置request合法域名。

　　②  路由查询参数里面的值不能使用中文，否则在iOS手机上会直接白屏，可是安卓手机上没有问题

webViewUrl = 'https://www.xxx.com?name=张三&id=1' 　　　　// 这种状况会白屏，由于name的值为中文。可使用encodeURIComponent对查询参数进行编码

　　③  webViewUrl的地址必须是有效证书https的地址，而且页面内请求的https接口也必须是拥有有效证书，否则也会致使页面报错

　　④  webview里面的h5地址是不能调用微信支付，若是须要进行微信支付须要跳回到小程序里面支付。ps：一个小程序只能绑定一个商户号，若是须要接入第三方支付帐户。只能为三方帐户申请一个小程序，而后在将三方帐户的商户号绑定给新的小程序。

h5页面跳回小程序：

<!-- html -->
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>

// javascript
wx.miniProgram.navigateTo({url: '/path/to/page'})
wx.miniProgram.postMessage({ data: 'foo' })
wx.miniProgram.postMessage({ data: {foo: 'bar'} })
wx.miniProgram.getEnv(function(res) { console.log(res.miniprogram) // true })

注意：

　　① h5跳回小程序只能是在当前h5页面是在webview中才能跳回小程序，不能经过这种方法实如今同一公众号下h5页面直接跳转到小程序中

　　② 经过这种方式只能跳转到原来的小程序，若是须要跳转到其余的小程序，须要先跳转到原来的小程序中，而后再跳转到其余小程序里面

 （4）：textarea输入框固定在页面底部时在安卓手机上第一次获取焦点不会将键盘顶起来，第一次之后就能够了。（这个是小程序本身的bug）

  ( 5）：重构IM聊天到小程序中：

　　① 原IM聊天是使用google-protobuf将聊天数据以二进制形式传输，可是在使用.proto文件打包后的protobuf.js时发如今浏览器中是默认将库对象proto挂载到window对象上。因为小程序没有window对象，因此在小程序中引入protobuf.js文件时报错

 　　　　

　　　　　　解决方法：在protobuf.js开始位置定义一个proto对象，库文件中重写proto对象的属性和方法就是在重写我定义的proto对象，而后将该对象export出去

 　　　　　   

 

　　② 在安卓6.0如下的手机链接上websocket后而后就触发onSocketError

　　　　　　

 　　　　　　解决方法：在低版本安卓中因为服务器的相同IP以及端口上安装了多张证书致使。SSL协议只容许在一个IP端口上返回一张证书。能够经过分配不一样的端口号或者不一样IP地址解决这个问题。

③ 加载30条聊天记录时（具体多少项和手机性能有关）致使小程序卡死。排查了好久找到了缘由是由于数组里面的每一项由protobuf解析出来的聊天数据对象比较复杂，当数组中的数据超过30条时致使小程序卡死　　

　　

　　　　　　  解决方法：拿到protobuf解析出来的聊天数据对象，去掉对象中没有用的属性和方法

总结：

　　第一次开发小程序仍是感受上手挺容易的，可是在这过程当中踩了不少坑，也填了不少坑。IM聊天部分是将原h5页面重构到小程序中，h5原IM聊天页面是由博客大神子慕大诗人搞的。关于websocket心跳重连和google-protobuf能够参考子慕大神的文章http://www.javashuo.com/article/p-ybaopgvt-hq.html、http://www.javashuo.com/article/p-uvbvfdnj-hs.html