基于TypeScript类Class开发微信小程序页面Page

之前也尝试基于ts class开发小程序页面，失败了，今天中午不死心，又试了下，摸索出一种方式，大家稍微参考下，主要是想遍历new出来的对象所有属性，再构建一个var obj = {}字面对象：

构造函数似乎用不了，回头再研究研究，目前这样，已经很惊喜了，哈哈！

具体还有什么坑，后面发现了再更新上来。

// import { IMyApp } from "../../app";

import { AppServiceProvider } from "../../providers/app-service/app-service";
import { AlertServiceProvider } from "../../providers/alert-service/alert-service";
import { WxServiceProvider } from "../../providers/wx-service/wx-service";
import { WxBindRes } from "../../providers/constants";

export class MallPage{
    data = {
        showBoxIndex : 1
    }
    
    // constructor(public appService: AppServiceProvider) { }

    /**
     * 生命周期函数--监听页面加载
     * options: any
     */
    onLoad(options: any) {
        console.log(options);
        wxService.setPageTitle("首页");
    }

    /**
     * 页面跳转
     */
    toPage(e: WxBindRes) {
        appService.push(e.currentTarget.dataset.page);
    }

    /**
     * 显示alert
     */
    showAlert() {
        alertService.alert("提示信息");
    }
}

// 关键代码如下

const page:any = new MallPage();

const pageObj:any = {};

for (let prop of Object.getOwnPropertyNames(page)) {
    pageObj[prop] = page[prop];
}

const ps:any = MallPage.prototype;

for (let prop of Object.getOwnPropertyNames(ps)) {
    if (prop !== 'constructor'){
        pageObj[prop] = ps[prop];
    }
}


Page(pageObj);

20191106

继续优化，data：

// import { IMyApp } from "../../app";

import { AppServiceProvider } from "../../providers/app-service/app-service";
import { AlertServiceProvider } from "../../providers/alert-service/alert-service";
import { WxServiceProvider } from "../../providers/wx-service/wx-service";
import { WxBindRes } from "../../providers/constants";

const appService = new AppServiceProvider();
const alertService = new AlertServiceProvider();
const wxService = new WxServiceProvider();


export class MallPage {
    showBoxIndex = 1;
    user:{name:string} = {name:'ty'};

    // constructor(public appService: AppServiceProvider) { }

    /**
     * 生命周期函数--监听页面加载
     * options: any
     */
    onLoad(options: any) {
        console.log(options);
        wxService.setPageTitle("首页");
    }

    /**
     * 页面跳转
     */
    toPage(e: WxBindRes) {
        appService.push(e.currentTarget.dataset.page);
    }

    /**
     * 显示alert
     */
    showAlert() {
        alertService.alert("提示信息");
    }
}

// 关键代码如下

const page: any = new MallPage();

const pageObj: any = {
    data:{}
};

for (let prop of Object.getOwnPropertyNames(page)) {
    pageObj.data[prop] = page[prop];
}

const ps: any = MallPage.prototype;

for (let prop of Object.getOwnPropertyNames(ps)) {
    if (prop !== 'constructor') {
        pageObj[prop] = ps[prop];
    }
}

Page(pageObj);

<view class="container">
    <view class="page-body">
        <button bindtap="toPage" data-page="../login/login">跳转登录{{showBoxIndex}}</button>
        <button bindtap="showAlert">显示弹框{{user.name}}</button>
    </view>
</view>

杯具，setData不生效！

    changeName(){
        const that:any = this;

        // 无效！
        // this.user.name = 'zhl'
        // that.setData!(this.user);

        // 有效！
        that.setData!({user:{name:'zhl'}});

        // 有效！
        this.user.name = 'zhl'
        that.setData!({user:this.user});
    }

20191111

直接使用“赋值”的方式创建方法：

//...

const appService = new AppServiceProvider();
const alertService = new AlertServiceProvider();
const wxService = new WxServiceProvider();

class HomePage{
    data = {
        name:'ty'
    }

    /**
     * 生命周期函数--监听页面加载
     * options: any
     */
    onLoad = function(options: any) {
        console.log(options);
        wxService.setPageTitle("首页");
    }

    /**
     * 页面跳转
     */
    toPage  = function(e: WxBindRes) {
        appService.push(e.currentTarget.dataset.page);
    }

    /**
     * 显示alert
     */
    showAlert = function() {
        alertService.alert("提示信息");
    }
}

Page(new HomePage());

20200212

最近非常时期，在家办公快两周了，这几天公司小程序项目又多了起来，so...

无意中看到一个小程序开源项目，里面支持类的写法就是直接 new ，当时我就纳闷了，怎么我当年new的时候不行咧！

后来仔细看了下人家的源代码，发现一个惊天秘密，tsconfig.json配置的编译参数有差异，我配置的target是ES6，而人家配置的是es5！测试后发现果真是这个问题，配置改成es5之后，直接new就生效了，编译后的js直接操作了prototype（至今对es5、es6还是很马虎。。。）：

// tsconfig.json

{
  "compilerOptions": {
    "module": "CommonJS",
    "target": "ES6",
  }
}

// 改为：

{
  "compilerOptions": {
    "module": "CommonJS",
    "target": "es5",
  }
}

// page 

export class IndexPage {
  data = {
    res:'target改成es5即可！！！'
  }

  onLoad(options: any) {
    console.log(options);
  }

  showAlert() {
    
  }
}

Page(new IndexPage());

data的写法还不是我最终想要的，我想要的是不要data，可以配合上面20191106更新的data优化。