微信小程序对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:{
    
    }
})