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

weex文档

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
      }
    ]
  ]
}

weex-ui文档

4.安装JDK

JDK下载地址https://www.oracle.com/technetwork/java/javase/downloads/index.html
配置环境变量参考https://blog.csdn.net/u012934325/article/details/73441617/

5.安装Android环境

下载 SDK-Tools 解压版的
https://www.androiddevtools.cn/

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