欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

创建weex项目总结

程序员文章站 2024-03-15 23:35:00
...

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】接收到指令后执行渲染操作,作出渲染出完整的界面

创建weex项目总结
相关标签: vue