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是异步