最近几天 接触了 小程序 新出的 框架Donut
连带着JAVA 和 一堆新的东西 都学习下 顺便看了react Native
因为 要做一个 退出登录 和 注销的功能
在前一段时间 就想着 给原生小程序增加这两个功能也就摆上日程
昨天完成了 MIXIN
贴几个图 如果有啥问题 各位大神可以多提建议
也可以 直接粘了 去使用 嘿嘿
const lifeTimeKey = [
'onLoad',
'onReady',
'onShow', ,
'onHide', ,
'onUnload', ,
'onPullDownRefresh', ,
'onReachBottom', ,
'onShareAppMessage',
'onPageScroll'
];
const OriginData = ['data'];
const self_circle = ['computed', 'watch'];
export default function (mix) {
const that = this;
mix.forEach(item => {
console.log(item)
Object.keys(item).forEach(key => {
if (lifeTimeKey.includes(key)) {
let p = that[key];
that[key] = function (opt = {}) {
p && typeof p === 'function' && p.call(this, opt);
item[key].call(this);
}
} else if (OriginData.includes(key)) {
that[key] = Object.assign({}, item[key], that[key]);
that['$options'] = { ...that[key] };
} else {
that[key] = item.key
}
})
})
return that
}
import $Store from './store';
import minx from './minx';
import merge from './mixin';
/**
* 全局混入
* @param {Object} app
*/
export let Mixin = function (app) {
const Native = Page;
let store = new $Store(app);
app.globalData.store = store;
const keyList = app.globalData.store._keyList;
/**
* 重构PAGE
*/
Page = (config) => {
let _onLoad = config.onLoad;
let _onShow = config.onShow;
config.onLoad = function (opt) {
store.init(this);
typeof _onLoad === 'function' && _onLoad.call(this, opt);
}
/**
* 1 . 无法遍历 访问器的属性 也就是 当你设置了get set 就无法通过循环 获取到他的属性
*/
config.onShow = function () {
keyList.forEach(key => {
this.setData({
[`$store.state.` + key]: store.state[key]
})
})
typeof _onShow === 'function' && _onShow.call(this);
}
config = minx.call(config, store);
if (!Array.isArray(config.mixin)) {
return Native(config)
}
const Mix = config.mixin;
delete config.mixin;
config = merge.call(config, Mix);
Native(config);
}
}
最后在App中 调用初始化 修改Page的方案 每一个页面就都使用了
构建MIXIN 完成 ...