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打包我找的原生同事帮的忙

暂时就总结到这里，等这段时间忙完，再回来补充

有不足之处，请多多指教