weapp-enhance
v1.0.7
Published
微信小程序增强工具
Downloads
2
Maintainers
Readme
引用
安装weapp-enhance
$ npm i weapp-enhance
在app.js
中使用
import weappEnchancer from 'weapp-enhance'
weappEnchancer({
isObserverData:true // 是否开启响应式功能(如:this.data.xxxx = xxx页面即可更新)
})
App({
onLaunch(){
// luanch event
}
})
预设方法和属性
weapp-enhance
允许给App
、Page
、Component
预设方法和属性,预设的方法和属性将会与使用处的方法合属性进行merge
//app.js
//给Page的onLoad方法预设一些动作
weappEnchancer({
Page:{
data:{
presetMessage:'预设的data属性'
},
onLoad(){
console.log('通过weappEnchancer预设的onLoad事件')
}
}
})
//somepage.js
Page({
data:{
pageMessage:'page使用处的data属性'
},
onLoad(){
console.log('使用处的onload事件',this.data.presetMessage,this,data.pageMessage)
}
})
// 打印结果结果
// ->通过weappEnchancer预设的onLoad事件
// ->使用处的onload事件,预设的data属性,page使用处的data属性
增强功能
- 数据响应式
- computed计算属性
- watch数据监听
简单的例子
Page({
data:{
name:'张三'
},
computed:{
cname(){
return this.data.name + 'change' //this.data.name改变时,cname也会更新
}
},
watch:{
name(new_val,old_val){
//this.data.name变化时,该监听事件执行
}
},
onLoad(){
this.data.name = '李四' //页面更新
}
})
在单个页面使用
某些场景我们不需要让整个页面都添加增强功能,例如已存在的老项目,仅仅是想在新增的页面使用增强功能,针对这种场景,提供了一个局部使用的接口
initEnhance(PageInstance[,isObserverData])
第一个参数为页面实例,第二个参数为是否需需要响应式功能,
局部api提供与全局api一样的功能,但是只对当前页面或组件生效
例如:在页面testPage
中使用
//testpage.js
import { initEnhance } from 'weapp-enhance'
Page({
onLoad(){
initEnhance(this,true)
this.data.name = '李四' //页面更新
},
data:{
name:'张三'
},
computed:{
cname(){
return this.data.name + 'change' //this.data.name改变时,cname也会更新
}
},
watch:{
name(new_val,old_val){
//this.data.name变化时,该监听事件执行
}
},\
})