weex系列抄之一---环境搭建

文章目录
  1. 1. React Native 和 Weex
  2. 2. 入门手册
  3. 3. Weex系列工具
    1. 3.0.1. weex-toolkit
    2. 3.0.2. weexpack
    3. 3.0.3. playground
    4. 3.0.4. code snippets
    5. 3.0.5. weex-devtool
  • 4. Weex Market插件
  • 5. 参考
  • React Native 和 Weex

    自从Weex出生的那一天起,就无法摆脱和React Native相互比较的命运。React Native宣称“Learn once, write anywhere”,而Weex宣称“Write Once, Run Everywhere”。Weex从出生那天起,就被给予了一统三端的厚望。React Native可以支持iOS、Android,而Weex可以支持iOS、Android、HTML5。

    在Native端,两者的最大的区别可能就是在对JSBundle是否分包。React Native官方只允许将React Native基础JS库和业务JS一起打成一个JS bundle,没有提供分包的功能,所以如果想节约流量就必须制作分包打包工具。而Weex默认打的JS bundle只包含业务JS代码,体积小很多,基础JS库包含在Weex SDK中,这一点Weex与Facebook的React Native和微软的Cordova相比,Weex更加轻量,体积小巧。

    在JS端,Weex又被人称为Vue Native,所以 React Native 和 Weex 的区别就在 React 和 Vue 两者上了。

    笔者没有写过React Native,所以也没法客观的去比较两者。不过知乎上有一个关于Weex 和 React Native很好的对比文章《weex&React Native对比》,推荐大家阅读。

    前两天@Allen 许帅也在Glow 技术团队博客上面发布了一篇《React Native 在 Glow 的实践》这篇文章里面也谈了很多关于React Native实践相关的点,也强烈推荐大家去阅读。

    入门手册

    关于小白想入门Weex,当然最基础的还是要通读文档,文档是官方最好的学习资料。官方的基础文档有两份:

    教程文档
    手册文档

    在文档手册里面包含了Weex所有目前有的组件,模块,每个组件和模块的用法和属性。遇到问题可以先过来翻翻。很有可能有些组件和模块没有那些属性。

    Weex系列工具

    看完官方文档以后,就可以开始上手构建工程项目了。

    Weex也和前端项目一样,拥有它自己的脚手架全家桶。

    1. weex-toolkit
    2. weexpack
    3. playground
    4. code snippets
    5. weex-devtool。

    weex-toolkit

    weex-toolkit是用来初始化项目,编译,运行,debug所有工具。

    通过下面的命令安装

    1
    npm install -g weex-toolkit

    安装完成后就可以使用weex 命令了

    我们主要用的就是debug 和 compile命令。debug 是启动chrome调试器 、compile命令是将写好的js文件编译为JS bundle。

    weexpack

    weexpack是用来打包JSBundle的,实际也是对Webpack的封装。

    playground

    playground是一个上架的App,这个可以用来通过扫码实时在手机上显示出实际的页面。

    code snippets

    code snippets这个是一个在线的playground。

    weex-devtool

    weex-devtool 可以使用chrome调试JS 代码。 这个工具我认为主要方便前端开发使用。

    使用步骤,首先启动调试服务,终端输入

    1
    weex debug

    结果如下:

    同时启动chrome。然后在代码中将host换为图中的host。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    NSString *strHost =  [[NSUserDefaults standardUserDefaults] objectForKey:GWX_WEEX_DEBUG_HOST];
    if(strHost.length>5)
    {
    NSString *strURL = [NSString stringWithFormat:@"ws://%@/debugProxy/native",strHost];
    [WXDevTool setDebug:YES];
    [WXLog setLogLevel:WXLogLevelLog];
    [WXDevTool launchDevToolDebugWithUrl:strURL];
    }
    else
    {
    [WXDebugTool setDebug:NO];
    [WXLog setLogLevel:WXLogLevelError];
    }

    启动app,看到app链接到了 chrome调试服务器

    下图是debuger 截图 :

    下图是inspect截图:

    具体使用方法看这两篇文章即可:

    1. 《Weex 入坑指南:Debug 调试是一门手艺活》

    2. 《Weex调试神器——Weex Devtools使用手册》

    Weex Market插件

    在日常开发中,我们可以全部自己开发完所有的Weex界面,当然还可以用一些已有的优秀的轮子。Weex的所有优秀的轮子都在Weex Market里面。

    Weex Market

    在这个Market里面有很多已经写好的轮子,直接拿来用,可以节约很多时间。

    比如这里很火的weex-chart。weex-chart图表插件是通过g2-mobile依赖[gcanvas插件][23]实现的

    如果你想使用[Weex Market][24]的Plugin插件,你可以使用weex plugin 命令:

    1
    $ weex plugin add plugin_name

    你只需要输入插件的名称就可以从远程添加插件到你本地的项目,比如添加 weex-chart,我们可以输入命令:

    1
    $ weex plugin add weex-chart

    我们可以使用plugin remove移除插件,比如移除安装好的 weex-cahrt:

    1
    $ weex plugin remove weex-chart

    这个插件库里面我用过weex-router,还不错,用它来做weex的路由管理。推荐使用。

    参考

    1. 官方教程
    2. 官方手册
    3. iOS 开发者的 Weex 伪最佳实践指北