weex 与 weexpack 环境搭建

Posted 2020-10-06

weex 与 weexpack

weex init 会生成一个 weex 项目， 里面有weex, vue 模板。如果要开发 android，需要建一个 Android 项目。

weexpack, 可以帮助搭建 Android 和 ios 项目

 

---------------------- weex ------------------------------------------------------------

一、安装依赖

1. 安装Nodejs, 可以使用nvm 或 n 等版本管理工具来搭建不同版本的Nodejs, 或直接使用 Homebrew 安装

 1 $ brew install nvm 
 3 $ nvm install v8.5.0
 5 $ node -v
 7 $ npm -v
 9 $ npm install -g weex-toolkit

2. 安装 weex-toolkit

1 $ yarn global add weex-toolkit
2 $ weex -v

也可以使用 weex 验证是否安装成功

1 $ weex

二、初始化

1 $ weex init project-name

创建了一个使用 Weex 和 Vue 的模板项目。

包含如下目录

README.md config  public
build  package.json src

三、开发

之后我们进入项目所在路径，weex-toolkit 已经为我们生成了标准项目结构。

在 package.json 中，已经配置好了几个常用的 npm script，分别是：

• build: 源码打包，生成 JS Bundle
• dev: webpack watch 模式，方便开发
• serve: 开启静态服务器
• debug: 调试模式

我们先通过 npm install 安装项目依赖。之后运行 npm run dev 和 npm run serve 开启watch 模式和静态服务器。

然后我们打开浏览器，进入 http://localhost:8080/index.html 即可看到 weex h5 页面。

初始化时已经为我们创建了基本的示例，我们可以在 src/foo.vue 中查看。

 

---------------------- weexpack ------------------------------------------------------------

一、安装

1. 确保Nodejs 版本大于6.0

1 $ node -v
2 $ npm -v

2. 可以通过 weex create 命令提示安装，也可以手动安装

1 $ yarn global add weexpack

3. 生成 weexpack 项目

1 $ weex create project-name
2 // 或
3 $ weexpack create project-name


// 生成如下目录

README.md        package.json        start.bat
android.config.json    platforms        tools
config.xml        plugins            web
hooks            src            webpack.config.js
ios.config.json        start            webpack.dev.js

• 注意， 项目里没有 android 和 ios 模板， 需要手动添加插件

4. 安装项目的依赖

1 $ yarn install
2 // 或
3 $yarn 

5. 安装应用模板， 生成 Android 和 iOS 工程

1 $ weexpack platform add/remove android
2 $ weexpack platform add/remove ios
3 // 或
4 $ weex platform add/remove android
5 $ weex platform add/remove ios

执行成功后在 platforms 目录生成 android, ios 目录

安装指定版本，weexpack android 版本从6.0.0开始

1 $ weexpack platform add [email protected]6.2.1
2 // 或
3 $ weex platform add [email protected]6.2.1

6. 打包 apk

• android

1 $ weexpack run android
2 // 或
3 $ weex run android

注意:android.config.json 或者 ios.config.json中的信息

　　AppName: 生成的apk安装后的应用名

　　AppId:application_id 包名

　　SplashText: 打开后欢迎页上面的展示文字

　　WeexBundle:指定的weex bundle文件（支持文件名和url的形式）

　　文件名则以本地文件的方式加载bundle,url则以远程的方式加载bundle 如果以本地方式指定bundle .we文件请放到src目录。

• ios

　　模拟器运行

1 $ weexpack run ios
2 // 或
3 $weex run ios

　　构建 ipa

1 $ weexpack build ios
2 // 或
3 $ weex build ios

构建包的过程中，将会提示让您输入CodeSign（证书）
，Profile(provisioning profile),AppId，只有输入真实的这些信息才能成功打包。 其余如AppName,和入口weex bundle文件可以编辑项目目录下的ios.config.json配置。 打完包成功之后，可以在/playground/build/ipa_build/目录下获取ipa文件
注：证书需要预先安装到keychain中，在keychain中点击右键获取证书id（证书名称），provisioning profile文件（*mobileprovision）需要获取UUID，进入目录 可以看到mobileprovision_UUID.sh文件，此文件可以获取到UUID
mobileprovision_UUID.sh用法如下： $ ./mobileprovision_UUID.sh *mobileprovision
参数（*mobileprovision）为provisioning profile文件路径

7. html5 打包

1 $ weexpack build web
2 // 或
3 $ weex build web

这样你可以把打包后的资源上传到cdn服务器，然后上线你的web项目。

在html5平台上运行

1 $ weexpack run web
2 // 或
3 $ weex run web

8. 查看已安装的平台模版及版本

1 $ weexpack platform list

9. 打包应用并安装到设备运行

1 $ weexpack platform run

10. 插件使用者命令, 安装、移除插件

1 $ weexpack plugin add/remove

11. 插件开发者命令

市场账号登录、登出

1 $ weexpack plugin login/logout

生成插件模板

1 $ weexpack plugin create

同步插件市场（不会做发布npm，针对npm已发布的包）[--ali] 可选参数

1 $ weexpack plugin sync

 

环境要求

• 目前支持 Mac、windows、linux平台(windows下仅能打包android)。
• 配置 Node.js 环境，并且安装 npm 包管理器。(需要node6.0+)
• 如果要支持 iOS 平台则需要配置 iOS 开发环境：
  • 安装 Xcode IDE ，启动一次 Xcode ，使 Xcode 自动安装开发者工具和确认使用协议。
  • 安装 cocoaPods。
• 如果要支持 Android 平台则需要配置 Android 开发环境：
  • 安装 Android Studio（推荐）或者 Android SDK。打开 AVD Manager ，新建 Android 模拟器并启动 。（如果有安装 Docker ，请关闭 Docker Server 。）
  • 保证Android build-tool的版本为23.0.2。