angular 开发微信小程序及webview不刷新问题

我不是女神ヾ 2022-02-27 01:40 303阅读 0赞

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