proxy-mini
v1.0.2
Published
a proxy for mini program to use vue
Downloads
2
Readme
本工具用于在原生小程序中使用vue风格开发javascript逻辑
- 原生开发支持,开箱即用,无需打包工具
安装方法
npm install proxy-mini -save
使用方法
- 原生小程序开启npm支持模式
- 在页面js中(pages)require引用proxy-mini包
const proxyMini = require('proxy-mini')
- 通过调用proxyMini方法生成小程序页面配置对象
Page(proxyMini({
data: {},
method: {},
mounted: {}
}))
说明
- data, methods, computed, watch等配置项与vue2完全一致
- 生命周期钩子基于原生小程序页面生命周期封装,对应关系如下表
- 支持$watch,$nextTick API
- 支持小程序全部配置项
- 更新方式:
- 对象 使用路径赋值 如: this.obj.x = 1
- 数组 使用路径赋值 如:this.arr[0] = 1 , 数组支持 push, pop, unshift, shift, splice, sort, reverse 等更新方法, 如: this.arr.push(1)
| proxy-mini | 小程序 | 说明 | ---- | ---- | ---- | | beforeCreate | 无 | vue实例初始化开始 | created | 无 | vue实例初始化完成 | beforeMount | onLoad | 页面加载 | activated | onShow | 页面开始显示 | mounted | onReady | 页面加载完成 | deactivated | onHide | 切入后台 | destroyed | onUnload | 页面卸载
也可以直接使用小程序生命周期钩子, 会覆盖对应的vue生命周期钩子(如果同时声明)
示例
const proxyMini = require('proxy-mini')
const config = proxyMini({
data: function () ( // data 支持对象或函数类型
return {
name: 'meili',
info: {
time: '2021-12-10'
},
like: 'music'
}
),
computed: {
nickname() {
return this.name === 'meili' ? 'superMeili' : 'jack'
},
work: {
get() {
return this.nickname === 'superMeili' ? 'code man' : 'singer'
},
set() {
alert('can not change work')
}
},
},
watch: {
like() {
alert('like change!')
},
name: {
immediate: true,
handler: () => {
alert('name change!')
}
},
info: {
deep: true,
immediate: true,
handler: () => {
alert('info change!')
}
},
['info.time']() {
alert('time change!')
}
},
methods: {
handler() {
this.name = 'jack'
}
},
beforeCreate() {},
created() {},
beforeMount() {},
mounted() {},
activated() {},
deactivated() {},
destroyed() {},
})
Page(config)