Weex 項目總結

在項目中，我覺得暫時有兩個地方需要總結一下，一個是weex內部的數據請求，一個是原生方法得調用。數據請求，在PC端調試的話會有跨域問題，在手機端沒有跨域問題。原生方法需要原生開發者根據 Weex文檔 寫一個module,再暴露出一個方法給前端開發調用。

1、數據請求

數據請求根據文檔引入該模塊

const stream = weex.requireModule('stream');

這時你就可以使用stream去發請求了，不過寫法要和官網上一樣纔可以，我試的時候是這樣的，如果你有其他的方法，麻煩留個鏈接，讓我也學習一下。官網的上的請求方式，太繁瑣，每次都需要手動引入，寫法不是很靈活，下面有一個我自己整理的

const stream = weex.requireModule('stream');
const modal = weex.requireModule('modal');
const platform = weex.config.env.platform.toLowerCase();
const storage = weex.requireModule('storage');
let apiRoot
if (platform === 'web' || platform === 'ios'|| platform === 'android '){
  apiRoot = window.location.origin
} else {
  if (process.env === 'test') {
    // 測試環境域名
    apiRoot = ''
  }
}
export default {
  install (Vue) {
    function http (OPTIONS = {}) {
        let DEFAULT_OPTION = {
            method: 'GET',
            type: 'text', // json、text、jsonp
            headers: {}
        };
      let options = Object.assign(DEFAULT_OPTION, OPTIONS);
      options.url = apiRoot + options.url;
      if (options.method === 'GET') {
        if (options.params) {
          let paramStr = Object.keys(options.params).reduce((acc, key) => `${acc}${key}=${options.params[key]}&`, '?')
          options.url = options.url.concat(paramStr).slice(0, -1)
        }
      } else if (options.method === 'POST') { 
        if (options.body) {
          options.headers['Content-Type'] = 'application/json';
        }
      }
      else if(options.method === 'DELETE'){
          if (options.body) {
              options.body = JSON.stringify(options.body);
              options.headers['Content-Type'] = 'application/json';
          }
      }
      return new Promise((resolve, reject) => {
        stream.fetch(options, (response) => {
          if (response.ok) {
              if(response.data !==''){
                  try {
                      response.data = JSON.parse(response.data);
                  }
                  catch(err) {
                      response.data = response.data;
                  }
              }
            resolve(response.data)
          } else {
             
            reject(response)
          }
        })
      })
    }
    Vue.prototype.$http = http
  }
}

你可以和在vue項目中一樣的方式去發請求。這裏需要注意下自己要定義後端返回的數據類型，根據自己需求自己去改。一些錯誤請求攔截也可以這裏進行處理。

2、原生方法的調用

weex.requireModule("event").showParams("hello Weex")

weex.requireModule("event").showParams("data",event =>{
    //對原生方法返回的參數進行處理
})

我本機是Windows系統，ios打包我找的原生同事幫的忙

暫時就總結到這裏，等這段時間忙完，再回來補充

有不足之處，請多多指教