基於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優化。