weex + vue2.0 开发android/iOS 应用之配置环境

John Doe
2019-09-09

weex + vue2.0 开发android/iOS 应用之配置环境

一、安装java运行环境（JDK）

检测本机操作系统是否已经安装了jdk

1
java -v

若，没安装过，下载JDK,安装成功后并且配置系统环境变量

二、安装nodejs

安装完成后，检测是否安装成功

1
node -v

三、安装weex、weexpack、webpack

1
npm install weex weexpack webpack -g

四、初始化项目目录

1
weex init/create weeex-demo

根据提示选择依赖库，等工程目录创建完成后，

1
2
3
4
cd weex-demo
npm install
npm run build
npm run start

可以在浏览器查看项目初始效果

五、添加Android/iOS SDK 支持原生app

1
weex platform add android # 增加安卓sdk

六、安装Android Studio

  • 首次打开 as， 需要在setting 中配置jdk和sdk
  • Show Package Details
  • Android SDK Build Tools
  • Android Support Repository
    安装完成后，配置gradle，导入刚创建的项目，便可进行原生开发、打包.apk等

    七、调试

    1.方法一
    1
    2
    weex debug your_weex.vue # 调试单个页面
    weex debug your/path -e App.vue # 调试整个工程

执行调试命令后，会将指定的文件打包成 JSBundle，并启动一个 weex Devtool 服务（http://localhost:8088可访问，如下图），同时将 JSBundle 文件传递至该服务跟路径下的weex文件夹内（http://localhost:8088/weex/App.js，实际是下图右边二维码的的内容）。

2.方法二

1
weex your_weex.vue

此时本地同时启动一个watch的服务器用于检查代码变更，自动重新构建 JSBundle，视觉同步刷新。

上图看到的效果即为H5页面的效果，我们一般在整个单页编写完成后在使用 Weex Playground App 扫码查看真机效果，或者你也可以在编写的同时使用真机观察代码的运行效果，每次重新构建包到重绘的速度还是很快的。

但前提是你要保证，你的手机和电脑的连在同一个局域网下，并且使用IP访问。

八、打包

熟悉 React Native 的人都知道， React Native 的发布实际上就是发布一个 JSBundle，Weex 也是这样，但不同的是，Weex 将工程进行分包，发布多个 JSBundle。因为 Weex 是单页独立开发的，每个页面都将通过 Weex 打包器将 vue/we 页面打包成一个单独的 JSBundle，这样的好处在于减少单个 bundle 包的大小，使其变的足够小巧轻量，提高增量更新的效率。

1
2
3
npm run build # 仅打包
weex build iso # 打包 + 构建
weex run iso # 打包 + 构建 +运行

以上三种均会触发 Weex 对工程进行打包。
在我们执行了以上打包命令后，所有的工程文件将被单独打成一个独立的 JSBundle，如下：
index.vue ==> index.js
home.vue ==> home.js
topit.vue ==> topic.js
shop.vue ==> shop.js
打包后的 JSBundle 有两种格式

1
2
3
4
5
# 由.vue文件打包出来的包格式（简写），使用 vue 2.0 语法编写
// { "framework": "Vue"} 
/******/ (function(modules) { 
          .......
/******/ })

1
2
3
4
5
# 由.we文件打包出来的包格式（简写），使用 weex 语法编写
// { "framework": "Weex" }
/******/ (function(modules) { 
          .......
/******/ })

不同的头部是要告诉使用什么语法解析此JSBundle。

至此，我们准备「热更新的包」就已经准备完毕了，接下就是发包执行了

九、发包

打包后的 JSBundle 一般发布到发包服务器上，客户端从服务器更新包后即可在下次启动执行新的版本，而无需重新下载 app，因为运行依赖的 WeexSDK 已经存在于客户端了，除非新包依赖于新的 SDK，这也是热更新的基本原理。

1
2
3
4
【WeexSDK】包括
【JS Framework】JSBundle 的执行环境
【JS-Native Bridge】中间件或者叫通讯桥梁，也叫【Weex Runtime】
【Native Render Engine】解析 js 端发出的指令做原生控件布局渲染

十、执行

Weex 的 iOS 和 Android 客户端的【JSFramework】中都会运行一个 JavaScript 引擎，来执行 JS bundle，同时向各端的渲染层发送规范化的指令，调度客户端的渲染和其它各种能力。iOS 下选择了 JavaScriptCore 内核，而在 Android 下选择了 UC 提供的 v8 内核（RN两端都是JavaScriptCore 内核）。

JSBundle 被 push 到客户端后就会在 JSFramework 中执行，最终输出三端可读性的 VNode 节点，数据结构简化如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
{
  tag: 'div',
  data: {
    staticStyle: { justifyContent: 'center' }
  },
  children: [{
    tag: 'text',
    data: {
      staticClass: 'txt'
    },
    context: {
      $options: {
        style: {
          freestyle: {
            textAlign: 'center',
            fontSize: 200
          }
        }
      }
    },
    children: [{
      tag: '',
      text: '文字'
    }]
  }]
}

有了统一的 VNode 节点，各端即可根据自己的方法解析渲染原生UI了，之前的所有操作都是一致的，包括文件格式、打包编译过程、模板指令、组件的生命周期、数据绑定等。

然而由于目标执行环境不同（浏览器和 Weex 容器），在渲染真实原生 UI 的时候调用的接口也不同。

Vnode —DOM api —> Web
Vnode —Native DOM API Weex
此过程发生在【Weex SDK】的【Weex Runtime】中。

最总【Weex Runtime】发起渲染指令callNative({…})有RenderEngine完成渲染

总结一下

  • Weex 文件分包打包成单个 JSBundle 文件
  • 发布到发包服务器上，通过热更新 push 到用户的客户端
  • 交由【Weex SDK】执行解析
  • SDK 中的【JS Framework】执行 Bundle 脚本生成 Virtual DOM
  • Virtual DOM 经由各端执行环境【Weex Runtime】解析翻译成执行指令
  • 【Native RenderEngine】接收到指令后执行渲染操作，作出渲染出完整的界面
    图示