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就完蛋了！

 

转载于:https://www.cnblogs.com/cutpicmanxx/p/9589268.html