android 装饰器webview,angular 开发微信小程序及webview不刷新问题

angular 开发微信小程序 webview ChangeDetectionStrategy

使用 angular/cli 创建angular 项目

略

创建一个服务封装小程序接口以方便组件调用

ng g s service/wx

将 WxService 加入到模块(app.module.ts)的 providers 中

providers: [ WxService ]

在 WxService (wx.service.ts) 中封装小程序 APi

比如:

public getSign() {

// 将 wx.config 转为 Observable对象

return new Observable(sign => {

// 获取签名数据

this.http.get(`https://mydomain/wx/sign?url=${encodeURI(location.href.split('#')[0])}`).subscribe(r => {

wx.config({

// debug: true,

appId: 'xxxxx',

timestamp: r.timestamp,

nonceStr: r.noncestr,

signature: r.signature,

jsApiList: ['checkJsApi', 'chooseImage', 'getLocalImgData', 'miniProgram']

})

wx.ready((res) => {

sign.next(res)

})

wx.error((err) => {

this.messageService.next({ message: err })

})

})

})

}

在组件中使用本方法

this.wxService.getSign().subscribe(r=>{

// ...后续代码

})

其他接口均可参照此法, 改造成 Observable 或 Subject, 在组件中调用起来就方便多了

试图刷新问题

这时候你可能会碰到很吊诡的问题, 页面有时候不能实时刷新数据, 可能是小程序限制了更新频率使得 angular 不能愉快运行.

这个问题可以通过 ChangeDetectionStrategy / ChangeDetectorRef 解决

在组件装饰器中:

@Component({

//阻止视图更新

changeDetection: ChangeDetectionStrategy.OnPush,

})

在需要数据变动后手动更新视图

constructor(

private cdref: ChangeDetectorRef

) {}

myMethod(){

this.wxService.getSign().subscribe(r=>{

this.csref.markForCheck()

})

}

也可以定时刷新试图

ngOnInit(){

setInterval(() => {

this.cdref.markForCheck()

}, 100)

}