WeexBox 快速上手

概述

Weex是由阿里巴巴研發的一套移動跨平台技術框架，研發的初衷是為了解決移動開發過程中頻繁發版和多端研發的問題。使用Weex提供的跨平台技術，開發者可以很方便的使用Web技術來構建高性能、可擴展的Native級別的性能體驗，並支持在Android、iOS、YunOS和Web等多平台上進行部署。具體的說，當在項目中集成WeexSDK之後，就可以使用JavaScript和現代流行的前端框架來開發移動應用。

同時，Weex框架的結構是解耦的，渲染引擎與語法層是分開的，也不依賴任何特定的前端框架，目前主要支持Vue.js和Rax兩個前端框架。這樣一來，甚至可以使用其他前端框架來驅動Weex，打造三端一致的Native應用。

WeexBox是Weex的腳手架開發框架，和著名的WeexEros和WeexPlus的作用一樣。相比Weex，WeexBox具有如下的特點：

零配置，開箱即用的項目，自帶最佳實踐；
無需安裝 weex-toolkit；
比 weex-debugger、weex-builder 更快的構建速度；
支持 sass、es6、file-loader、uglify、eslint等；
可通過審核的熱更新，靜默模式和強制模式隨意切換；
N 多實用的 Module 擴展；

快速上手

支持的系統

Android 5.0 (API 21)+
iOS 10.0+

開發環境

Node：Nodejs 8.0+
AndroidStudio(僅限Android)：AndroidStudio 3.0+
Xcode(僅限iOS)：Xcode 10.0+
CocoaPods(僅限iOS)：CocoaPods 1.5.0+

創建項目

藉助weexbox提供的cli工具，我們可以快速的初始化工程項目。

# 安裝 cnpm i -g @weexbox/cli

# 新建一個weex工程
weexbox create projectName

# 進入工程
cd projectName

# 安裝依賴
cnpm i

初始化的項目里已經內置了 @weexbox/debugger工具，它負責調試功能。

調試

注意：確保電腦與手機處於同一網段。

調試真機JSbundle

調試app時，需要在weex項目中運行如下命令：

npm run debug

http://192.168.2.228:8088/devtool_fake.html?_wx_devtool=ws://192.168.2.228:8088/debugProxy/native/3954ddd5-c78f-49bc-9dc4-d068f88534b3 (二維碼自動識別)

此時會自動打開web，打開app的調試掃碼工具掃二維碼使pc與移動終端建立連接，當你看到類似以下這張圖，就表示連接成功了。

調試開發頁面

如果要單獨調試某個頁面，WeexBox也是支持的。

npm run debug [vue/weex頁面的路徑]

打開app的調試掃碼工具,掃二維碼使pc與移動終端建立連接。此時右上角有另外一個二維碼，點開並掃描這個二維碼即可將這個JSbundle頁面載入真機渲染成原生頁面。

打包

同時，WeexBox初始化的項目里已經內置了 @weexbox/builder，它負責打包功能。

#編譯開發環境 npm run develop

# 編譯測試環境
npm run test

# 編譯准生產環境
npm run preRelease

#編譯生成環境
npm run release

項目結構

. ├── config // 配置文件夾 │ ├── update-config.json // 熱更新的配置文件 │ └── weexbox-config.js // 圖片資源的配置文件 ├── deploy // 輸出文件夾 ├── platforms // 原生文件夾 │ ├── android // Android工程 │ └── ios // iOS工程 ├── src // vue源碼文件夾 │ └── module // 模塊文件夾 │ └── page // 頁面文件夾 │ ├── App.vue // vue源碼 │ └── index.js // 入口文件 └── static // 圖片資源文件夾

使用npm i命令安裝依賴後，項目的結構如上。項目同時也搭建了app 的基礎架構：在工程 platforms 文件夾中，會看到兩個文件夾 android 、ios，Android 端使用 Android Studio 開發工具，導入 platforms/android 文件夾，構建打包生成項目的apk；iOS 端使用 Xcode 開發工具，導入 platforms/ios 文件夾，構建打包生成項目的ipa。

iOS集成WeexBox

集成SDK

修改Podfile文件，添加WeexBox依賴：

source https://github.com/cocoapods/specs.git platform :ios, 10.0 inhibit_all_warnings! use_modular_headers!

target WeexBoxExample do
pod WeexBox

end

初始化

在 AppDelegate.swift 中添加如下代碼：

func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {

// 初始化 WeexBox
WeexBoxEngine.setup()

// 開啟調試
WeexBoxEngine.isDebug = true

window = UIWindow(frame: UIScreen.main.bounds)
window?.backgroundColor = .white

// 使用 WBNavigationController 作為導航基類
window?.rootViewController = WBNavigationController(rootViewController: LaunchController())

window?.makeKeyAndVisible()

return true
}

事件通知

WeexBox 提供了原生與weex互相通知的能力，可以用作原生之間的通知。主要藉助Event來實現：

// 註冊事件 Event.register()

// 發送事件
Event.emit()

// 註銷事件
Event.unregister()

