前言

1.Weex 与 RN 比较

2.weex 性能

3. 参考

1. IMWeb Conf2018 前端大会: Weex 内核的原理和演进方向:
   https://www.codercto.com/a/32…
   http://www.itdks.com/Course/d…
2. Weex 在饿了么前端的实践
   https://www.jianshu.com/p/e14…

一、问题

1. 安装

以下针对于 iOS，编译和运行时报错处理：

1. 添加特定平台的项目
   weex platform add ios
2. 安装 cocopods
   $ sudo gem install cocoapods
3. 终端 cd 到 ios 项目，运行 pod install 或者 pod update
4. 安装好后在执行
   $ weex run ios

2. 编译失败

错误：

./src/index.vue
Module build failed: Error: 

Vue packages version mismatch:

- vue@2.5.21 (/Users/admin/.wx/modules/node_modules/_vue@2.5.21@vue/dist/vue.runtime.common.js)
- vue-template-compiler@2.6.10 (/Users/admin/.wx/modules/node_modules/_vue-template-compiler@2.6.10@vue-template-compiler/package.json)

解决：

$ weex repair @weex-cli/core@latest
$ weex update @weex-cli/doctor
$ weex doctor

3. 调试

运行 weex debug 命令启动调试控制台, 必须使用 chrome 浏览器调试

4. 编译报错

运行 npm run dev，出现 eslint 报错。
解决：在 config.js 文件中，useEslint: false,

5. 多页面编译

https://www.jianshu.com/p/ae1…

Weex 默认是单页面效果，首先，Weex 真正运行的是，通过 entry.js 作为入口文件文件，通过 webpack，将.vue 文件打包成 index.js 进行使用。多页面的重点，就是将独立页面的.vue 文件，生成多个 js 文件。

1. 参考 entry.js 文件，创建一个 listeEntry.js，作为 liste.vue 的入口，用于 webpack 生成 list.js 页面。

   const {router} = require('./router')
      const List = require('@/list.vue')
      
      /* eslint-disable no-new */
      new Vue(Vue.util.extend({el: '#root', router}, List))
      
      router.push('/')
   
   
   

2. 修改 webpack.common.conf.js 文件

   const weexEntry = {

    'index': helper.root('entry.js'),
    'list': helper.root('listEntry.js'),
   }
   

5. 页面

Weex 仅有 Flexbox 布局，text 无法嵌套，难以实现长文当中样式的混合。
没有 Cookies. 只能用 storage 来完成对应信息的存储。

二、weex 与原生交互

扩展：https://weex.apache.org/zh/gu…

const vvModule = weex.requireModule('VVWeexModule');    

vvModule.setGlobalCallback( res => {
    this.info = res;
    console.log(JSON.stringify(res));
        
})；vvModule.logInNative('aaa');

三、常用命令

Weex Toolkit：https://weex.apache.org/zh/to…

1. npm run server:web 端的预览
2. npm run dev : 实时的压缩编译
3. $ weex compile [资源文件] [产物地址] <options> : 编译
4. $ weex preview [file | folder] <options> : 编译及预览
5. $ weex debug <file|folder> : 调试

四、参考

1. weex 开发小记：https://blog.csdn.net/mht1829…
2. https://www.jianshu.com/p/ae1…
3. 使用 Devtools 调试 Weex 页面 https://www.cnblogs.com/hehey…