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