一、序言

小流程中的模块只不过相等于页面中的HTML条码,或者说条码英文名字不那样,接下去他们一同上看下QQ小流程都给他们提供更多了什么样模块吧。

二、罐子模块

能置放其他模块的罐子模块,现阶段主要就有如下表所示三种:

cover-image全面覆盖在原生植物模块其内的相片快照 cover-view全面覆盖在原生植物模块其内的文档快照match-media 相匹配检验结点 movable-area的可移动地区 movable-view可移动的快照罐子,在页面中能拖曳翻转 page-container页面罐子 scroll-view可慢速快照地区 share-element共享资源原素 swiper曲柄快照罐子 swiper-item仅可置放在swiper模块中,宽高手动增设为100% view快照罐子

这儿小小编和我们说说常用的许多罐子模块。

QQ小流程从进阶到专业委员会第五天——-小流程的模块插图

三、此基础文本模块

这儿给他们提供更多了常用的三种图标除了unlock,假如你想用HTML中的条码请在富文档模块中采用,除此之外,小流程中的文档模块是text,如下表所示:

icon图标progressunlock rich-text富文档 text文档
QQ小流程从进阶到专业委员会第五天——-小流程的模块插图1

四、配置文件模块

button按键 checkbox多选工程项目 checkbox-group数项示例,外部由数个checkbox共同组成 editor富文档撰稿器,能对相片、文本展开撰稿 form配置文件 input快捷方式 keyboard-accessory增设 input / textarea 著眼时按键下方 cover-view / cover-image 图标快照 label用以改良配置文件模块的易用性 picker从顶部拍打的慢速示例 picker-view内嵌页面的慢速示例 picker-view-column慢速示例桑利县 radioP3100工程项目 radio-group单项示例,外部由数个 radio 共同组成 slider翻转示例switch开关示例 textarea多行快捷方式
QQ小流程从进阶到专业委员会第五天——-小流程的模块插图2

五、导航模块

本工程项目内的页面跳转,不过不支持外部链接的跳转。

functional-page-navigator仅在插件中有效,用于跳转到插件功能页 navigator页面链接
QQ小流程从进阶到专业委员会第五天——-小流程的模块插图3

六、媒体模块

audio音频camera系统相机image相片live-player实时音视频播放(v2.9.1起支持同层渲染)live-pusher实时音视频录制(v2.9.1起支持同层渲染)video视频(v2.4.0起支持同层渲染)voip-room多人音视频对话
QQ小流程从进阶到专业委员会第五天——-小流程的模块插图4

七、地图

