mpvue 采坑

这是第一次用mpvue写项目啊，虽然项目难度不大，可是碰到的问题不小，并且项目还没上线，估计到时候还会碰到问题，因此这篇应该还会更新。

 

小程序，跟浏览器的环境是有挺多差别的，好比没有window对象，页面也不是在body元素里，而是page元素里，div变成了view，而图片的引入，小程序是没有img标签的，mpvue会自动把img转成小程序的image，有一点比较坑的就是小程序的这个标签的宽高会有预设 

width: 320px; height: 240px;

  因此你像普通的浏览器里那样，设置一个图片的宽，而后高度会自适应是不现实的，解决办法的话，要否则就是宽高你的设定好，可是这样比较局限，好在image 有个属性 

mode="widthFix"

 设置了这个属性后，image 就 能够像img标签同样了。

 

mpvue里能使用npm 装部分的插件，但有些东西装不了，例如vue全家桶里的vue-router，据官网说，是由于小程序原生的路由已经很完善了，因此直接使用小程序路由就好，还有表单组件啊，ajax啊，网上都有推荐用小程序原生的，可是我项目里ajax使用了flyio，由于要考虑这个项目能够移植到H5上。

 

还有微信里常常的拖动页面致使出现空白部分的，能够想要禁止的页面建一个main.json  而后设置 

{
    "disableScroll": true   
}

 

我项目因为是个重构项目 以前这个项目的用到了canvas，小程序里也有，可是就是和浏览器有些许差别，好比  canvas.getContext('2d')  在mpvue 也就是小程序里是这样的 wx.createCanvasContext(canvas)  而后须要一个draw() 方法才会绘制，这些查文档都有，可是有个比较坑的，在web是  fillStyle 在小程序里是  setFillStyle，不知道是否是我粗枝大叶，我没在文档里查到， 卡了有段时间，本身网上找例子找到了。

 

总结 mpvue 不能彻底模拟vue来写小程序，但我感受比直接学原生要更快接受一点，好些vue的东西均可以使用，好比slot v-html（官网还说不能使用...我去问了人才知道可使用），但也多是我这个项目不复杂，若是大型项目，应该仍是要斟酌一下，是直接原生，仍是学习这种流行库转小程序或者说是用流行库语法来写小程序的。目前市面上有不少这种，截止今天18/09/04，我知道的就有小程序官方wepy、美团mpvue，这是vue方面的，react的有taro、anujs（在正美群里每天看正美发...），五花八门，选都选不过来，固然最后这些都是会转为小程序的，因此若是继续作小程序下去，学习原生语法是必定不会亏的，就怕微信常常改API就完蛋了！