Skip to content

如何用weexpack创建weex项目并构建app

Jump to bottom Edit New page
Junzz丶 edited this page Mar 7, 2017 · 3 revisions

对于前端开发者来说开发一个 app 是不容易的，既然 Weex 能以 web 的开发体验构建高性能、可扩展的 native 应用，那我们怎么利用 Weex 简单高效的开发一个 native 应用呢？Weex 替你考虑了这件事。在本章中，我们将学习如何使用 Weexpack 工具快速生成一个全新的 Weex 项目。

根据你的操作系统的不同，步骤也略有差异，如果你从未接触过 native 开发，请慢慢来，遇到问题随时查阅 FAQ。

首先，不论任何平台，我们都需要 node.js 和 Weexpack。在本节中，默认你已经安装好了 node.js（需要6.X以上版本），如有疑问，可参考上一章 如何在本地开发 Weex 页面。

Weexpack 是 Weex 新一代的工程开发套件，它允许开发者通过简单的命令，创建 weex 工程项目，将项目运行在不同的开发平台上。未来，我们考虑会将其集成在 weex-toolkits 上，但目前仍需要单独安装。好在安装 Weexpack 非常简单，可以直接使用 npm 安装：

npm install weexpack -g

或者用 cnpm：

cnpm install weexpack -g

接下来的步骤会有一些复杂和区别，根据开发平台的不同，我们提供了快速导航便于阅读：

iOS平台

Mac 是唯一可以开发 iOS 应用的平台，因此创建 iOS 项目只支持 mac。对于 iOS，你需要安装 Xcode 和 CocoaPods 。

安装 Xcode 最简单的方法是到 Mac App Store。Xcode 体积较大，下载请耐心等待。

安装好 Xcode 后，你需要运行 Xcode，使 Xcode 自动安装开发者工具和确认使用协议。

之后你还需要安装 CocoaPods 。CocoaPods 是 Xcode 项目的类库管理工具，可以使用如下命令安装：

$ sudo gem install cocoapods

如果执行该命令无反应，很可能是 gem source 问题，你可以切换为淘宝 gem source：

$ gem sources --remove https://rubygems.org/
$ gem sources -a https://ruby.taobao.org/
$ sudo gem install cocoapods

如有问题，可参考 CocoaPods 官方文档

创建项目

然后，就可以使用 weexpack 创建 weex 工程了：

$ weexpack create appName

weexpack 会自动新建以 appName 命名的目录，并将项目模板拉取到该目录。

最终形成如下目录结构：

-> /appName
.
|—— .gitignore
|—— README.md
|—— package.json
|-- android.config.json
|-- ios.config.json
|—— webpack.config.js
|—— /src
|     |—— index.we
|—— /html5
|     |—— index.html
|—— /ios
|     |—— /playground
|     |—— /sdk
|     |—— /WXDevtool
|—— /android
|     |—— /playground
|     |—— /appframework

其中：

  • webpack.config.js 是 webpack 配置文件，用于生成 .we 文件的 JSBunlde
  • ios.config.json 是 iOS 项目配置文件
  • android.config.json 是 Android 项目配置文件
  • /src 目录放置 Weex 页面
  • /html5 是 H5 端入口文件
  • /ios 放置 iOS 项目
  • /android 放置 Android 项目

紧接着，进入目录，并且安装依赖：

$ cd appName && npm install

至此，项目模版创建完成，接下来我们可以自定义我们的 APP 信息并打包运行。

运行与打包

如果一切正常，你可以使用 weexpack 打包或模拟器运行了：

模拟器运行

$ 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，进入目录可以看到 mobileprovision_UUID.sh 文件，此文件可以获取到 UUID。

mobileprovision_UUID.sh 用法如下：

$ ./mobileprovision_UUID.sh

*mobileprovision,参数（*mobileprovision）为provisioning profile文件路径

Android平台

安装sdk

在 Mac/Linux/windows平台下，首先需要Android sdk环境并配置ANDROID_HOME环境变量。 这里推荐使用Android Studio的方式来方便您安装android sdk和模拟器。首先下载符合您操作系统的 Android Studio（你可能需要翻墙才能访问）。 下载完成后运行 Android Studio，任意新建一个 Android 项目，在第二步中选择 Android 5.1，然后点击 next 完成项目创建，如图所示：

图1

配置环境变量

因为Android Studio安装的sdk不会自动配置环境变量(你自己安装的sdk同样不会) 所以需要您自己手动配置Android_HOME环境变量和PATH 如果是Android Studio安装的sdk 安装路径可已在sdk manager里找到(打开sdk manager的方式请参照图2) windows下请参照 window下如何设置ANDROID环境变量 linux/mac下 按照如下方式

   vim ~/.bash_profile
   然后在顶部加入（路径替换为你的真实路径）
   export ANDROID_HOME=/xxx/Library/Android/sdk
   export PATH=${PATH}:$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools:$ANDROID_HOME/build-tools
   保存
   source ~/.bash_profile
安装模拟器(可选)

待 Android Studio 打开后，在顶部菜单栏选择 Tools -> Android -> AVD Manager，安装 Android 模拟器：

图2 图2

之后，打开模拟器运行 Android。 如果你需要使用模拟器来调试的话 必须保持模拟器的运行,如果使用真机调试可忽略本节

注意事项： 保证 Android build-tool 的版本为 23.0.2 【可以在Android Studio的SDK Manager里查看是否已安装这个版本，如果没有可选择安装这一版本】

创建工程

$ weexpack create appName

weexpack 会自动新建以 appName 命名的目录，并将项目模板拉取到该目录。

最终形成如下目录结构：

-> /appName
.
|—— .gitignore
|—— README.md
|—— package.json
|-- android.config.json
|-- ios.config.json
|—— webpack.config.js
|—— /src
|     |—— index.we
|—— /html5
|     |—— index.html
|—— /ios
|     |—— /playground
|     |—— /sdk
|     |—— /WXDevtool
|—— /android
|     |—— /playground
|     |—— /appframework

其中：

  • webpack.config.js 是 webpack 配置文件，用于生成 .we 文件的 JSBunlde
  • ios.config.json 是 iOS 项目配置文件
  • android.config.json 是 Android 项目配置文件
  • /src 目录放置 Weex 页面
  • /html5 是 H5 端入口文件
  • /ios 放置 iOS 项目
  • /android 放置 Android 项目

紧接着，进入目录，并且安装依赖：

$ cd appName && npm install

至此，项目模版创建完成，接下来我们可以自定义我们的 APP 信息并打包运行。

运行与打包

如果一切正常，你可以使用 weexpack 打包或模拟器运行了：

Android 的打包和构建是一体的 ：

$ weexpack run android

同样的你可以更改项目目录下的android.config.json

  • AppName: 应用名

  • AppId: application_id 包名

  • SplashText: 欢迎页上面的文字

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

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

Add a custom footer
Add a custom sidebar
Clone this wiki locally