这是第一次用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