之前也嘗試基於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優化。