创建weex项目总结

最新推荐文章于 2020-09-09 17:36:55 发布

xiaoshihd

最新推荐文章于 2020-09-09 17:36:55 发布

阅读量580

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/xiaoshihd/article/details/108181818

版权

vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.创建项目

用 weex create 命令创建一个weex项目：

weex create 应用名称

会提示是否安装依赖，选择“是”即可。

如果未选择，后续执行npm install安装也可以。

创建完成后结构如下：

WeexProject    
├── README.md         //项目便签
├── android.config.json   //Android 工程配置
├── configs             //weex 配置         
├── ios.config.json       //ios 工程配置
├── package-lock.json    
├── package.json        //项目 npm 包管理
├── platforms           //平台模版目录 
│   ├── ios             //ios 原生平台目录
│   └── android         //android 原生平台目录
├── plugins             //插件下载目录 
│   └── README.md 
├── src                //业务源码目录
│   └── index.we       
├── tools              //工具目录
│   └── webpack.config.plugin.js 
├── web              //web 平台目录
│   ├── index.html 
└── webpack.config.js    // webpack 模块打包配置目录

2.运行项目

执行 npm start（实际上是执行npm run serve开启静态服务器），这是工具会启动一个本地的 web 服务，监听 8081 端口，并自动打开浏览器显示预览页面。源代码在 src/ 目录中，可以像一个普通的 Vue.js 项目一样来开发，修改完成后自动就可以在浏览器预览。

weex中常用的npm命令。这些npm xxx的命令，其实都是在package.json里设置的。可以看到如下代码：

"scripts": {
    "start": "npm run serve",
    "build": "webpack --env.NODE_ENV=common",  // 打包
    "build:prod": "webpack --env.NODE_ENV=production",
    "build:prod:web": "webpack --env.NODE_ENV=release",
    "build:plugin": "webpack --env.NODE_ENV=plugin",
    "clean:web": "rimraf ./release/web",
    "clean:ios": "rimraf ./release/ios",
    "clean:android": "rimraf ./release/android",
    "dev": "webpack --env.NODE_ENV=common --progress --watch",
    "unit": "karma start test/unit/karma.conf.js --single-run",
    "test": "npm run unit",
    "lint": "eslint --ext .js,.vue src  test/unit --fix",
    "serve": "webpack-dev-server --env.NODE_ENV=development --progress",
    "ios": "weex run ios",
    "web": "npm run serve",
    "android": "weex run android",   // 打包+构建+安装执行
    "pack:ios": "npm run clean:ios && weex build ios", // 打包+构建
    "pack:android": "npm run clean:android && weex build android",
    "pack:web": "npm run clean:web && npm run build:prod:web"
  }

在项目的根目录下使用命令npm run dev开启 watch 模式，开启后，每次修改src下的文件会自动编译。生成dist目录下的index.js文件和index.web.js文件。

npm run build里的命令执行的就是webpack命令，执行打包过程。执行打包之后，所有的工程文件被单独打成一个独立的JSBundle。

下面是由.vue文件打包出来的包格式（简写），使用vue2.0语法编写:

//{"framework"："vue"}
/******/（function（modules）{
    
/******/}）

3.添加移动端支持

默认情况下 weex create 命令并不初始化 iOS 和 Android 项目，可以通过执行 weex platform add 来添加特定平台的项目。

weex platform add ios
weex platform add android

拿android为例：

Android环境依赖Android studio 和 Java JDK 1.8 (Windows需要设置Java的环境路径)

Android SDK Platform 26 (通过Android studio安装：tools-SDK Manager-选择安装)
Android SDK Build-Tools 26 (通过Android studio安装)
Android virtual device (通过Android studio安装:tools-AVD Manager-Creat new virtual Device-然后就进入选择设备和下载安装过程过程，选择API level26，与Platform一致)

环境配置好之后执行上述命令安装，安装好后可以去项目根目录的platforms下看到android文件夹，说明应用支持添加成功。

之后可以在Android Studio里运行weex。

在Android Studio的启动界面，选择Open an exsting Android Studio Project。然后选择刚才用weex create xxx命令创建的项目之下的platforms/android目录打开即可。

运行可能会报错。

如果是“Failed to find Build Tools revision 26.0”的错误，只需要按它的提示双击安装即可。

如果是“Error:Cause: unable to find valid certification path to requested target”的错误，在file->Project sructure->denpendencies下，把里面的依赖一个个点进去更新一下，再重新sync。因为我用的是Android Studio 3.5以上的版本，weex默认是2.2.2的Gradle版本，所以Gradle版本也需要升级一下，升级成3.5.3。

如果是"Error:(30, 0) Could not set unknown property ‘outputFileName’ for object"，这个时候需要在Android Studio中把app目录下的build.gradle文件中的:

variant.outputs.each { output ->
    def outputFile = output.outputFile
    if (outputFile != null && outputFile.name.equals('app-debug.apk')) {
        def fileName = outputFile.name.replace("app-debug.apk", "weex-app.apk")
        output.outputFile = new File(outputFile.parent, fileName)
    }
}

修改成：

variant.outputs.all { output ->
    def outputFile = output.outputFile
    if (outputFile != null && outputFile.name.equals('app-debug.apk')) {
        def fileName = outputFile.name.replace("app-debug.apk", "weex-app.apk")
        outputFileName = fileName
    }
}

之后在Android Studio的app目录下的build.gradle文件中，在defaultConfig下加入：

javaCompileOptions { 
    annotationProcessorOptions { 
        includeCompileClasspath = true
    } 
}

这两个问题都是与weex本身使用的是低版本的gradle，而在环境配置的过程中升级了gradle版本有相关性。

这时候如果运行成功基本上环境是没什么问题了。

4.安装到移动端

Android Studio配置好之后，运行项目即可将其安装到移动端。

如果要更新项目，把执行打包命令生成的 js 文件（weex项目里的dist/index.js）拷贝到 Android 项目的 assets/dist 资源文件（app/assets/dist/index.js）中，然后项目会加载 js 文件进行更新（其实就是使用 Weex SDK 的 WXSDKInstance 类加载）。

当然用以下命令直接在模拟器或真实设备上启动应用：

weex run ios
weex run android
weex run web

同样以android为例，这一句命令执行了打包+构建+安装执行三个过程。

在运行启动命令前，需要确保 Android所需要的原生运行环境配置正确，并且需要先启动模拟器（AVD）或连接上移动设备再运行启动命令。

启动模拟器就是在Android Studio通过运行（Run）按钮先把安卓模拟器（AVD）打开，然后再执行npm run android。

连接真机就是直接把安卓手机连接上，开启USB调试。输入：

adb devices

如果发现有设备，则证明连接成功。然后再执行npm run android，选择自己的设备即可。

此时打开 Weex 项目，并尝试修改 src 目录下的 index.vue 文件，可以发现，修改的内容会立即生效。其实就是通过index.js文件传给客户端，再由客户端解析实现的。

总结一下

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