Weex系列(1)-环境与工具

发表于

什么是Weex

Weex官网的一句话介绍：Weex 是一个使用 Web 开发体验来开发高性能原生应用的框架。
Weex是由阿里巴巴开发的，基于先进Web技术，使用同一套代码来构建 Android、iOS 和 Web 应用。具体来讲，在集成了 WeexSDK 之后，你可以使用 JavaScript 和现代流行的前端框架来开发移动应用。

  • 支持的前端框架
    • Vue.js
    • Rax

环境搭建

关于环境，官网介绍已经非常详细了
需要注意的是

  • 在 package.json 中，已经配置好了几个常用的 npm script，分别是：
    • build: 源码打包，生成 JS Bundle
    • dev: webpack watch 模式，方便开发
    • serve: 开启HotReload服务器，代码改动的将会实时同步到网页中
  • Weex 官方提供了 weex-toolkit 的脚手架工具来辅助开发和调试，通过install -g weex-toolkit安装后就可以使用weex命令来创建weex工程了

Demo

  • 创建一个Weex项目
    weex create awesome-project
    执行完命令后，在 awesome-project 目录中就创建了一个使用 Weex 和 Vue 的模板项目。
  • 开启服务
    npm start
    执行完命令后，根据终端提示访问相应网站即可即时浏览效果，使用weex官方app playground也能在手机上进行预览

  • 客户端安装包打包

    • 添加或移除平台

      1
      2
      weex platform add ios
      weex platform add android
      1
      2
      weex platform add ios
      weex platform add android

      查看平台列表
      weex platform list

    • 运行

      1
      2
      3
      weex run ios
      weex run android
      weex run web

      这样运行会直接打出客户端包并进行安装，因此需要提前配置好ios或android的开发环境

  • 输出客户端工程

    1
    2
    npm run pack:ios
    npm run pack:android

    执行完命令后，在项目中会生成一个新的文件夹platforms，工程就放在这个文件夹中。

  • 目录结构
    需要重点关注的几个文件或文件夹（待续）
    • configs/config.js
    • package.json

Native端的集成

输出客户端工程后，可以非常直观的看出Weex SDK的使用方式，但是，我们大部分情况并不是使用输出的工程继续开发，那么怎么接入weex到既有项目呢？

  • 集成sdk
    集成sdk的坑有点多，这里要着重说一下Android集成，主要参考Android集成Weex sdk

    • 中文官网中参考代码
      1
      2
      3
      4
      5
      compile 'com.android.support:recyclerview-v7:23.1.1'
      compile 'com.android.support:support-v4:23.1.1'
      compile 'com.android.support:appcompat-v7:23.1.1'
      compile 'com.alibaba:fastjson:1.1.46.android'
      compile 'com.taobao.android:weex_sdk:0.5.1@aar'

    注意上面的weex_sdk版本是0.5.1，这本来是没有问题的，但是因为weex在0.10.0版本之后全面支持vue2.0，而前面文档中weex create命令创建出来的项目是基于vue2.0的，这会导致在加载编译出的jsbundle时会报错ReferenceError: Vue is not defined
    而英文文档就没有这个问题，英文文档给出的版本是0.18.0，改成0.18.0后虽然能解决上面的问题，但是在load本地jsbundle时又出现失败的错误，所以我使用的是0.16.0。目前weex的版本迭代还是比较频繁的，但是不建议使用最新的，问题会比较多。

  • 示例代码

编译jsbundle

  • 命令npm run build
    其实就是运行package.json内定义得build脚本，运行成功后将dist文件夹复制到客户端工程（或者放在云端动态加载），然后使用weex实例进行渲染即可，这个在示例代码中有所体现