WEEX 第三方外掛開發教程

weex 是阿里巴巴集團在去年4月份開源的一個使用JS進行程式碼編寫，多端實現執行的開源框架。這也是國內少有的大型開源專案(目前stars 的數量也超過了10K)。

Write Once Run Everywhere

weex的的目的就是為了解放生產力，讓更少的人去維護更少的程式碼。weex雖然目前還在密集開發階段，可用到內部元件，相對少一點，由於是開源專案，因此大家都可以自己貢獻自己的開發元件。

其中weex的元件有兩種，一種是完全基於提供的api和element去進行封裝擴充套件，類似weex-percentage-circle. 你完全不需要會任何的android/iOS知識和技能就完成一個簡單的元件封裝。另外一種，叫三方擴充套件外掛可能更好，它需要你在實現某些功能的時候，需要去寫三個平臺的支援 需要支援ios/android/web。當然這並不是非常嚴格的限制，比如你就支援了web,ios，但是如果開發者開發的APP就沒有andorid的要求，這樣的需求也是存在的。

先簡單說下第一種，其實非常簡單。

我們只需要簡單編寫一個weex-demo.we檔案即可

我們只需要在我們專案中這樣引入即可

可以參考weex-percentage-circle

結下來說下第二種，相對複雜點。

在weex中，元件(component ), api或者loader都是擴充套件，因此你並不要引入weex的包。重點說下web這塊的擴充套件。 Android 和 iOS可以參考下面。
Andoird

iOS

如何建立一個元件

首先我們建立一個目錄weex-photo-web, 官方建議我們在進行元件命名的時候使用weex-開頭，然後加上具體的名稱比如photo 然後以具體平臺結尾比如(-web)。這樣的約束也有利於其他開發者快速鎖定他需要使用的第三方元件。

然後我們初始化我們專案npm init因為我們可能絕大多數開發的專案，將來都有可能開放出去，所以建議我們才開始就準備釋出npm上。

接下來，我們可以在新建src目錄，裡面存放我們的原始碼。 我們在src下新建 index.js,簡單說下index.js基本內容。

• 我們需要繼承Weex.Component ,然後覆蓋一些方法。
• 我們需要使用 Weex.registerComponent註冊該元件
• 匯出init的方法，用於元件的安裝。
  
  JavaScript

  // 設定 標籤屬性 const attr = { // ... } // 設定樣式 const style = { // ... } // 設定事件響應 const event = { // ... } // 初始化函式 function init (Weex) { const Component = Weex.Component const extend = Weex.utils.extend // the component's constructor function Hello (data) { Component.call(this, data) } // extend the prototype Hello.prototype = Object.create(Component.prototype) extend(Hello.prototype, proto) // config the attributes, styles and events. extend(Hello.prototype, { attr }) extend(Hello.prototype, { style: extend(Object.create(Component.prototype.style), style) }) extend(Hello.prototype, { event }) Weex.registerComponent('weex-hello', Hello) } // export the init method. export default { init }

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39

  // 設定 標籤屬性 const attr = {     // ... } // 設定樣式 const style = {     // ... }   // 設定事件響應 const event = {     // ... } // 初始化函式 function init (Weex) {     const Component = Weex.Component   const extend = Weex.utils.extend     // the component's constructor   function Hello (data) {     Component.call(this, data)   }     // extend the prototype   Hello.prototype = Object.create(Component.prototype)   extend(Hello.prototype, proto)     // config the attributes, styles and events.   extend(Hello.prototype, { attr })   extend(Hello.prototype, {     style: extend(Object.create(Component.prototype.style), style)   })   extend(Hello.prototype, { event })     Weex.registerComponent('weex-hello', Hello) }   // export the init method. export default { init }

具體 可以參考weex-polaroid-photo

這是寫一個擴充套件元件的基本結構，demo中覆蓋了create方法，除此之外，還有其他一些常用的方法可以用:

• createChildren 建立子節點
• appendChild 在子節點列表裡新增節點的時候
• removeChild 移除子節點列表

你還可以去原始碼檢視更多的方法。

使用元件

開發完成後，如果我們要使用的話，我們只需要在web端安裝元件就行了。

然後在.we檔案加入這樣的標籤就可以了。

使用weex開發一個第三方模組

我們建立一個confirm模組，它實際就是簡單的對一個彈出框的封裝。

使用的話，你只需要引入模組就好

升級到vue後的寫法

WEEX在最近釋出了新的版本，在web端支援vue的渲染，因此我們擴充套件元件可以像寫vue元件的形式去寫了：

然後我們進行註冊就行了

相容老版本weex處理

如果我們需要同時對vue以及老版本的weex支援，我們需要暴露同一個入口，然後通過對window.Vue的判斷去動態例項需要使用元件結構。

可以參考weex-actionSheet

使用weexpack進行外掛的開發

weexpack 是圍繞weex開發一個命令列工具，可以用於我們建立專案和打包，同樣我們可以利用它來進行外掛的開發和使用。

首先我們先全域性安裝weexpack

然後我們自動建立一個標準的外掛專案

然後目錄裡自動包含了我們三端的目錄結構

如果是前端的話，我們就可以在web目錄下進行開發。

同樣 ，我們也可以在一個建立的基本的專案目錄中使用別人的外掛

我們只需要找到外掛的名稱就可以了。同樣也支援本地目錄

參考

https://weex-project.io/doc/advanced/extend-to-html5.html

https://yq.aliyun.com/articles/61055

https://github.com/weexteam/weex-pack