基于TypeScript类Class开发微信小程序页面Page_typescript onload option

之前也尝试基于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优化。

20200730 1:18

最近换了台电脑，重新装了下开发环境，所以新建了一个TS小程序工程，看看有没有什么新套路，果然有惊喜：

可以直接用类写页面了： 

20200810

最近又开始搞前后端框架升级，移动端跨端方案估计还是得找一套大厂现成的，京东的taro是首选，uniapp之前也用过了。

小程序官方这套，对于单独开发小程序一端来说，完全没问题。现在感觉比较烦的还是setData，之前也尝试过监听赋值事件，自动setData，后来没深入弄下去，今天在网上看到一段代码，突然又回想起来这个：