摘要：目前團(tuán)隊(duì)使用已研發(fā)了好幾款，它能滿足及支撐我們上百個(gè)頁面的業(yè)務(wù)場景，讓我們的開發(fā)效率大大提升，使我們的技術(shù)棧更加完善。最后希望我們的方案能幫助開發(fā)中的你。

WeexBox官方QQ群號:943913583

一提到 Weex，相信下面已經(jīng)有一群小伙伴在哀嚎了，是的，大多數(shù)開發(fā)者對 Weex 的感情是既愛又恨的。Weex 是優(yōu)秀的跨平臺框架，「Write Once, Run Everywhere」，但坑也多的不要不要的，特別對于剛開始嘗試 Weex 開發(fā)的團(tuán)隊(duì)來說，各種坑和不友好把許多人勸退了。

首先聊聊我們?yōu)槭裁催x擇weex，在我們做技術(shù)選型時(shí)，綜合考慮了目前市面上比較流行的RN、Weex，最終我們選擇了 Weex。在決定使用哪種技術(shù)前，我們也在不斷的問自己，為什么，為什么，為什么？在綜合考慮各種因素后，我們技術(shù)團(tuán)隊(duì)決定使用weex。

決定使用哪種技術(shù)，主要看其優(yōu)缺點(diǎn)：其優(yōu)點(diǎn)來驗(yàn)證，是否符合我們的業(yè)務(wù)場景；其缺點(diǎn)來判斷，是否限制我們的業(yè)務(wù)場景，是否有方案避開這種限制。

使用weex的優(yōu)點(diǎn)：

Weex 使用同一套代碼來構(gòu)建 Android、iOS 和 Web 應(yīng)用。

Weex 能用 Vue 的前端框架，貼近我們的技術(shù)棧

Weex 比 RN 更輕量，體積小巧，可以分包，每個(gè)頁面一個(gè)實(shí)例，性能更好

學(xué)習(xí)成本低，上手快

有良好的擴(kuò)展性，比較好擴(kuò)展新的 Component 和 Module

同時(shí)，它也因資料少，社區(qū)活躍度不夠，相對的坑較多，被大家一直詬病。我們收集了大家在開發(fā)中遇見的問題，針對這些問題，我們開發(fā)了WeexBox框架，并致力于：

擴(kuò)展 weex 的能力

把最佳實(shí)踐帶入進(jìn)來，提供大前端正確擁抱的姿勢

開發(fā)一些實(shí)用工具，帶來更棒的開發(fā)體驗(yàn)

填掉 weex 的坑

最終，開發(fā)者能夠?qū)Ｗ慴ug了~~~

零配置，開箱即用的項(xiàng)目，自帶最佳實(shí)踐

無需安裝 weex-toolkit（有多少汪在這一步安裝不上、運(yùn)行報(bào)錯(cuò)的。來，舉個(gè)爪）

比 weex-debugger、weex-builder 更快的構(gòu)建速度

支持 sass、es6、file-loader、uglify、eslint等

可通過審核的熱更新，靜默模式和強(qiáng)制模式隨意切換

N 多實(shí)用的 Module 擴(kuò)展

合摩大前端團(tuán)隊(duì)實(shí)現(xiàn)了app開發(fā)從0到1，9天上線的壯舉！可見 WeexBox 能夠帶來開發(fā)效率的巨大提升。

@weexbox/cli 幫助你快速初始化工程項(xiàng)目。

# 安裝
cnpm i -g @weexbox/cli

# 新建一個(gè)weex工程
weexbox create projectName

# 進(jìn)入工程
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            // 配置文件

安裝依賴后，項(xiàng)目的結(jié)構(gòu)如上，同時(shí)也搭建了app 的基礎(chǔ)架構(gòu)；在工程 platforms 文件夾中，會看到兩個(gè)文件夾 android 、ios，Android 端使用 Android Studio 開發(fā)工具，導(dǎo)入 platforms/android 文件夾，構(gòu)建打包生成項(xiàng)目的apk；iOS 端使用 Xcode 開發(fā)工具，導(dǎo)入 platforms/ios 文件夾，構(gòu)建打包生成項(xiàng)目的ipa；隨后，在src下建立業(yè)務(wù)模塊，就可以愉快的開發(fā)了~

這時(shí)你可能又有疑問了？本地書寫的代碼，如何能及時(shí)的展示在app界面上呢，不可能要每次打包吧，這樣的話，也太LOW了！對的，不需要，這時(shí)你需要進(jìn)入 Debug 調(diào)試 中了。

Tips: 確保電腦與手機(jī)處于同一網(wǎng)段.

npm run debug

打開app的調(diào)試掃碼工具,掃二維碼使pc與移動(dòng)終端建立連接

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

打開app的調(diào)試掃碼工具,掃二維碼使pc與移動(dòng)終端建立連接

更多詳細(xì)的 debug 步驟請查看，WeexBox 開發(fā)指南中的 Debug 調(diào)試

WeexBox 也提供了很多常見的模塊。

1、豐富的 modal 模塊

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

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

# 警告彈框
modal.alert({
  title: "標(biāo)題",
  message: "彈窗內(nèi)容",
  okTitle: "確定"
}, (result) => {

})
// callback參數(shù)
result: {
  status: 0
}

效果圖：

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

# 操作表彈窗，配合 wb-external 可調(diào)取攝像頭及相冊
modal.actionSheet({
  title: "標(biāo)題",
  message: "彈窗內(nèi)容",
  actions: [{
    // 按鈕類型"danger", "cancel", "normal"。默認(rèn)normal
    type: "danger",
    // 按鈕的標(biāo)題
    title: "刪除"
  }]
}, (result) => {

})

// callback參數(shù)
result: {
  // 取消按鈕-1，其他0
  status: 0,
  data: {
    // 按鈕的索引
    index: 0
  }
}

效果圖：

等等功能，更多常見的modal api，詳情請查看 傳送門

2、 打開外部功能 Module

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

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

})

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

等等功能，更多常見的external api，詳情請查看 傳送門

目前 weex 官方也在不斷的更新，雖然有各種bug被人詬病，但是，哪個(gè)優(yōu)秀的技術(shù)發(fā)展沒有經(jīng)歷這樣的過程呢，“不經(jīng)一番寒徹骨，怎得梅花撲鼻香”，技術(shù)本身就沒有對錯(cuò)，只有我們調(diào)整好自己的心態(tài)，挖掘底層事物，墊好自己的基石，讓技術(shù)更好的為業(yè)務(wù)服務(wù)。

項(xiàng)目團(tuán)隊(duì)通過大量的業(yè)務(wù)實(shí)踐和積累以后，總結(jié)歸納出這套基于 weex 的技術(shù)方案 WeexBox 并開源，解決大家在使用 weex 所遇見的各種坑，同時(shí)對官方的 Module 進(jìn)行拓展、延伸，提供了更加豐富的模塊，解決實(shí)際業(yè)務(wù)場景中的問題。目前團(tuán)隊(duì)使用 WeexBox 已研發(fā)了好幾款A(yù)PP，它能滿足及支撐我們上百個(gè)頁面的業(yè)務(wù)場景，讓我們的開發(fā)效率大大提升，使我們的技術(shù)棧更加完善。

在使用中有任何問題，歡迎給我們issue，有任何想法也歡迎PR。

最后希望我們的方案能幫助開發(fā)中的你。

官網(wǎng)地址：https://aygtech.github.io/wee...

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

附上一份完整功能列表