weapp-enhance

引用

安装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变化时，该监听事件执行
    }
  },\
})