weex 编译android,weex打包Android和IOS

1.安装weex

npm i -g weex-toolkit

weex -v // 查看当前weex工具版本

安装结束后你可以直接使用 weex help 命令验证是否安装成功，它会显示 weex 支持的所有指令，同时，你也可以通过 weex doctor 命令检查你的本地开发环境。

2.创建项目

weex create awesome-project

cd 项目路径

npm i

3.集成weex-ui

npm i weex-ui@latest -S

npm i babel-plugin-component babel-preset-stage-0 -D

编辑项目根目录下 .babelrc 文件

{

"presets": ["es2015", "stage-0"],

"plugins": [

[

"component",

{

"libraryName": "weex-ui",

"libDir": "packages",

"style": false

}

]

]

}

4.安装JDK

5.安装Android环境

image.png

解压缩完后目录，我们需要把这两个目录配置到环境变量中去。

image.png

先配置 ANDROID_HOME

image.png

再配置刚刚那两个目录到path下

image.png

打开 SDK-Manager.exe 下载需要的sdk，我用的是sdk26，具体版本编译weex会提示

image.png

image.png

image.png

6.准备编译安装包

6.1 安装 weexpack

npm install weexpack -g

6.2 添加模板 (按需要添加)

weexpack platform add android

weexpack platform add ios

6.3 打包 Apk

连接手机开发者模式会安装到手机上调试

weexpack run android

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

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

- `AppId: `application_id 包名

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

- `WeexBundle: `指定的weex bundle文件(支持文件名和url的形式)

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

运行成功后查看 \awesome-project\platforms\android\app\build\outputs\apk目录

image.png

安装效果查看

image.png

6.4 打包IOS (未测试)

weexpack run ios

构建ipa包

weexpack 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，进入[目录](https://github.com/weexteam/weex-pack/tree/dev/generator/platforms/templates) 可以看到mobileprovision_UUID.sh文件，此文件可以获取到UUID**

mobileprovision_UUID.sh用法如下： $ ./mobileprovision_UUID.sh *mobileprovision

参数(*mobileprovision)为provisioning profile文件路径

6.5 html5打包

weexpack build web

运行Web

weexpack run web