Weex 入坑指南:手把手编译 Playground

2,159 阅读5分钟

前言:在各种场合都会听到大家对于 iOS Playground 支持 Vue 的渴求,而对于前端工程师而言,Native 的操作部分可能是个难点,我们希望通过这篇文章教会大家一些运行和编译的基本操作,由于笔者也并非 Native 工程师,欢迎大家指正错误和不规范。

在以下场景下,你可能会尝试自己编译 Playground:

  1. Weex 官方提供的下载包不一定是最新的,可能希望用到一些其他版本。
  2. 使用模拟器运行 Playground 来进行查看和调试。

本文将帮助前端快速上手 Android 和 iOS App 的编译和打包环节。

准备

在开始之前,我们需要先做一些准备,我们默认使用 Weex 的你已经有 Node.js 4.0 以上的版本,你可以通过 node --version 查看 Node.js 的版本号。

克隆或下载 Weex 项目:alibaba/weex: A framework for building Mobile cross-platform UI,如果您需要 Release 版本,可以前往 Releases · alibaba/weex · GitHub 下载。

# 我们以克隆为例
git clone git@github.com:alibaba/weex.git

之后进入项目根目录,使用 npm install 安装项目,并且通过 ./start 命令生成 js bundle。

安装你需要编译的平台的开发环境,在 Android 下,你需要 Android Studio。iOS 下,你需要 Xcode,之后会详细说明。

Android

安装 Android SDK

在官网下载 Android Studio 后首次运行会帮助你安装一些 Android 开发必须的 SDK 等。

进入主界面,点击 Open an existing Android Stduio project,选择你克隆的 weex 项目路径下的 android/playground 并打开,首次启动可能会帮助你安装项目所需要的 SDK,耐心等待即可。

修改 js bundle 地址(可选)

如果你希望在启动后直接载入你的项目,那么可以尝试修改项目中的 app/java/com.alibaba.weex/IndexActivity,做出如下修改,比如:

private static String sCurrentIp = "修改为你的 ip"; // your_current_IP
// ...
private static String getIndexUrl() {
  return "http://" + sCurrentIp + ":8080/app.weex.js";  // 修改为你的 js 地址
}

如果你正在使用 weex-vue-starter-kit,可以在 QR 码页面 找到所需的信息。

运行

在项目启动后,Android Studio 会建立索引以及执行 Gradle Sync,等待索引建立完成之后,工具栏上的 Run 按钮就会变为可用状态。

在 Gradle Sync 中,如果出现 error,那么程序无法正常运行,如果遇到了依赖冲突问题,可以尝试以下方法解决:

查看 Gradle Console,确定冲突的模块,比如:

WARNING: Conflict with dependency 'com.android.support:recyclerview-v7'. Resolved versions for app (23.2.1) and test app (23.1.1) differ. See http://g.co/androidstudio/app-test-app-conflict for details.
...
Conflict with dependency 'com.android.support:recyclerview-v7'. Resolved versions for app (23.2.1) and test app (23.1.1) differ. See http://g.co/androidstudio/app-test-app-conflict for details.

FAILED
:commons:mergeDebugAndroidTestResources UP-TO-DATE

FAILURE: Build failed with an exception.

What went wrong:
Execution failed for task ':app:prepareDebugAndroidTestDependencies'.
Dependency Error. See console for details.

在 Terminal 中运行 ./gradlew :app:dependencies 和 ./gradlew :app:androidDependencies,找到对应的依赖包,在 Gradle Script 中找到并修改版本到 test app 的版本号。

如上述问题,我们会发现是 app: bundle.grade 中的 compile 'com.android.support:design:23.2.1' 带入了更高版本的 com.android.support:recyclerview-v7 导致,改为 compile 'com.android.support:design:23.1.1',再次执行 Gradle Sync。

Gradle Sync 执行完成后,我们可以开始 Run 项目了,点击 Run 按钮或者使用快捷键 Ctrl + R。

如果你通过 USB 连接了 Android 手机,Connected Devices 中会出现你的手机,就可以忽略下述创建设备的步骤。如果没有设备,点击 Create New Virtual Devices.

选择合适的机型和系统镜像版本,机型主要决定了屏幕分辨率等因素,系统镜像决定了手机内置的系统版本(API Level 不低于 22),可以根据需求随意选择,初次使用点击旁边的 Download 下载 System Image,Android Studio 会自动帮你下载。

创建模拟器完毕后,选中该机型,点击 OK 启动,耐心等待,会将编译后的程序安装到你的设备并运行。

打包

尽管在 Android Studio 中「运行到真机」也可以将程序安装到真实设备,但是为了方便操作,我们可以将程序打包成 apk 的安装包,供更多的人使用。

只需要在菜单栏 - Build 中选择 Build APK。

等待成功后即可在 Playground 项目的 app/build/outputs/apk 中找到生成的 apk 文件(你也可以在 Event Log 中点击 Reveal in Finder 找到该文件)。

iOS

安装依赖

安装 iOS 开发环境,即 Xcode 与 CocoaPods,Xcode 可以在 App Store 下载获得,CocoaPods 安装前需要确保你已经安装 Ruby,之后执行:

sudo gem install cocoapods

如果你觉得安装较慢,可以替换 Ruby Gems 的镜像

安装完成之后,进入你克隆的 weex 项目路径下的 ios/playground 并执行 pod install,将会安装 iOS 版本所需的依赖。

修改 js bundle 地址(可选)

用 Xcode 打开 ios/playground/WeexDemo.xcworkspace。

使用快捷键 cmd + shift + o 打开 Quick Open,搜索 DemoDefine.h。

修改 CURRENT_IP:

#define CURRENT_IP @"your computer device ip"
// ...

// 修改端口号到你的端口号
#define DEMO_URL(path) [NSString stringWithFormat:@"http://%@:8080/%s", DEMO_HOST, #path]

// 修改 JS 文件路径
#define HOME_URL [NSString stringWithFormat:@"http://%@:8080/app.weex.js", DEMO_HOST]

运行

选定设备后点击 Run 或者快捷键即可运行,如果你需要运行在真实设备上,需要做以下额外的操作:

首先,使用 USB 连接你的设备到电脑,之后,选择你的 iOS 设备,如下图:

之后,点击 WeexDemo,将会出现项目配置,将所有 TARGETS 中的 Bundle Identifier 和 Team 进行修改,如果你的 Signing 面板与下图不同,请勾选 Signing 中的 Automatically manage signing。

初次使用,需要在 Team 中选择 Add an Account 并登录你的 Apple Id,可以不是开发者账号。

修改方式可以参考下图:

之后点击运行,应用即可被安装上手机,如果出现 Device is Busy,耐心等待 Xcode 中的 Processing symbol files 进度条完成即可。

在某些情况下,iOS 可能没有自动把应用对应的开发者认证为信任,可以去 iOS 系统的设置 - 通用 - 描述文件与设备管理去信任自己的账号。

如果在编译过程中出现 error,请保证 WeexDemo 的 Depolyment Info 中 Deployment Target 为 7.0。

打包

iOS 打包成 ipa 文件的操作必须要付费加入 Apple Developer Program 才能实现,如果你只是希望自己的手机用上指定版本的 Playground,通过上面步骤安装在真机后完全可以满足使用。

首先,选择设备改为真实设备,模拟器无法使用 Archive 功能,点击 Archive,等待完成。

完成后会自动弹出 Archives,开发者可以点击 Export 导出 ipa。