wx-jumbo（wx-summer升级）

一个小程序语法糖框架，基于Component，封装了全局混入的方法，涉及存储、时间、事件及一些常用的方法；

用法

1、安装 $ npm i wx-jumbo -S
2、npm构建（微信开发工具中——构建npm）
3、具体使用与Vue类似

const { xComponent } = require('wx-jumbo')
const { getStoreBindings } = require('wx-jumbo')

import { store } from './store'

xComponent({
  props:{},
  mixins:[],
  data:{},
  beforeCreate(){},
  created(){},
  mounted(){},
  destroyed(){},
  relations:{},
  watch:{},
  storeBindings:getStoreBindings(store,['testA','testB'])  // mobx状态管理
})

全局混入的方法（xComponent中可以直接this调用）

| 方法名称 | 说明 |
|---------|-------| | $emit | emit事件 | | $set | setData的promise写法 | | $getRect | boundingClientRect的promise写法 | | $setItem | 储存 | | $getItem | 获取存储 | | $deleteItem | 删除指定存储数据 | | clearItem | 清空存储数据 | | $addEventListener | 添加事件监听 | | $removeEventListener | 移除事件监听 | | $dispatch | 发布事件 | | $debounce | 防抖 | | $throttle | 节流 | | $generateGUID | 生成n位唯一的GUID | | $deepClone | 深拷贝 | | $hideIdCard | 身份证号码或者手机号码脱敏 |

封装了wx.request请求

1、新建req.js文件

const { _axios } = require('wx-jumbo')

const service = _axios.create({
  baseURL:'基地址(换成你自己的)'
})

service.interceptors.request.use(config=>{
  // 根据需要，在header字段中添加所需内容
  config.header['Authorization'] = '-------------'  
  ......
  return config
})

module.exports = service

2、新建api.js文件

const service = require('./req.js')
const { inject } = require('wx-jumbo)

module.exports = function () {
  inject('sendSms',(phoneNumber)=>{
    const url = `/user/sendVerificationCode`
    return service.post(url, {
      "phone_number": phoneNumber
    })
  })
  ......
}
// 在页面中可以const res = await this.$sendSms(13366668888)这样使用

目前支持的访问类型： | 类型 | 使用 | |------|------| | post | service.post | | get | service.get | | put | service.put | | delete | service.remove |

inject

全局注入方法，会自动添加$符号，全局可以使用this调用
例如：
1、上面注入接口的用法
2、注入普通util方法
新建utils.js文件

const { inject } = require('wx-jumbo')

module.exports = function () {
  inject('jumpTo', (url, obj) =>
  wx.navigateTo({
    url,
    events: obj
  }))
}

注意：inject方法之后，还不能立即生效，需要在app.js中，引入执行，才能全局生效使用

const { xComponent } = require('wx-jumbo')
const startInject = require('api.js')
const startInstall = require('utils.js')

startInject()
startInstall()

// 这样上面注入的jumoTo、sendSms才能生效
// 在下面的xComponent中可以直接this.$sendSms()、this.$jumpTo()这样调用
xComponent({
  data:{},
  created(){},
  mounted(){},
  methods(){},
  ......
})

使用mobx

1、在任意目录下新建store.js文件  
const {createMobxStore}=require('wx-jumbo')
export const store = new createMobxStore({
  state:{
    testA:'testA',
    testB:'testB'
  },
  actions:{
    setTestA(newValue){
      this.testA = newValue
    }
  }
})
2、在页面中
const {getStoreBindings}=require('wx-jumbo')
import {store} from './store'

xComponent({
  storeBindings:getStoreBindings(store,['testA','testB'])
})

说明

1、如果在项目中使用behavior，那么生命周期钩子，暂时只能使用小程序原生的，不能使用wx-jumbo中的
| wx-jumbo | 原生钩子 | |------|------| | beforeCreate | created | | created | attached | | mounted | ready | | destroyed | detached |

附录

v1.1.0：添加_axios网络请求，xComponents中使用方法与axios相似，直接 _axios.get(url,params)，返回是一个promise，返回结果已对正确码200或0以及错误码进行了处理，不需要再重复判断
v1.2.4：新增mobx状态管理 v1.2.5：修改mobx状态管理bug