angular 開發微信小程式及webview不重新整理問題

裁縫發表於2018-05-09
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)
}

相關文章