浅谈使用mpvue开发小程序需要注意和了解的知识点

2023-09-12 12:19:05 184

一、实例生命周期

除了Vue本身的生命周期处，mpvue还兼容了小程序的生命周期，这部分生命周期的钩子来源于微信小程序的Page,除特殊情况外，不建议使用小程序的生命周期钩子。

app部分：

onLaunch，初始化
onShow，当小程序启动，或从后台进入前台显示
onHide，当小程序从前台进入后台

page部分：

onLoad，监听页面加载
onShow，监听页面显示
onReady，监听页面初次渲染完成
onHide，监听页面隐藏
onUnload，监听页面卸载
onPullDownRefresh，监听用户下拉动作
onReachBottom，页面上拉触底事件的处理函数
onShareAppMessage，用户点击右上角分享
onPageScroll，页面滚动
onTabItemTap,当前是tab页时，点击tab时触发（mpvue0.0.16支持）

用法示例：

newVue({
data:{
a:1
},
created(){
//`this`指向vm实例
console.log('ais:'+this.a)
},
onShow(){
//`this`指向vm实例
console.log('ais:'+this.a,'小程序触发的onshow')
}
})
//=>"ais:1"

注意点：

不要在选项属性或回调上使用箭头函数，比如created:()=>console.log(this.a)或vm.$watch('a',newValue=>this.myMethod())。因为箭头函数是和父级上下文绑定在一起的，this不会是如你做预期的Vue实例，且this.a或this.myMethod也会是未定义的。
微信小程序的页面的query参数是通过onLoad获取的，mpvue对此进行了优化，直接通过this.$root.$mp.query获取相应的参数数据，其调用需要在onLoad生命周期触发之后使用，比如onShow等

二、模板语法

不支持纯-HTML

小程序里所有的BOM／DOM都不能用，也就是说v-html指令不能用。

不支持部分复杂的JavaScript渲染表达式

我们会把template中的{{}}双花括号的部分，直接编码到wxml文件中，由于微信小程序的能力限制(数据绑定)，所以无法支持复杂的JavaScript表达式。

目前可以使用的有+-*%?:!=====><[].，剩下的还待完善。

不支持过滤器

渲染部分会转成wxml，wxml不支持过滤器，所以这部分功能不支持。

不支持函数

不支持在template内使用methods中的函数。

列表渲染

全支持官方文档：列表渲染

只是需要注意一点，嵌套列表渲染，必须指定不同的索引！

事件处理器

在input和textarea中change事件会被转为blur事件。

踩坑注意：

列表中没有的原生事件也可以使用例如bindregionchange事件直接在dom上将bind改为@
@regionchange,同时这个事件也非常特殊，它的eventtype有begin和end
两个，导致我们无法在handleProxy中区分到底是什么事件，所以你在监听此类事件的时候同时监听事件名和事件类型既

小程序能力所致，bind和catch事件同时绑定时候，只会触发bind,catch不会被触发，要避免踩坑。

事件修饰符

.stop的使用会阻止冒泡，但是同时绑定了一个非冒泡事件，会导致该元素上的catchEventName失效！

.prevent可以直接干掉，因为小程序里没有什么默认事件，比如submit并不会跳转页面

.capture支持1.0.9

.self没有可以判断的标识

.once也不能做，因为小程序没有removeEventListener,虽然可以直接在handleProxy中处理，但非常的不优雅，违背了原意，暂不考虑

其他键值修饰符等在小程序中压根没键盘，所以。。。

三、组件

有且只能使用单文件组件（.vue组件）的形式进行支持。其他的诸如：动态组件，自定义render，和字符串模版等都不支持。原因很简单，因为我们要预编译出wxml。

详细的不支持列表：

暂不支持在组件引用时，在组件上定义click等原生事件、v-show（可用v-if代替）和classstyle等样式属性(例：样式是不会生效的)，因为编译到wxml，小程序不会生成节点，建议写在内部顶级元素上。
Slot（scoped暂时还没做支持）
动态组件
异步组件
inline-template
X-Templates
keep-alive
transition
class
style

小程序组件

mpvue可以支持小程序的原生组件，比如：picker,map等，需要注意的是原生组件上的事件绑定，需要以vue的事件绑定语法来绑定，如bindchange="eventName"事件，需要写成@change="eventName"

示例代码：



当前选择:{{date}}

四、常见问题

1.如何获取小程序在pageonLoad时候传递的options

在所有页面的组件内可以通过this.$root.$mp.query进行获取。

2.如何获取小程序在apponLaunch/onShow时候传递的options

在所有的组件内可以通过this.$root.$mp.appOptions进行获取。

3.如何捕获app的onError

由于onError并不是完整意义的生命周期，所以只提供一个捕获错误的方法，在app的根组件上添加名为onError的回调函数即可。如下：

exportdefault{
//只有app才会有onLaunch的生命周期
onLaunch(){
//...
},

//捕获apperror
onError(err){
console.log(err)
}
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

浅谈使用mpvue开发小程序需要注意和了解的知识点

热门推荐

随机推荐