WEEX 第三方外掛開發教程

發表於2017-02-09

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檔案即可

<template>  
    <div><text>{{textstr}}</text></dv>  
</template>

<script>  
  export default { }
</script>

<style>  
 … you style
</style>

<div><text>{{textstr}}</text></dv>

</template>

export default { }

</script>

<style>

… you style

</style>

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

<template>  
    <weex-demo textstr=“demo”></weex-demo>
</template>  
<script>  
    require(‘./weex-demo.we’);
</script>

<weex-demo textstr=“demo”></weex-demo>

</template>

require(‘./weex-demo.we’);

</script>

可以參考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的方法，用於元件的安裝。

// 設定 標籤屬性 
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 }

// 設定標籤屬性

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端安裝元件就行了。

// import the original weex-html5.
import weex from 'weex-html5'  
import polaroidPhoto from 'weex-polaroid-photo-web'  
// install the component.
weex.install(polaroidPhoto)

// import the original weex-html5.

import weex from 'weex-html5'

import polaroidPhoto from 'weex-polaroid-photo-web'

// install the component.

weex.install(polaroidPhoto)

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

<template>  
  <div>
    <weex-polaroid-photo text="hello" src="txt-color:#fff;bg-color:green"
      value="WEEX" onclick="handleClick">
    </weex-polaroid-photo>
  </div>
</template>

<div>

<weex-polaroid-photo text="hello" src="txt-color:#fff;bg-color:green"

value="WEEX" onclick="handleClick">

</weex-polaroid-photo>

</div>

</template>

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

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

const confirm = {  
  // 定義使用者登入方法.
  ask (msg, callbackId) {
    if(window.confirm(msg)) {
      this.sender.performCallback(callbackId)
    }
  },
}

const meta = {  
  confirm: [{
    name: 'ask',
    args: ['string', 'function']
  }]
}

export default {  
  init (Weex) {
    // 註冊這個模組，最後一個引數是模組的元資訊.
    Weex.registerApiModule('confirm', confirm, meta)
  }
}

const confirm = {

// 定義使用者登入方法.

ask (msg, callbackId) {

if(window.confirm(msg)) {

this.sender.performCallback(callbackId)

}

const meta = {

confirm: [{

name: 'ask',

args: ['string', 'function']

}]

}

export default {

init (Weex) {

// 註冊這個模組，最後一個引數是模組的元資訊.

Weex.registerApiModule('confirm', confirm, meta)

}

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

<template>  
  <div>
    <div class="btn" onclick="handleClick">
      <text>ask</text>
    </div>
  </div>
</template>

<script>  
  var confirm = require('@weex-module/confirm')
  module.exports = {
    methods: {
      handleClick: function () {
        confirm.ask('are u ok?', function () {
          // ... do sth. in callback.
        })
      }
    }
  }
</script>

<div>

</div>

</template>

var confirm = require('@weex-module/confirm')

module.exports = {

methods: {

handleClick: function () {

confirm.ask('are u ok?', function () {

// ... do sth. in callback.

})

}

</script>

升級到vue後的寫法

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

<!-- sidebar.vue -->  
<template>  
  <div class="sidebar">
    <slot></slot>
  </div>
</template>  
<style scoped>  
  .sidebar {
    /* ... */
  }
</style>  
<script>  
  export default {
    props: [],
    data () {
      return {}
    }
  }
</script>

</div>

</template>

.sidebar {

/* ... */

}

</style>

export default {

props: [],

data () {

return {}

}

</script>

然後我們進行註冊就行了

import Vue from 'vue'  
import Sidebar from './path/to/sidebar.vue'  
// 全域性註冊 sidebar 元件
Vue.component('sidebar', Sidebar)

import Vue from 'vue'

import Sidebar from './path/to/sidebar.vue'

// 全域性註冊 sidebar 元件

Vue.component('sidebar', Sidebar)

相容老版本weex處理

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

可以參考weex-actionSheet

使用weexpack進行外掛的開發

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

首先我們先全域性安裝weexpack

npm install weexpack -g

1	npm install weexpack -g

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

weexpack plugin create  plugin-test

1	weexpack plugin create plugin-test

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

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

weexpack plugin add plugin-name

1	weexpack plugin add plugin-name

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

weexpack plugin add  ../weex-plugin-test

1	weexpack plugin add ../weex-plugin-test

參考

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

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

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

HBuilder 第三方外掛開發
2016-12-16
UI
一些開發中比較好用的第三方外掛
2017-05-10
vue封裝第三方外掛併發布到npm
2017-09-24
Vue封裝NPM
wordpress第三方外掛存在高危漏洞poc
2023-02-01
Angularjs整合第三方外掛 Uploadify
2015-03-26
AngularJS
Obsidian第三方外掛下載
2024-05-21
Weex開發系列（一）：初識Weex
2017-03-13
Maven外掛開發教程
2022-01-10
Maven
Chrome外掛開發教程
2021-09-25
Chrome
Stylus外掛開發教程
2016-09-18
iOS手動新增Cordova官方外掛
2017-07-27
iOS
Webpack+Vue如何匯入Jquery和Jquery的第三方外掛
2017-02-19
WebVuejQuery
eslint外掛開發教程
2020-05-21
EsLint
weex開發環境配置
2018-04-25
開發環境
Weex開發之路（一）：開發環境搭建
2018-12-17
開發環境
Weex開發之路（1）：開發環境搭建
2016-12-20
開發環境
Flutter外掛iOS端開發教程
2020-02-26
FlutteriOS
Omi官方外掛系列 - omi-transform介紹
2017-04-05
ORM
Omi 官方外掛系列 - omi-transform 介紹
2017-04-05
ORM
WordPress外掛開發例項教程 - 版權外掛
2014-04-14
vue 外掛開發教程與釋出
2018-04-25
Vue
sublime外掛開發教程（附原始碼）
2014-10-13
原始碼
Layui三方外掛OPTable的回撥
2020-11-14
UI
超過 8800 個 WordPress 官方外掛存漏洞
2016-12-18
學習筆記479—解決obsidian無法載入第三方外掛
2024-05-08
筆記
Weex開發之正確使用iconfont
2019-01-08
Android Studio Plugin 外掛開發教程（一） —— 開發你的第一個外掛
2017-08-25
AndroidPlugin
4個月原生weex混合開發終結（）
2018-08-21
網易嚴選App感受Weex開發（已完結）
2017-09-22
APP
YonBuilder移動開發-移動原生外掛開發環境配置教程
2023-03-14
UI移動開發開發環境
基於weex的有贊無線開發框架
2018-10-30
框架
頁面重構WEEX開發問題總結
2018-01-08
深入折騰Weex，知乎日報客戶端開發
2016-05-12
客戶端
Weex開源測試之環境搭建，weex未來展望。
2016-06-17
Weex UI 半年開源之路
2018-04-02
UI
Weex 開發小遊戲是件很 high 的事兒
2017-10-20
遊戲
Flutter外掛開發
2019-09-12
Flutter
Mybatis外掛開發
2019-06-10
MyBatis

WEEX 第三方外掛開發教程

如何建立一個元件

使用元件

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

升級到vue後的寫法

相容老版本weex處理

參考

相關文章