weex 開發小總結

關於weex 開發

1.安裝weex

• 在開發時，如果需要從頭開始部署項目，需要安裝weex 然後使用weex構建項目（此步驟在官方文檔中有，不再描述）

• 如果是多頁面開發，在初始化構建項目時，選擇不使用vue-router（使用weex create app時，會有此選項）

• 在創建項目的最後一步（weex create app的最後一步）會詢問你使用npm 安裝還是yarn安裝依賴，在此步驟時，我選擇npm或者yarn安裝依賴後都會出錯，所以我選擇第三項步進行安裝，然後進入文件目錄 執行npm i,自己手動安裝依賴

• 在安裝過程中出現的錯誤，多數都可以解決，讀取他的報錯信息，不會的就百度，百度看完前十頁，如果還解決不了就討論

2.關於weex 中樣式和標籤問題

• 樣式單位中目前只能使用 px

• image 標籤使用時一定要定義寬高，注意使用resize的屬性，並且image標籤只能夠使用px

3.關於weex stream發其post請求示例

• stream中get方法提交的參數必須組織出來放到url中

• stream中post方法提交的參數需要轉換成key=value&key=value的形式，可以使用utils/utils.js中的toParams方法來轉換

• post請求時注意添加 headers ,{"Content-Type": 'application/x-www-form-urlencoded'}

//post請求
stream.fetch({
        url:'/login/login',
        method:'post',
        type:'json',
        headers:{"Content-Type": 'application/x-www-form-urlencoded'},
        body:utils.toParams({    
            name: u,
            password: p,
            ip: '192.168.191.1',
            mac: '00:00:00:00:00',
            platform: 2,
            version: 'Version_0.1',
            address: '',
            device: SystemUtils.getExplore(),
            system: SystemUtils.getOS()
            })
      }, function(ret) {
        if(!ret.ok){
          // me.getJsonpResult = "request failed";
          console.log('chucuo')
        }else{
          console.log(JSON.stringify(ret));
          // me.getJsonpResult =  JSON.stringify(ret.data);
        }
      })

4.關於weex stream

• 進行了一次簡單的封裝，主要是簡單封裝了get方法和post方法，詳細代碼查看utils/req.js

• 將基礎的url單獨抽出來配置在utils/baseConfig.js，詳細代碼查看utils/baseConfig.js

• 將api接口 單獨抽出來配置在 utils/api.js，詳細代碼查看utils/api.js

• 一個簡單的調用示例demo

//post請求
//引入所需要的配置文件
import utils from '../utils/utils.js'
import $_http from '../utils/req.js'
import api from '../utils/api.js'
import SystemUtils from '../utils/SystemUtils.js'

//methods裏面的方法
postUserData(u,p){
    let that = this
    let url = api.LOGIN_URL //配置在api中的url
    let params = {
          name: u,
          password: p,
          ip: '192.168.191.1',
          mac: '00:00:00:00:00',
          platform: 2,
          version: 'Version_0.1',
          address: '',
          device: SystemUtils.getExplore(),
          system: SystemUtils.getOS()
    }
    let successFunc = function(d){ 
      let data = JSON.parse(d) 
      if(data.meta.success){
        console.log(data.data.uid)
        that.setItem('uid',data.data.uid,(e)=>{ 
          if(e.result==='success'){
            that.jumpPage()
          }
        })
      }
    }

    $_http.post(url,params,successFunc)

  }

//get請求
import $_http from "../utils/req.js";
import api from "../utils/api.js";

getTypeData() {
  let that = this;
  let url = api.TYPEONE_URL;
  let sccuessFunc = function(d) {
    let typeData = JSON.parse(d);
    that.typeDataList = typeData.data;
  };
  $_http.get(url, {}, sccuessFunc);
}

5. 本地圖片路徑

• 本地圖片路徑基於 web端運行時的相對路徑，如果運行的項目爲dist/index.js，在與dist同級下有個images的文件夾，那麼在index中引入圖片的路徑爲../images/*.png

6. 傳值問題

• 正向傳值：可以在navigator中直接push，如url: utils.getJumpBaseUrl("WorkPage.js?id=123"),在下個頁面使用以下方法收取參數var bundleUrl = this.$getConfig().bundleUrl;this.id = utils.getParameterByName("id", bundleUrl);

• 反向傳值：使用BroadcastChannel進行通信，
  資料

  //父頁面
  var self = this;
    // 定義BroadcastChannel，用於響應子頁面發來的廣播
    const broadcast = new BroadcastChannel('testChannel')
    broadcast.onmessage = function (event) {  
        self.title = event.data;
    }

  //子頁面，發送消息，並pop
   goBack(){
      // 發送通知消息
      const broadcast= new BroadcastChannel('testChannel');
      broadcast.postMessage('this is amessage.');
      navigator.pop()
    }

7. stroage問題

• stroage.getItem是異步