mpvue实现微信小程序（欢迎踩坑）

最近刚使用mpvue完成了微信小程序的开发，写点东西，作个记录。

首先依旧是两个传送门：

微信小程序文档:[https://developers.weixin.qq.com/miniprogram/dev/framework/MINA.html][1]
mpvue的官网连接:[http://mpvue.com/][2]

踩坑记录：

• 真机调试的时候，小程序的本地图片不显示；
  如：页面路径为：/pages/index/index.vue,图片路径：/static/img/1.png;最初在index.vue页面里面图片的src为“../../../static/img/1.png;而后发如今小程序的调试环境可显示，可是在真机上不显示；（可是放在components里面用这种方式写的图片没有这个问题）

  解决方式：把pages引用的图片地址都改成'/static/',以根目录开头

• 以前设置颜色的时候，很喜欢rgba(0,0,0,.1),这样，而后真机测试的时候，个人手机是华为mate9（ios测试过没有问题，多是安卓的问题）输入的时候是空白的可是有占位，点了回车才能显示，不能边输边显示；debug了半天，最后才发现我字体颜色设置为rgba的时候会致使错误

  解决方式：把color的rgba设置改成#设置

• 使用微信小程序的picker组件实现省-城市选择；原本想直接用picker的城市mode的，可是这个数据要后台返回的并且也没有到区；picker还有一个多列选择器，感受传入的数据实在是麻烦；最后用picker-view；清清爽爽；就设置两列，分别传入列数组就行了；这里遇到的一个坑就是，在绑定的change函数上，我没法取到当前change的是哪一列的数据；由于这里要作判断，若是是第一列的话，要替换第二列的数组内容；

  解决方式：新建变量，在change函数中赋值，在watch里面监听；

• 无论用onload仍是onshow方法，小程序的data里面的值始终没有被初始化；就好比我设置了一个状态变量，初值为false，我在页面操做后变为true；回退再打开时，它依然是true值；这个问题不知道是否是我哪里没有考虑到，暂时只是用了一个不是办法的办法解决

  解决办法：在onload方法内重置状态变量

• 底部导航切换的时候，onshow每次都会调用，可是onload只会调用一次；
• 对image来讲，height：auto这个属性是不生效的；图片自适应的问题搞了半天；由于是一个富文本字符串，所以没有办法像官方文档设置mode；最后升级了我用的转换插件 (mpvue-wxparse)的版本；它支持富文本内设置图片的mode属性。
• 搜索回车以前用的是@keyup.native 在小程序里面要换成@confirm
• 还有跳转外链，小程序是有提供一个组件的<web-view :url=""></web-view>,实现的时候，只要单独作一个外链的页面只包含上面这个标签，传入url就能够了。这个标签是当即执行的，有这个的话，就会在当前页面直接跳转，因此我单独把它写成一个页面。专门用于外链跳转；可是外链跳转仍是个坑，微信仅能支持跳到在它那边注册过的https的网址，其余仍是不行，暂时没有找到好的方式；看了知乎，它的外链直接转成了文本，不可点击了。

最后的话

好了，暂时就写到这么多啦,第一次写小程序，虽然用了mpvue少了不少学习成本，可是转化的时候仍是遇到了挺多问题，过程当中都一直在网上搜索解决方式啊，也会发问题问问你们；感受收获还挺大的；据说wepy也挺好用的，下次开发小程序的时候，能够看看试着用用。