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文件即可

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

<script>
  export default { }
</script>

<style>
 … you style
</style>

我们只需要在我们项目中这样引入即可

<template>
	<weex-demo textstr=“demo”></weex-demo>
</template>
<script>
	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 }

具体可以参考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)

然后在.we文件加入这样的标签就可以了。

<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)
  }
}

使用的话，你只需要引入模块就好

<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>

升级到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>

然后我们进行注册就行了

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

然后我们自动创建一个标准的插件项目

weexpack plugin create  plugin-test

如果是前端的话，我们就可以在web目录下进行开发。

同样，我们也可以在一个创建的基本的项目目录中使用别人的插件

weexpack plugin add plugin-name

我们只需要找到插件的名称就可以了。同样也支持本地目录

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

https://yq.aliyun.com/articles/61067?spm=5176.100239.blogcont61055.30.6tOb4B