为什么要使用mpvue?
- 因为之前有一个用原生写的项目,写的时候很多东西没有注意,就逻辑十分的混乱,于是要用框架来重构。
- 更加便于扩展。
关于mpvue的担忧
- 官方已经很久没有更新了,问过一个在美团的学长,说会更新,不过感觉他应该也只是推测,emmm。
- 代码出错的地方很不好定位,或者说很难定位。
但是mpvue慢慢写着还是给了不错的体验,我之前没怎么写过vue,以前都是对于框架敬而远之的。
我觉得关于用mpvue写微信小程序的代码我们需要知道的一些东西:
vue的官方网站,小程序的api文档的网站,vuex,flyio,promise,es6入门的一点知识,mpvue的网址和github地址。
首先我讲一下我觉得小程序的数据应该怎样组织,传输数据的时候应该带着token传输,用于标识用户身份,那么这个token就应该存在localStorage里面,其余的数据应当是可以多页面使用的,我在A页面修改了数据,应当在B页面产生影响,那么这就是vuex的用武之地了。
some tips:
- 使用mpvue手脚架生成启动代码之后,请务必关掉eslinit代码检查,不然你可能会疯掉。
-
ui框架(vant等)直接将代码下载在static文件夹下即可,然后再在main.json下面添加路径即可在index.vue里面使用了,在使用vant的时候没有遇到什么问题,需要在webpack的配置文件中加入解析,像这样:
- 本地图片应当存放在static文件夹下,最好是
/static/image
这样的路径,引用图片的时候直接使用绝对路径,相对路径在微信开发工具是可以显示的,但是真机不行。 - ios端只能识别像
2018/10/20
这样的日期,如果使用了2018-10-20
这样的日期形式,会在转换的时候变成undefined,却不报错。 - canvas在编写的时候,没有数据或者数据错误,是不会报错的,但是却会不执行出问题的地方后面的代码,于是,要排查错误的就需要多console.log,二分法是一个不错的方法(笑
- 新增一个页面需要在
app.json
里面注册,并且重新npm run dev
不然会找不到路径,如果没用,就直接删掉dist目录下的文件再npm run dev
。 - 由于openSetting不能使用了,必须要从button的open-type进入,我推荐直接做一个弹窗,然后确定按钮使用button,没有授权就直接弹出来就行了,微信的限制实在是太多了。
- (简书做图床是极好的)
关于mpvue代码文件的组织:
- app.json和原生的一样,以前好像没有,需要写在main.js里面,现在可以直接写在app.json里面了。
- page由
index.vue
main.json
main.js
这三个文件组成,main.js
这个文件一般不需要改动,index.vue
是页面的主要组成部分,把html,css,js都放在这个里面了。 - 小程序的标签和html的标签都是可以直接使用的,只有几个html的标签不支持,反正后面是直接编译成用小程序的标签组成的代码。