【開源】合摩 WeexBox 正式發佈

WeexBox

一套簡潔高效的APP混合開發解決方案

寫在開頭

WeexBox官方QQ羣號:943913583

一提到 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、es六、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: 確保電腦與手機處於同一網段.

一、調試打包在真機上的代碼

npm run debug

打開app的調試掃碼工具,掃二維碼使pc與移動終端創建鏈接

二、調試正在開發的頁面

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

打開app的調試掃碼工具,掃二維碼使pc與移動終端創建鏈接

更多詳細的 debug 步驟請查看，WeexBox 開發指南中的 Debug 調試

WeexBox 也提供了不少常見的模塊。

如何使用呢？

一、豐富的 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，詳情請查看 傳送門

二、 打開外部功能 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。

最後但願咱們的方案能幫助開發中的你。

官網地址：https://aygtech.github.io/wee...

github： https://github.com/aygtech/ay...

附上一份完整功能列表