Comments (6)
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
});
}
}
... ... ...
... ... ...
... ... ...
}
from typed-we-app.
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 😆
from typed-we-app.
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
from typed-we-app.
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
from typed-we-app.
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 😓
from typed-we-app.
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});
}
}
);
from typed-we-app.
Related Issues (14)
- 请问可否发布到npm HOT 4
- suggestion to merge to official site HOT 3
- UserInfo接口有误 HOT 1
- Update to 2.1.0 HOT 3
- How to return never when code uploadFile task onProgressUpdate callback function HOT 4
- 好像里面没有 Component 的声明? HOT 3
- 默认的lib,应该只包含 es2016 , 不应该包含DOM HOT 6
- 已关注,刚学ts,有实际使用的demo吗 HOT 2
- udpate to 2.3.0 HOT 7
- Report an error when declaring a variable with this.data HOT 4
- A rest parameter must be of an array type. HOT 9
- A runtime for Coding wechat MiniProgram in strong type. HOT 4
- interface UpdateManager 方法返回值未定义 HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from typed-we-app.