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

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

可以参考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的方法,用于组件的安装。

具体 可以参考weex-polaroid-photo

这是写一个扩展组件的基本结构,demo中覆盖了create方法,除此之外,还有其他一些常用的方法可以用:

  • createChildren 创建子节点
  • appendChild 在子节点列表里添加节点的时候
  • removeChild 移除子节点列表

你还可以去源码查看更多的方法。

使用组件

开发完成后,如果我们要使用的话,我们只需要在web端安装组件就行了。

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

使用weex开发一个第三方模块

我们创建一个confirm模块,它实际就是简单的对一个弹出框的封装。

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

升级到vue后的写法

WEEX在最近发布了新的版本,在web端支持vue的渲染,因此我们扩展组件可以像写vue组件的形式去写了:

然后我们进行注册就行了

兼容老版本weex处理

如果我们需要同时对vue以及老版本的weex支持,我们需要暴露同一个入口,然后通过对window.Vue的判断去动态实例需要使用组件结构。

可以参考weex-actionSheet

使用weexpack进行插件的开发

weexpack 是围绕weex开发一个命令行工具,可以用于我们创建项目和打包,同样我们可以利用它来进行插件的开发和使用。

首先我们先全局安装weexpack

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

然后目录里自动包含了我们三端的目录结构

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

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

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

参考

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

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

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

1 2 收藏 评论

相关文章

可能感兴趣的话题



直接登录
跳到底部
返回顶部