weex初探

前言

RN weex hippy taro

1.Weex与RN 比较

类型	React Native	Weex
思想	learn once, write anywhere	write once, run anywhere
扩展	不同平台可自由扩展	为了保证各平台的一致性，一次扩展得在各个平台都实现
组件丰富程度	除了自带的，还有js.coach上社区贡献的，还是比较丰富的	基本只有自带的10余种
调式	有专门的调试工具，chrome调试，较为完善	暂时log调试
性能	较好	较弱
上手难度	稍高	容易
核心理念	React	Vue
框架程度	较重	较轻
特点	适合开发整体App	适合单页面
社区	丰富，Facebook维护	略残念，目前托管apache
支持	Android、IOS	Android、IOS、Web
适应性	原生开学习成本低	Web开发学习成本低
JS引擎	JSCore	V8

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://blog.csdn.net/u012182...

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

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'),
   }

webConfig的入口和出口配置（web）

1.在configs/webpack.common.conf.js下修改getEntryFile()函数

    const getEntryFile = () => {
    
      const entryFile = path.join(vueWebTemp, config.entryFilePath)
      const routerFile = path.join(vueWebTemp, config.routerFilePath)
      fs.outputFileSync(entryFile, getEntryFileContent(helper.root(config.entryFilePath), routerFile));
      fs.outputFileSync(routerFile, getRouterFileContent(helper.root(config.routerFilePath)));
    
      const listFilePath = 'listEntry.js'
      const listFile = path.join(vueWebTemp, listFilePath)
      fs.outputFileSync(listFile, getEntryFileContent(helper.root(listFilePath), routerFile));
     
      return {
        index: entryFile,
        list: listFile,
      }
    }

2.在.temp文件下创建listEntry.js的webConfig入口文件。

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

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...