// 註銷所有事件
Event.unregisterAll()

網路

Network 類封裝了Alamofire，原生和weex的網路請求都會走這裡。

// 網路請求域名 Network.server = 你的網路請求域名

// 發起網路請求。如果url已經包含了域名，會忽略你上面的設置
Network.request(url)

說明：原生也可以直接使用Alamofire，如果是這樣，建議使用Network提供的sessionManager。大多數情況下app會有自己的網路封裝，可以參考weexbox來實現自己的network module。

熱更新

// 配置熱更新地址 UpdateManager.serverUrl = hotdeployUrl

// 是否需要強制更新
UpdateManager.forceUpdate = true

// 執行熱更新
UpdateManager.update { (state, progress, error, url) in
switch state {
case .Unzip:
// 解壓
case .DownloadFile:
// 下載
case .UpdateSuccess:
// 更新成功，可以進入APP
// 如果開啟了強制更新，會等到下載完成才會進入這裡。否則就是靜默更新，解壓成功就會進入
}
}

路由

路由提供頁面間的跳轉功能。前端的路由可以參考：vue-router。

註冊路由

Router.register()

說明：WeexBox 默認註冊了weex和web，你可以在app初始化的時候重新註冊，用你自己的VC覆蓋它們。

路由實例的屬性

// 頁面名稱 public var name: String = ""

// 下一個weex/web的路徑
public var url: String?

// 頁面出現方式：push, present
public var type: String = Router.typePush

// 是否隱藏導航欄
public var navBarHidden: Bool = false

// 需要傳到下一個頁面的數據
public var params: Dictionary<String, Any>?

// 打開頁面的同時關閉頁面
public var closeFrom: Int?

// 關閉頁面的方向，默認和堆棧方向一致
public var closeFromBottomToTop = true

// 關閉頁面的個數
public var closeCount: Int?

打開頁面

var router = Router()

// 原生頁面
router.name = "你註冊路由時的頁面名稱"

// weex頁面
router.name = Router.nameWeex
router.url = "module/page.js"

// web頁面
router.name = Router.nameWeb
router.url = "https://aygtech.github.io/weexbox"

router.open()

關閉頁面

var router = Router() router.close()

Android 集成 WeexBox

Android SDK使用Kotlin開發，並且100%兼容Java。對於有追求的團隊而言，強烈建議使用Kotlin來開發，開發速度和穩健度都會大幅提升！

初始化

在Android的 Application 中初始化WeexBox SDK。

override fun onCreate() { super.onCreate()

// 初始化 WeexBox
WeexBoxEngine.setup(this, null)

// 開啟調試
WeexBoxEngine.isDebug = true
}

事件通知

WeexBox 提供了原生與weex互相通知的能力，你可以將它用作原生之間的通知，不管是weex界面還是原生界面，只要註冊了事件，都能接收到。

通過 Event 類，你可以在weex發送事件與註冊事件：

// 註冊事件 Event.register()

// 發送事件
Event.emit()

// 註銷事件
Event.unregister()

// 註銷所有事件
Event.unregisterAll()

也可以在原生代碼中發送事件與註冊事件。

// 註冊事件 Event.register(this,"YourEventName") { //this為Activity或者Fragment //var value = it!!["key"] it為發送事件傳過來的Map<String,Any>，可不傳 }

// 發送事件
Map<String, Object> map = new HashMap<>()
map.put("key", Object)
Event.emit("YourEventName", map)//map可為null

// 註銷事件
Event.unregister(this, "YourEventName") //this為Activity或者Fragment

// 註銷所有事件
Event.unregisterAll(this)

網路

WeexBox的網路使用的是Retrofit的二次封裝。原生和weex的網路請求都會走這裡。

// 網路請求域名 Network.server = 你的網路請求域名

// 發起網路請求。如果url已經包含了域名，會忽略你上面的設置
Network.request(url)

熱更新

// 配置熱更新地址 UpdateManager.serverUrl = hotdeployUrl

// 是否需要強制更新
UpdateManager.forceUpdate = true

// 執行熱更新
UpdateManager.update { state, progress, error, url ->
when (updateState) {
UpdateManager.UpdateState.Unzip -> // 解壓
UpdateManager.UpdateState.DownloadFile -> // 下載
UpdateManager.UpdateState.UpdateSuccess -> {
// 更新成功，可以進入APP
// 如果開啟了強制更新，會等到下載完成才會進入這裡。否則就是靜默更新，解壓成功就會進入
... // 還有各種狀態碼，參見下面表格，可以處理熱更新各種情況，如熱更新失敗提示用戶重啟
}
}
}

UpdateManager返回的狀態有：

| 狀態碼| 描述| |--|--| | Unzip | 解壓文件 |

路由

註冊路由

Router.register()

說明：WeexBox 默認註冊了weex和web，你可以在app初始化的時候重新註冊，用你自己的VC覆蓋它們。

路由實例的屬性

// 頁面名稱 public var name: String = ""

// 下一個weex/web的路徑
public var url: String?

// 頁面出現方式：push, present
public var type: String = Router.typePush

