微信小程序对page页和component组件采用es6的class创建基类实现公共方法和数据的继承

为了给页面或者组件添加统一的数据或者方法，不用每个页面都去写一遍，可以方便直接的调用数据或者方法；实质上是修改Page(obj) 或者Component(obj) 中obj；往obj中的data中添加属性数据；往obj或者obj.methods中添加方法可以直接通过this来获取数据或调用方法

在utils文件下新建baseClass文件夹，在该文件下新建三个基类js

 base.js文件  最基础的类

const api = {a:1,b:2} const storage = {c:3,d:4} //方法名称 const FnName = ['fn1','fn2'] class base{ constructor(obj,type){ this.name = '类名是base' //添加公共数据 obj['data'].api = api; obj['data'].storage = storage; //添加公共方法 this.addPublicFn(obj,type); } addPublicFn(obj,type){ FnName.forEach(fn=>{ if(type==='page'){ obj[fn] = this[fn]; }else if(type==='component'){ obj['methods'][fn] = this[fn]; } }) }; fn1(){ console.log('我是base类的方法fn1') }; fn2(){ console.log('我是base类的方法fn2') }; } module.exports = base

 page.js  继承base类中的熟悉和方法

const base = require("./base.js"); //方法名称 const FnName = ['fn3'] class myPage extends base{ constructor(obj){ super(obj,'page') //给myPage类添加统一私有数据 obj['data']['abc'] = 'abc' //给myPage类添加统一私有方法 this.addPagePublicFn(obj) console.log(obj) Page(obj) } addPagePublicFn(obj){ FnName.forEach(fn=>{ obj[fn] = this[fn]; }) }; fn3(){ console.log('我是myPage类的方法fn3') }; } module.exports = myPage;

 component.js  继承base类的熟悉和方法

const base = require("./base.js"); //方法名称 const FnName = ['fn4'] class myComponent extends base{ constructor(obj){ super(obj,'component') //给myComponent类添加统一私有数据 obj['data']['def'] = 'def'; //给myComponent类添加统一私有方法 this.addComponentPublicFn(obj) console.log(obj) Component(obj); }; addComponentPublicFn(obj){ FnName.forEach(fn=>{ obj['methods'][fn] = this[fn]; }) }; fn4(){ console.log('我是myComponent类的方法fn4') }; } module.exports = myComponent;

在page页面和component中使用自定义的类 new一个新实例

//page const myPage = require("../../utils/baseClass/page.js"); new myPage({ data:{ } }) //component const myComponent = require("../utils/baseClass/component.js"); new myComponent({ data:{ } })