# weapp-enhance

**Repository Path**: hellosanbao/weapp-enhance

## Basic Information

- **Project Name**: weapp-enhance
- **Description**: 小程序增强工具
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-10-20
- **Last Updated**: 2022-01-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

### 引用 

#### 安装`weapp-enhance`
```shell
$ npm i weapp-enhance
```
#### 在`app.js`中使用
```js
import weappEnchancer from 'weapp-enhance'
weappEnchancer({
  isObserverData:true // 是否开启响应式功能（如：this.data.xxxx = xxx页面即可更新）
})
App({
  onLaunch(){
    // luanch event
  }
})
```

#### 预设方法和属性

`weapp-enhance`允许给`App`、`Page`、`Component`预设方法和属性，预设的方法和属性将会与使用处的方法合属性进行merge
```js
//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数据监听

简单的例子
```js
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` 中使用


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

```