WEEX 第三方插件开发教程

为什么80%的码农都做不了架构师？>>>   

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中，组件(component ), api或者loader都是扩展，因此你并不要引入weex的包。重点说下web这块的扩展。 Android 和 iOS可以参考下面。

 

Andoird（https://weex-project.io/doc/advanced/extend-to-android.html）

iOS（https://weex-project.io/doc/advanced/extend-to-ios.html）

 

如何创建一个组件

 

首先我们创建一个目录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" οnclick="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" οnclick="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://my.oschina.net/Seas0n/blog/840492