weex初探

jiezi

5 年前

类型	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

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

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

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

错误：

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

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

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

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

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

参考 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('/')

修改 webpack.common.conf.js 文件

const weexEntry = {

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

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

扩展：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…

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

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

weex初探

前言

1.Weex 与 RN 比较

2.weex 性能

3. 参考

一、问题

1. 安装

2. 编译失败

3. 调试

4. 编译报错

5. 多页面编译

5. 页面

二、weex 与原生交互

三、常用命令

四、参考