map地图(v2.7.0起支持同层渲染,相关apiwx.createMapContext

八、画布

canvas画布

九、开放模块

web-view承载页面的罐子 adBanner 广告 ad-custom原生植物模板 广告 official-account公众号关注模块opendata用于展示QQ开放的数据

专门用以做广告或者获取小流程的用户的数据。

十、原生植物模块

native-component小流程中的部分模块是由客户端创建的原生植物模块

小流程的原生植物模块为:

cameracanvasinput(仅在focus时表现为原生植物模块)live-playerlive-pushermaptextareavideo

原生植物模块的层级是的,所以页面中的其他模块无论增设 z-index 为多少,都无法盖在原生植物模块上。原生植物模块还无法在 picker-view中采用。

原生植物模块的事件监听不能采用 bind:eventname 的写法,只支持 bindeventname。原生植物模块也不支持 catch 和 capture 的事件绑定方式。原生植物模块会遮挡 vConsole 弹出的调试面板。为了解决原生植物模块层级高的限制。小流程专门提供更多了 cover-view和 cover-image模块,能全面覆盖在部分原生植物模块上面。这两个模块也是原生植物模块,但是采用限制与其他原生植物模块有所不同。

十一、无障碍访问

aria-component满足视障人士对于小流程的访问需求

十二、导航栏

navigation-bar 页面导航条配置结点,用于指定导航栏的许多属性

十三、页面属性配置结点

page-meta页面属性配置结点,用于指定页面的许多属性、监听页面事件

十四、可视化

假如你觉得一个个写模块很麻烦,那么你能采用可视化的方式来采用模块,如图:

QQ小流程从进阶到专业委员会第五天——-小流程的模块插图5

这样能帮助他们快速构建页面。

十五、ui模块

虽然QQ给他们提供更多了许多模块,但是这些模块并不是特别美观,于是乎,小编决定采用许多已经写好了三方的模块,这儿推荐腾讯团队做的一个ui模块库—–WeUI。这儿小编已经下载好了,给我们一个地址:https://url18.ctfile.com/f/7715018-519360361-ee1b16(访问密码:6511),下载好了之后,他们将其放入到工程项目中去,然后添加到工程项目的全局样式文件,如图:

QQ小流程从进阶到专业委员会第五天——-小流程的模块插图6

然后能采用了,如图:

QQ小流程从进阶到专业委员会第五天——-小流程的模块插图7

虽然说weui的模块做的还不错,基本上不用他们自己写样式,但是文档写的不适合小白学习,所以这儿小编给我们推荐一款新的小流程模块库,他是iview weapp,下载地址:https://url18.ctfile.com/f/7715018-519360357-566602(访问密码:6511),由于iview weapp和weui的样式文件不那样,因此他们只有一个个导入,需要什么导入什么,首先打开页面配置文件,如下表所示:

QQ小流程从进阶到专业委员会第五天——-小流程的模块插图8

然后采用自定义的模块名来采用这个模块,如下表所示:

QQ小流程从进阶到专业委员会第五天——-小流程的模块插图9

注:这儿他们需要删除example和build,否则会报错。

十六、自定义模块

在实际开发中,并不是所有的模块都能满足他们的需求,他们总有需要自己写模块的时候,QQ小流程能让他们轻松实现自定义模块,首先他们创建一个自定义的模块文件夹,然后分别写入页面,样式和脚本,如图:

QQ小流程从进阶到专业委员会第五天——-小流程的模块插图10
QQ小流程从进阶到专业委员会第五天——-小流程的模块插图11
QQ小流程从进阶到专业委员会第五天——-小流程的模块插图12

然后他们将该模块导入到他们要应用到该模块的页面配置文件中去,如图:

QQ小流程从进阶到专业委员会第五天——-小流程的模块插图13

然后引入该模块bb,如图:

QQ小流程从进阶到专业委员会第五天——-小流程的模块插图14

十七、数据传递

很多时候,咱们模块中的数据并不全是静态的,有的时候也要做成动态的响应式的模块,这个时候需要他们展开数据传递,首先他们需要在页面文件夹的js文件中去添加需要传递的数据的键值对,如图:

QQ小流程从进阶到专业委员会第五天——-小流程的模块插图15
QQ小流程从进阶到专业委员会第五天——-小流程的模块插图16

十八、条件渲染

还是采用上面的d1数据,条件渲染是将他们所增设的条件展开对比,哪个模块的条件符合显示哪个模块,如图:

QQ小流程从进阶到专业委员会第五天——-小流程的模块插图17

十九、列表渲染

主要就是通过遍历的方式来输出许多数组字典对象,如下表所示:

QQ小流程从进阶到专业委员会第五天——-小流程的模块插图18
QQ小流程从进阶到专业委员会第五天——-小流程的模块插图19

二十、模板

采用模板增加了代码的复用性,想用哪个用哪个,如图:

QQ小流程从进阶到专业委员会第五天——-小流程的模块插图20
QQ小流程从进阶到专业委员会第五天——-小流程的模块插图21

这儿的模板中的data属性他们也能直接在里面给他赋值,如图:

QQ小流程从进阶到专业委员会第五天——-小流程的模块插图22

二十一、引入模板

虽然他们能自己制作模板,但是很多时候为了代码的简洁性,他们需要展开拆分代码,这个时候能采用引入的概念,在此之前,他们需要写一个模板文件,如图:

QQ小流程从进阶到专业委员会第五天——-小流程的模块插图23

然后导入它,如图:

QQ小流程从进阶到专业委员会第五天——-小流程的模块插图24

当然,除此之外除了一个更简单的导入方法,如图:

QQ小流程从进阶到专业委员会第五天——-小流程的模块插图25
QQ小流程从进阶到专业委员会第五天——-小流程的模块插图26

能看到,template中的文本他是不会包含进去的,也是说他只会引入除模板以外的模块和文本。

二十二、总结

本文主要就讲到了关于QQ小流程中的模块的应用,只不过也是他们熟知的页面条码,通过他们他们能在页面中内嵌许多原素,由于现在很多三方模块的崛起,建议我们尽量用三方框架去做。感兴趣请关注小编公众号简易编程网。

注:文中模块的来历及解释部分参考QQ开放文档

作者 nasiapp

在线客服
官方客服
我们将24小时内回复。
12:01
您好,有任何疑问请与我们联系!

选择聊天工具: