Example

[jhcao23]

Hi @emeryao,

Do you have an example about how to use interface Page in coding?

Thanks,
John

[emeryao]

detail-page.ts :

let detailPage: WeApp.Page;
Page({
    onload: ()=>{
        // store the page obj
        detailPage = this; 
    },
    onSomeClick: ()=>{
        // now you can get intellisence from WeApp.Page from the page interface when pressing the dot key
        detailPage.setData({foo:'bar'}); 
    }
});

hope that will help you
Thanks for your issue @jhcao23
nice to see you here 😆

[jhcao23]

I see I see, it works! Great!
I'm not an expert on JavaScript. Please allow me to ask another stupid question.
I personally prefer to write class in typescript.
If I write a class like below, how can I take advantage of the ts definition of WeApp.Page and WeApp.PageParam?:

export class ProfilePage implements PageParam, Page {

    setData: (data: any, callback?: Function) => void;

    /**
     * 页面的初始数据
     */
    data: {
        imageUrl: null
    };

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options): void {
        let that = this;
        if(getApp().globalData.userInfo) {
            that.setData({
                imageUrl: getApp().globalData.userInfo.avatarUrl
            });
        }
    }
... ... ...
... ... ...
... ... ...
}

Thanks,
John

[emeryao]

export class ProfilePage implements PageParam, Page {

    setData: (data: any, callback?: Function) => void;

    /**
     * 页面的初始数据
     */
    data: {
        imageUrl: null
    };

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options): void {
        let that: WeApp.Page = this; // <---------- here is the trick 
        if(getApp().globalData.userInfo) {
            that.setData({
                imageUrl: getApp().globalData.userInfo.avatarUrl
            });
        }
    }
... ... ...
... ... ...
... ... ...
}

[jhcao23]

Hi @emeryao ,

What I really meant is how to use the class definition in some page ts file like your detail-page.ts or my profile.ts...

So after finishing up the ProfilePage.ts file, I will write the profile.ts file for Profile Page.
Then the profile.ts wants to use the ProfilePage class:

let profilePage: ProfilePage = new ProfilePage();
Page(profilePage);

As Page take a PageParam as parameter input and my ProfilePage implements PageParam,
so I guess that passing the profilePage to the Page function as parameter should be fine in theory; however, I'm not quite sure if this is the correct method to use the ProfilePage class.
Please comment or advise.

Thanks,
John

[emeryao]

It spend me a week to understand your requirement up there
but I'm sorry I can't so I couldn't give your any suggestions 😓

[jhcao23]

I know its a little bit tweak but its really simple.
Let's say I want to create a profile page, so I have a profile folder and a few empty files inside it:
profile.ts profile.json profile.wxml profile.wxss, where profile.ts can generate profile.js automatically in WebStorm. Then I create another file ProfilePage.ts which is defined like above thread:

export class ProfilePage implements PageParam, Page {
    setData: (data: any, callback?: Function) => void;
    data: {  imageUrl: null };
    onLoad(options): void {
        let that: WeApp.Page = this;
        if(getApp().globalData.userInfo) {
            that.setData({
                imageUrl: getApp().globalData.userInfo.avatarUrl
            });
        }
    } 
    ... ... ...
}

Now I need to write the profile.ts file. So then I want to use the ProfilePage and map the defined functions to the profile.ts maybe like this:

// profile.js
import {ProfilePage} from './ProfilePage';
const profilePage = new ProfilePage();
// deconstruction does not work so sad
// const {...ddd} = profilePage;
// console.log('ddd', ddd);
// Page({...ddd});

Page({
    data: profilePage.data,
    onLoad: profilePage.onLoad,
    takeNewPhoto: profilePage.takeNewPhoto,
    takePhotosSuccess: profilePage.takePhotosSuccess,
    takePhotoSuccess: profilePage.takePhotoSuccess,
    cameraError: profilePage.cameraError,
    uploadPhoto: profilePage.uploadPhoto,
    uploadPhotoSuccess: profilePage.uploadPhotoSuccess
});

I found this way of writing works but that's a lot of typing and the deconstruction way doesn't work.

The reason I write both profile.ts and ProfilePage.ts files is because I personally don't like the traditional way to write the profile.ts, which doesn't implement Page or PageParam so doesn't have strict and strong types and, its functions are separated by comma , (I really don't like the comma and I prefer to write everything in a normal class first like ProfilePage.ts):

Page(
    {
        data: { imageUrl: null },
        onLoad(options): void {
            let that = this;
            if (getApp().globalData.userInfo) {
                that.setData({
                    imageUrl: getApp().globalData.userInfo.avatarUrl
                });
            }
        },
        takeNewPhoto(): void {
            wx.chooseImage({
                count: 1,
                sizeType: ['original'],
                sourceType: ['album', 'camera'],
                success: this.takePhotosSuccess
            });
        },
        takePhotosSuccess(res?: ChooseImageSuccess): void {
            if (res) {
                console.log('tempImagePage', res.tempFilePaths);
                this.setData({
                    imageUrl: res.tempFilePaths[0]
                });
                this.uploadPhoto(res.tempFilePaths[0]);
            }
        },
        uploadPhoto(tempImagePath: string): void {
            uploadPhoto(tempImagePath, this.uploadPhotoSuccess);
        },
        uploadPhotoSuccess(res?: WeApp.HttpResponse): void {
            console.log('uploadPhotoSuccess', res);
            this.setData({imageUrl: res!!.data});
        }
    }
);