當前位置:編程學習大全網 - 源碼下載 - 怎麽把AngularJS開發的頁面遷移到微信小程序

怎麽把AngularJS開發的頁面遷移到微信小程序

把AngularJS開發的頁面遷移到微信小程序

目錄遷移

1、每個子模塊頁面換成Pages目錄下的壹個子目錄,目錄命名就是原子模塊名。

2、原來的通用css、image、fonts等靜態資源統壹移到resource目錄下,需要使用時,對於css樣式文件,在對應子模塊的wxss文件首部通過import命令引入;

替換規則

1、div需統壹轉換成View;

2、ng-show統壹轉換為wx:if;

3、ng-click統壹轉換為bindtap;

4、ng-repeat統壹用wx:for替換;

5、ng-class中的樣式選擇性綁定可以直接把條件綁定語句嵌入class屬性;

js代碼

模塊級代碼遷移: 可將模塊級作用域使用的通用邏輯搬到app.js中,通過app對象來引用;或者定義壹個util模塊,來做動態引入; 對於原生與h5交互時用到的自定義事件,需要根據具體場景做處理。

子模塊級代碼遷移:

可將Angular子模塊代碼直接遷移到小程序對應Page對象中,當然,對於Angular特定語法的$***對象(例如$scope、$rootscope)的操作,需要做全局替換,替換原則是:

1、$scope:與Page對象同生命周期內的$scope,可以直接替換成this;而對於非同壹生命周期的(最常見的即是各種callback回調函數),需要將Page對象在方法外做引用保存(例如var self=this),然後在回調函數中使用。

2、$rootScope:推薦放入app對象中引用,或者自定義通用模塊,然後動態引入;

3、數據模型:各頁面中建立的數據模型,直接放入***.json文件中,如果涉及Angular特定語法的操作,可參考上述兩點的做法進行替換;

4、jsonp請求:將jsonp請求統壹替換成wx.request請求,只是原來的鏈式寫法要換成參數型寫法;

5、子模塊間的頁面跳轉,$state.go統壹替換成wx.navigateTo或wx.navigateBack;

  • 上一篇:婚貝請柬分享到朋友圈怎麽才能沒有婚貝網標識
  • 下一篇:戚祖勝的資料
  • copyright 2024編程學習大全網