WeexBox
一套簡潔高效的APP混合開發解決方案
寫在開頭
一提到 Weex，相信下面已經有一群小夥伴在哀嚎了，是的，大多數開發者對 Weex 的感情是既愛又恨的。Weex 是優秀的跨平臺框架，「Write Once, Run Everywhere」，但坑也多的不要不要的，特別對於剛開始嘗試 Weex 開發的團隊來說，各種坑和不友好把許多人勸退了。
首先聊聊我們為什麼選擇weex，在我們做技術選型時，綜合考慮了目前市面上比較流行的RN、Weex，最終我們選擇了 Weex。在決定使用哪種技術前，我們也在不斷的問自己，為什麼，為什麼，為什麼？在綜合考慮各種因素後，我們技術團隊決定使用weex。
決定使用哪種技術，主要看其優缺點：其優點來驗證，是否符合我們的業務場景；其缺點來判斷，是否限制我們的業務場景，是否有方案避開這種限制。
使用weex的優點：
- Weex 使用同一套程式碼來構建 Android、iOS 和 Web 應用。
- Weex 能用 Vue 的前端框架，貼近我們的技術棧
- Weex 比 RN 更輕量，體積小巧，可以分包，每個頁面一個例項，效能更好
- 學習成本低，上手快
- 有良好的擴充套件性，比較好擴充套件新的 Component 和 Module
同時，它也因資料少，社群活躍度不夠，相對的坑較多，被大家一直詬病。我們收集了大家在開發中遇見的問題，針對這些問題，我們開發了WeexBox框架，並致力於：
- 擴充套件 weex 的能力
- 把最佳實踐帶入進來，提供大前端正確擁抱的姿勢
- 開發一些實用工具，帶來更棒的開發體驗
- 填掉 weex 的坑
最終，開發者能夠專注寫bug了~~~
WeexBox 的特色
- 零配置，開箱即用的專案，自帶最佳實踐
- 無需安裝 weex-toolkit（有多少汪在這一步安裝不上、執行報錯的。來，舉個爪）
- 比 weex-debugger、weex-builder 更快的構建速度
- 支援 sass、es6、file-loader、uglify、eslint等
- 可通過稽核的熱更新，靜默模式和強制模式隨意切換
- N 多實用的 Module 擴充套件
合摩大前端團隊實現了app開發從0到1，9天上線的壯舉！可見 WeexBox 能夠帶來開發效率的巨大提升。
快速上手
@weexbox/cli 幫助你快速初始化工程專案。
# 安裝
cnpm i -g @weexbox/cli
# 新建一個weex工程
weexbox create projectName
# 進入工程
cd projectName
# 安裝依賴
cnpm i
# 隨後，可以愉快的寫bug了...
複製程式碼專案結構
.
├── config // 配置資料夾
│ ├── update-config.json // 熱更新的配置檔案
│ └── weexbox-config.js // 圖片資源的配置檔案
├── deploy // 輸出資料夾
├── platforms // 原生資料夾
│ ├── android // Android工程
│ └── ios // iOS工程
├── src // vue原始碼資料夾
│ └── module // 模組資料夾
│ ── page // 頁面資料夾
│ ├── App.vue // vue原始碼
│ └── index.js // 入口檔案
├── static // 圖片資原始檔夾
└── package.json // 配置檔案
複製程式碼安裝依賴後，專案的結構如上，同時也搭建了app 的基礎架構；在工程 platforms 資料夾中，會看到兩個資料夾 android 、ios，Android 端使用 Android Studio 開發工具，匯入 platforms/android 資料夾，構建打包生成專案的apk；iOS 端使用 Xcode 開發工具，匯入 platforms/ios 資料夾，構建打包生成專案的ipa；隨後，在src下建立業務模組，就可以愉快的開發了~
這時你可能又有疑問了？本地書寫的程式碼，如何能及時的展示在app介面上呢，不可能要每次打包吧，這樣的話，也太LOW了！對的，不需要，這時你需要進入 Debug 除錯 中了。
Debug 除錯
Tips: 確保電腦與手機處於同一網段.
1、除錯打包在真機上的程式碼
npm run debug
複製程式碼
開啟app的除錯掃碼工具,掃二維碼使pc與移動終端建立連線
2、除錯正在開發的頁面
npm run debug [vue/weex頁面的路徑]
複製程式碼開啟app的除錯掃碼工具,掃二維碼使pc與移動終端建立連線
更多詳細的 debug 步驟請檢視，WeexBox 開發指南中的 Debug 除錯
WeexBox 也提供了很多常見的模組。
如何使用呢？
1、豐富的 modal 模組
modal 模組，除了常見的：alert、confirm外，還延伸了一些更頻繁使用的api，eg：actionSheet（操作表彈框）、showLoading（顯示菊花）等，更加常態化、大眾化以及多元化。
# 引用
const modal = weex.requireModule('wb-modal')
# 警告彈框
modal.alert({
title: '標題',
message: '彈窗內容',
okTitle: '確定'
}, (result) => {
})
// callback引數
result: {
status: 0
}
複製程式碼效果圖：
# 引用
const modal = weex.requireModule('wb-modal')
# 操作表彈窗，配合 wb-external 可調取攝像頭及相簿
modal.actionSheet({
title: '標題',
message: '彈窗內容',
actions: [{
// 按鈕型別'danger', 'cancel', 'normal'。預設normal
type: 'danger',
// 按鈕的標題
title: '刪除'
}]
}, (result) => {
})
// callback引數
result: {
// 取消按鈕-1，其他0
status: 0,
data: {
// 按鈕的索引
index: 0
}
}
複製程式碼效果圖：
等等功能，更多常見的modal api，詳情請檢視 傳送門
2、 開啟外部功能 Module
# 引用
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'
}
}
複製程式碼等等功能，更多常見的external api，詳情請檢視 傳送門
寫在最後
目前 weex 官方也在不斷的更新，雖然有各種bug被人詬病，但是，哪個優秀的技術發展沒有經歷這樣的過程呢，“不經一番寒徹骨，怎得梅花撲鼻香”，技術本身就沒有對錯，只有我們調整好自己的心態，挖掘底層事物，墊好自己的基石，讓技術更好的為業務服務。
專案團隊通過大量的業務實踐和積累以後，總結歸納出這套基於 weex 的技術方案 WeexBox 並開源，解決大家在使用 weex 所遇見的各種坑，同時對官方的 Module 進行擴充、延伸，提供了更加豐富的模組，解決實際業務場景中的問題。目前團隊使用 WeexBox 已研發了好幾款APP，它能滿足及支撐我們上百個頁面的業務場景，讓我們的開發效率大大提升，使我們的技術棧更加完善。
在使用中有任何問題，歡迎給我們issue，有任何想法也歡迎PR。
最後希望我們的方案能幫助開發中的你。
官網地址：aygtech.github.io/weexbox/
github： github.com/aygtech/ayg…
附上一份完整功能列表