// 是否隱藏導航欄
public var navBarHidden: Bool = false

// 需要傳到下一個頁面的數據
public var params: Dictionary<String, Any>?

// 打開頁面的同時關閉頁面
public var closeFrom: Int?

// 關閉頁面的方向，默認和堆棧方向一致
public var closeFromBottomToTop = true

// 關閉頁面的個數
public var closeCount: Int?

打開頁面

var router = Router()

// 原生頁面
router.name = "你註冊路由時的頁面名稱"

// weex頁面
router.name = Router.nameWeex
router.url = "module/page.js"

// web頁面
router.name = Router.nameWeb
router.url = "https://aygtech.github.io/weexbox"

router.open()

關閉頁面

var router = Router() router.close()

靜態資源

圖片載入

weexbox 支持 3 種圖片載入方式：

網路載入

網路載入圖片時，src 以http開頭，例如：

<image src="https://aygtech.github.io/weexbox/logo.png"></image>

從 APP bundle 中載入

如果從bundle中載入圖片，src 以bundle://開頭，例如：

<image src="bundle://image.png"></image>

從 APP 文件中載入

如果src 不以上面兩種方式開頭，還可以從文件中載入，例如：

// iOS <image src="file://var/mobile/Media/DCIM/100APPLE/IMG_0171.PNG"></image> // Android <image src="/storage/emulated/0/DCIM/Camera/IMG_20180917_145836.jpg"></image>

modal

WeexBox內置了一些模塊，但是這些模塊相比其他的，如WeexEros和WeexPlus來說是明顯偏少的。為此，你可以使用Weex提供的擴展機制來擴展自己的modal，相關內容可以參考：Weex快速上手

除了常見的：alert、confirm外，還延伸了一些更頻繁使用的api，eg：actionSheet（操作表彈框）、showLoading（顯示菊花）等，更加常態化、大眾化以及多元化。

實現的示例代碼如下：

# 引用 const modal = weex.requireModule(wb-modal)

# 警告彈框
modal.alert({
title: 標題,
message: 彈窗內容,
okTitle: 確定
}, (result) => {

})
// callback參數
result: {
status: 0
}

如果要打開外部的Module，需要使用wb-external。例如：

# 引用 const external = weex.requireModule(wb-external)

# 調用攝像頭拍照，實現圖片裁剪上傳
external.openCamera({
// 能否剪裁
enableCrop: true,
// 是否矩形剪裁，true為圓形剪裁
isCircle: true,
// 寬度
width: 100,
// 高度
height:100
}, (result) => {

})

// callback參數
result: {
status: 0,
error: ,
data: {
// 圖片的存儲路徑
url: /docment/123.png

更多的模塊可以參考：傳送門

目前，大前端開發的趨勢越來越明顯，與Weex同一技術系的RN早已聲名遠播，Weex作為後期之秀，目前還在不斷的追趕和優化中雖然有各種bug被人詬病，但是，哪個優秀的技術發展沒有經歷這樣的過程呢。「不經一番寒徹骨，怎得梅花撲鼻香」，相信通過大家的無私奉獻，Weex社區也會變得越來越好。

本人正在完成《Weex跨平台開發實戰》一書，有任何好的建議的可以留言，也歡迎大家踴躍提意見。（群：515980159）

概述

快速上手

支持的系統

開發環境

創建項目

調試

調試真機JSbundle

調試開發頁面

打包

項目結構

iOS集成WeexBox

集成SDK

初始化

事件通知

網路

熱更新

路由

Android 集成 WeexBox

初始化

事件通知

網路

熱更新

路由

靜態資源

圖片載入

網路載入

從 APP bundle 中載入

從 APP 文件中載入

modal

热门新闻

周热门

WeexBox 快速上手

概述

快速上手

支持的系統

開發環境

創建項目

調試

調試真機JSbundle

調試開發頁面

打包

項目結構

iOS集成WeexBox

集成SDK

初始化

事件通知

網路

熱更新

路由

Android 集成 WeexBox

初始化

事件通知

網路

熱更新

路由

靜態資源

圖片載入

網路載入

從 APP bundle 中載入

從 APP 文件中載入

modal

跨平台weex、rn、flutter怎麼選吶？怎麼說出有說服力的理由?都可以學，都火都有坑怎麼選吶？

Chameleon原理首發

移動跨平台技術方案總結

「前端」weex頁面傳參

淺析Weex原理

Weex快速入門

Weex-Android實踐（二）：實現Material Design風格Button

我想和男友聊天，可他卻總在打遊戲，我很生氣怎麼辦？

INFP 型的人們都在做什麼工作？

為什麼安靜時頭部會有高頻、尖銳的「嚶——」的聲音？

睡覺的時候手會不自覺的放到頭頂上是一種怎樣的心理暗示？該怎樣解決這個問題？

經常做夢哭醒表明了什麼？

有些人為什麼會很容易被嚇到?

聽不見鬧鐘響怎麼辦？

iPhone上用藍牙耳機，藍牙耳機音量調到最小還是太大、有什麼辦法嗎？

热门新闻

周热门