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) }