weex 与 weexpack 环境搭建

weex 与 weexpack

weex init 会生成一个 weex 项目， 里面有weex, vue 模板。若是要开发 Android，须要建一个 Android 项目。

weexpack, 能够帮助搭建 Android 和 iOS 项目

 

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

1、安装依赖

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

2、初始化

1 $ weex init project-name

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

包含以下目录

README.md config  public
build  package.json src

3、开发

以后咱们进入项目所在路径，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、安装

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 android@6.2.1
2 // 或
3 $ weex platform add android@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目录。

 

MAC下设置 ANDROID_HOME, PATH

　　a. 若是是从网上下载的Android-SDK，并双击安装后，把应用拖到Application 里， 那么路径应该是

　　

/Applications/ADT/sdk

　　b. 若是是经过 brew install android-sdk 命令安装的

/usr/local/Cellar/android-sdk/

　　c. 若是是 Android Studio 带的

/Users/michael/Library/Android/sdk/

设置ANDROID_HOME, PATH, 保存到.bash_profile 或 .zshrc 文件里

$ export ANDROID_HOME=/Users/michael/Library/Android/sdk/
$ export PATH=$PATH:$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools

• 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。