mpvue 使用笔记

需求要去开发小程序和web端的两套,于是选择了mpvue。
使用过程中总结了几点:

一、使用是首先要知道Vue的一些用法

Vue页面的结构放在template里,如果绑定的属性为数值需要:
例如:<div class="count”></div>

这时的count为一个固定的数值,不可根据情况更改而<div :class="count”></div> 这时的count为一个变量,可根据不同请求改变使用插件是要注意在调用插件的时候,template中的变量不可以用驼峰。
要用-的形式。虽然文档中说2.0已兼容驼峰的方式组件中的行为函数需要写在methods中,但在methods外部的函数可以使用this.XXX获取methods中的函数。
注:this.$emit('xx’)绑定全局事件,在methods中可以调用

二、在mpvue使用小程序的API
函数书写在methods外部,如果想要绑定小程序的一些特定函数,需要用@绑定小程序的函数名
例如:授权的按钮,小程序里会自带有getuserinfo的函数,在小程序中直接书写。
但在mpvue中可以用@绑定getuserinfo,然后在自己命名一个函数名,在其中写业务的代码
<button v-if="!hasUserInfo" open-type="getUserInfo" @getuserinfo="bindGetUserInfo"></button>

三、mpvue需要注意的

1、首先每个页面的,main.js不能删除,不能删除,不能删除(重要的事说3遍)
2、每增加一个页面需要在app.json中的pages中配置,页面的总的配置都在这里面,每次增加或删除文件需要重新启动
3、有错误语法的时候,在控制台会报错。但在小程序的调试器中不会显示,也不会有更新。
4、删除一些文件的时候,dist中有时不会删除,即使重启了(是不是百分百会出现不明)。需要手动删除dist再重启
5、一些不需要编译的文件不要放在src中,SRC中的文件都会被编译:

在SRC中的文件夹下如果只有一个.json文件会被编译成当前文件的配置(多个.json是否会被编译暂不清楚)。

6、mpvue中不可直接操作document,Vue中可以但使用mpvue的最终产物是小程序。

四、生命周期
1、在vue中模板渲染后就会执行mounted
2、在小程序中页面前台显示会调起onShow
3、后台隐藏会调取onHide
4、页面销毁调取onUnload

那么问题来了,如果只写mounted,当页面隐藏后在显示择不会重新触发mounted。
所以如果有隐藏后在显示那么需要调取onShow。
同理,如果,页面直接销毁(例如安卓的物理返回键),那么页面的数据也要对应的在onUnload中初始化,调取mounted

作者:雪舞原文地址:https://segmentfault.com/a/1190000017266139

%s 个评论

要回复文章请先登录注册