【開源】合摩 WeexBox 正式釋出

MarioHuang發表於2018-12-20
【開源】合摩 WeexBox 正式釋出

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
複製程式碼
【開源】合摩 WeexBox 正式釋出

開啟app的除錯掃碼工具,掃二維碼使pc與移動終端建立連線

【開源】合摩 WeexBox 正式釋出

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
}
複製程式碼

效果圖：

【開源】合摩 WeexBox 正式釋出 
# 引用
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
  }
}

複製程式碼

效果圖：

【開源】合摩 WeexBox 正式釋出

等等功能，更多常見的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…

附上一份完整功能列表

【開源】合摩 WeexBox 正式釋出

相關文章