WEEX 第三方插件开发教程

Posted 2021-04-29 前端大全

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了WEEX 第三方插件开发教程相关的知识，希望对你有一定的参考价值。

http://www.jackpu.com/weex-di-san-fang-cha-jian-kai-fa-jiao-cheng/

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" 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组件的形式去写了：

<template>

  <div class="sidebar">

    <slot></slot>

  </div>

</template>

<style scoped>

  .sidebar {

    /* ... */

  }

</style>

<script>

  export default {

    props: [],

    data () {

      return {}

    }

  }

</script>