因为之前参照微信的原生的文档寫过一些小程序的demo写的过程比较繁琐,后来出了美团的mpvue可以直接使用vue开发,其他的不作对比这篇文章记录一下踩坑之旅.
参照mpvue 的官网嘚五分钟的教程搭建项目
在创建的过程中,需要输入微信小程序的个人appId可以去微信小程序开发平台复制进去。
创建完成后的项目其实和使用vue-cli创建的脚手架大同小异没图案也只是对其封装,然后转化为wxml
官网是将需要使用的组件,按照小程序的自定义封装组件的方式将所需要的组件封装成小程序的自定义的组件,然后通过usingComponents的方式将你需要的组件引进来
此处做一个提示,mpvue创建的pages下的目录需要自行创建一個main.json文件对该页进行配置,效果如下颜色还是挺好看的:
这就是将iview的组件引入使用的过程。
这里提出一些遇到的问题在app.json配置了tabBar的时候,它不一定会显示出来解决办法:关闭微信开发工具重新打开,或者重新npm run dev一遍吧记得在某处看过mpvue的解释,他们觉得重新添加的页面也鈈会太多所以重启一下也没事大的影响。
在使用的过程中tabBar的icon会404还是重启微信开发工具,理由就不解释了
有的时候放到src/assets/的时候会一直报錯找不到文件是因为dist/assets没有找到,你需要把他复制下来放到assets/应该是打包没有打包下来
在index.vue里使用的时候,只需要传入ec即可
友情提示:微信小程序里是没有select这个标签的微信的组件里封装了picker组件,其实是对select的一种另类展示因为微信小程序是針对移动端的,点点点不容易点到select里的其他选项所以没有select吧,我瞎猜的。。
在这里也提一下mpvue的缺点mpvue并没有将微信小程序里的数据雙向绑定实现,再多出api中均存在这样的问题虽然不影响使用,也就是多写几行代码以下举出几个例子,
在使用i-tab的时候value其实是没有根據变化而变化的,当你点击的时候,你需要手动改变iview的value然后他才会跳到点击的tab,其他的组件都有这种问题大家慢慢体会吧。。