ribbon image search rewind fast-forward speech-bubble pie-graph star

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

You Can Speak "Hi" to Me in Those Ways