一种实现使微信小程序支持自定义组件式开发的方法[发明专利]

(12)发明专利申请

(10)申请公布号 CN 108196832 A(43)申请公布日 2018.06.22

(21)申请号 201810017387.X(22)申请日 2018.01.09

(71)申请人 安徽小马创意科技股份有限公司

地址 243000 安徽省马鞍山市雨山区和泰

天成9栋108室(72)发明人 汪贵　王彦迪　

(74)专利代理机构 马鞍山市金桥专利代理有限

公司 34111

代理人 鲁延生(51)Int.Cl.

G06F 8/20(2018.01)G06F 9/445(2018.01)

权利要求书2页 说明书6页

CN 108196832 A(54)发明名称

一种实现使微信小程序支持自定义组件式开发的方法(57)摘要

本发明公开了一种实现使微信小程序支持自定义组件式开发的方法，通过组件的开发和组件的使用，组件的开发由创建组件构造类和开发自定义组件分步组成，组件的使用由引入组件模板和初始化组件分布组成，初始化、将组件的数据“注入”到页面的data对象中、把组件的事件“合并”到页面对象上、开发自定义组件、在组件目录components下建立自定义的组件目录、实现自动通过传入的api接口获取接口数据并实现数据行的绘制和分页、在脚本文件index.js中、顶部先定义组件的命名空间、建立组件默认配置对象、初始化方法init、数据加载的实现、引入组件模板、初始化组件一系列的步骤实现自定义组件式开发。

CN 108196832 A

权　利　要　求　书

1/2页

1.一种实现使微信小程序支持自定义组件式开发的方法，通过组件的开发和组件的使用，其特征在于，组件的开发由创建组件构造类和开发自定义组件分步组成，组件的使用由引入组件模板和初始化组件分布组成。

2.一种实现使微信小程序支持自定义组件式开发的方法，包括如下步骤：S1：创建组件构造类：S11：初始化；

初始化时需传入组件的命名空间，组件的配置项options，组件可提供外部调用的方法，通过小程序提供的方法getCurrentPages拿到当前界面对象page并赋值于全局变量this.page，然后实现组件data对象和事件的初始化和绑定；

S12：将组件的数据“注入”到页面的data对象中：遍历初始化时传入的配置对象，并绑定到当前页面对象this.page的数据对象上，并带上组件的命名空间；

this.page.setData({

[命名空间]:配置对象options})；S13：把组件的事件“合并”到页面对象上；遍历初始化时传入的方法事件methods，将methods内的方法带上命名空间前缀挂载到页面对象this.page上；

this.page[命名空间.方法键值]＝methods[方法键值]；

同时将方法名重命名并绑定到当前页面对象this.page的data对象上，并带上组件的命名空间；

this.setData({

[命名空间.方法键值]:`命名空间.方法键值`，})；S2：开发自定义组件：S21：在组件目录components下建立自定义的组件目录：PageList建立组件目录PageList，创建页面index，自动生成index.wxml，index，mxss，index.js；

S22：在脚本文件index.js中，顶部先定义组件的命名空间：massoft.pagelist；S23：建立组件默认配置对象：数据请求地址:url；数据源:dataSource；页码:page；

分页数:pageSize；S24：初始化方法init：方法传入配置参数，传入的参数和组件默认参数进行复制合并生成options变量，然后初始化component.js，传入初始化参数对象：命名空间，配置options，组件要暴露的方法事件；

S25：数据加载的实现：

2

CN 108196832 A

权　利　要　求　书

2/2页

定义方法loadData，需要传入数据接口地址url(由组件初始化时传入)，异步请求接口，在返回数据的回调中，将返回的数据绑定到页面page的数据对象data命名空间massoft.pagelist.dataSource下；

S3：引入组件模板：

在页面的模板文件wxml中import组件的模板；在需要放置组件的地方写入代码：data＝\"{{...massoft.pagelist.dataSource}}\">并绑定数据data＝{{...组件命名空间.自定义名称}}其中data是官方属性，用来为模板传递数据；S4：初始化组件：

在页面脚本文件*.js的顶部先引入组件文件：importpageList from'../../components/PageList/index.js'；在页面的js文件onLoad方法中中初始化组件，执行组件的init方法并传入需要的配置属性：传入数据请求的url即可。

3

CN 108196832 A

说　明　书

1/6页

一种实现使微信小程序支持自定义组件式开发的方法

技术领域

[0001]本发明涉及到一种用于微信自定义组件开发方法，特别涉及一种用于微信 小程序支持自定义组件的方法。

背景技术

[0002]在微信的小程序开发上官方提供了模版的概念，同时又给出了两种引用方 式：import和include，include方式是将你的模版原封不动的“粘贴”到引用的 地方，而我们经常需要开发的是一个交互组件，势必会碰到数据绑定和事件绑 定，导致开发小程序是各种限制，对于开发者非常不友好，框架比较简陋，原 始，可复用较差，没有实现自定义组件的功能。

发明内容

[0003]本发明的目的在于提供一种实现使微信小程序支持自定义组件式开发的方 法，该方法在import的形式来使用组件，避开数据绑定和事件绑定的影响。[0004]为实现上述目的，本发明提供如下技术方案：一种实现使微信小程序支持 自定义组件式开发的方法，通过组件的开发和组件的使用，组件的开发由创建 组件构造类和开发自定义组件分步组成，组件的使用由引入组件模板和初始化 组件分布组成。[0005]一种实现使微信小程序支持自定义组件式开发的方法，包括如下步骤：[0006]S1：创建组件构造类：[0007]S11：初始化；

[0008]初始化时需传入组件的命名空间nameSpace，组件的配置项options，组件 可提供外部调用的方法methods，通过小程序提供的方法getCurrentPages拿到当 前界面对象page并赋值于全局变量this.page，然后实现组件data对象和事件的 初始化和绑定；[0009]S12：将组件的数据“注入”到页面的data对象中：[0010]遍历初始化时传入的配置对象options，并绑定到当前页面对象this.page的 data对象上，并带上组件的命名空间；[0011]this.page.setData({

[0012][命名空间]:配置对象options[0013]})；

[0014]S13:把组件的事件“合并”到页面对象上；[0015]遍历初始化时传入的方法事件methods，将methods内的方法带上命名空间 前缀挂载到页面对象this.page上；

[0016]this.page[命名空间.方法键值]＝methods[方法键值]；

[0017]同时将方法名重命名并绑定到当前页面对象this.page的data对象上，并带 上组件的命名空间；

[0018]this.setData({

4

CN 108196832 A[0019]

说　明　书

2/6页

[命名空间.方法键值]:`命名空间.方法键值`，

[0020]})；[0021]S2：开发自定义组件：[0022]S21：在组件目录components下建立自定义的组件目录：[0023]PageList建立组件目录PageList，创建页面index，自动生成index.wxml， index，mxss，index.js；[0024]S22：在脚本文件index.js中，顶部先定义组件的命名空间：massoft.pagelist；[0025]S23：建立组件默认配置对象：[0026]数据请求地址:url；[0027]数据源:dataSource；[0028]页码:page；

[0029]分页数:pageSize；[0030]S24：初始化方法init：[0031]方法传入配置参数，传入的参数和组件默认参数进行复制合并生成options 变量，然后初始化component.js，传入初始化参数对象：命名空间，配置options， 组件要暴露的方法事件；[0032]S25：数据加载的实现：[0033]定义方法loadData，需要传入数据接口地址url(由组件初始化时传入)，异步 请求接口，在返回数据的回调中，将返回的数据绑定到页面page的数据对象data 命名空间massoft.pagelist.dataSource下；[0034]S3：引入组件模板：

[0035]在页面的模板文件wxml中import组件的模板；[0036][0037]在需要放置组件的地方写入代码：[0038][0039]data＝\"{{...massoft.pagelist.dataSource}}\">[0040]并绑定数据data＝{{...组件命名空间.自定义名称}}[0041]其中data是官方属性，用来为模板传递数据；[0042]S4：初始化组件：

[0043]在页面脚本文件*.js的顶部先引入组件文件：[0044]importpageList from'../../components/PageList/index.js'；[0045]在页面的js文件onLoad方法中中初始化组件，执行组件的init方法并传入 需要的配置属性：传入数据请求的url即可。[0046]与现有技术相比，本发明的有益效果是：本实现使微信小程序支持自定义 组件式开发的方法，初始化、将组件的数据“注入”到页面的data对象中、把组 件的事件“合并”到页面对象上、开发自定义组件、在组件目录components下建 立自定义的组件目录、实现自动通过传入的api接口获取接口数据并实现数据行 的绘制和分页、在脚本文件index.js中、顶部先定义组件的命名空间、建立组件 默认配置对象、初始化方法init、数据加载的实现、引入组件模板、初始化组件 一系列的步骤实现自定义组件式开发。

5

CN 108196832 A

说　明　书

3/6页

具体实施方式

[0047]下面将结合本发明实施例，对本发明实施例中的技术方案进行清楚、完 整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部 的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性 劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

[0048]一种实现使微信小程序支持自定义组件式开发的方法，通过组件的开发和 组件的使用，组件的开发由创建组件构造类和开发自定义组件分步组成，组件 的使用由引入组件模板和初始化组件分布组成。[0049]实施例一：

[0050]一种实现使微信小程序支持自定义组件式开发的方法，包括如下步骤：[0051]S1：创建组件构造类：[0052]S11：初始化；

[0053]初始化时需传入组件的命名空间nameSpace，组件的配置项options，组件 可提供外部调用的方法methods，通过小程序提供的方法getCurrentPages拿到当 前界面对象page并赋值于全局变量this.page，然后实现组件data对象和事件的 初始化和绑定；[0054]S12：将组件的数据“注入”到页面的data对象中：[0055]遍历初始化时传入的配置对象options，并绑定到当前页面对象this.page的 data对象上，并带上组件的命名空间；[0056]this.page.setData({

[0057][命名空间]:配置对象options[0058]})，这样做方便在模板布局文件(*.wxml)内进行方法绑定；[0059]S13：把组件的事件“合并”到页面对象上；[0060]遍历初始化时传入的方法事件methods，将methods内的方法带上命名空间 前缀挂载到页面对象this.page上；

[0061]this.page[命名空间.方法键值]＝methods[方法键值]；

[0062]同时将方法名重命名并绑定到当前页面对象this.page的data对象上，并带 上组件的命名空间；

[0063]this.setData({

[0064][命名空间.方法键值]:`命名空间.方法键值`，[0065]})；[0066]S2：开发自定义组件：[0067]S21：在组件目录components下建立自定义的组件目录，实现自动通过传入 的api接口获取接口数据并实现数据行的绘制和分页；[0068]PageList建立组件目录PageList，创建页面index，自动生成index.wxml， index，mxss，index.js；[0069]S22：在脚本文件index.js中，顶部先定义组件的命名空间：massoft.pagelist；[0070]S23：建立组件默认配置对象：[0071]数据请求地址:url；

6

CN 108196832 A[0072]

说　明　书

4/6页

数据源:dataSource；

[0073]页码:page；

[0074]分页数:pageSize；[0075]S24：初始化方法init：[0076]方法传入配置参数，传入的参数和组件默认参数进行复制合并生成options 变量，然后初始化component.js，传入初始化参数对象：命名空间，配置options， 组件要暴露的方法事件；[0077]S25：数据加载的实现：[0078]定义方法loadData，需要传入数据接口地址url(由组件初始化时传入)，异步 请求接口，在返回数据的回调中，将返回的数据绑定到页面page的数据对象data 命名空间massoft.pagelist.dataSource下；[0079]S3：引入组件模板：

[0080]在页面的模板文件wxml中import组件的模板；[0081][0082]在需要放置组件的地方写入代码：[0083][0084]data＝\"{{...massoft.pagelist.dataSource}}\">[0085]并绑定数据data＝{{...组件命名空间.自定义名称}}[0086]其中data是官方属性，用来为模板传递数据；[0087]S4：初始化组件：

[0088]在页面脚本文件*.js的顶部先引入组件文件：[0089]importpageList from'../../components/PageList/index.js'；[0090]在页面的js文件onLoad方法中中初始化组件，执行组件的init方法并传入 需要的配置属性：传入数据请求的url即可，ageList组件会自动在组件内部进行 数据请求并回绑数据，实现复用。[0091]实施例二：

[0092]新建一个组件：[0093]创建wxml文件：

7

CN 108196832 A[0094]

说　明　书

5/6页

[0095][0096][0097][0098][0099][0100][0101][0102][0103][0104][0105][0106][0107][0108][0109]

创建JS文件：import Component from'../component'；const nameSpace＝'massoft.miniplayer'；export default{setDefaults(){return{

isPlaying:false,}；},/***初始化*/

init(id,opts＝{}){

this.idx＝id||'miniplayer'；this.options＝Object.assign({

8

CN 108196832 A[0110]

说　明　书

6/6页

},this.setDefaults(),opts)；

[0111]let_this＝this；[0112]const component＝new Component({[0113]scope:`${nameSpace}.${_this.idx}`,[0114]data:_this.options,[0115]methods:{

[0116]waveTouchStart:function(e){[0117]console.log(e)；[0118]},

[0119]setIsPlaying:function(isPlaying){

[0120]this.page.setData({[`${nameSpace}.${_this.idx}.isPlaying`]:isPlaying})；[0121]},[0122]})；[0123]return component；[0124]},[0125]}

[0126]使用：

[0127]页面文件中：

[0128][0129]脚本文件中：

[0130]import{miniPlayer}from'../../components/mswx'；[0131]Let_miniPlayer＝miniPlayer.init()；[0132]综上所述，本发明提出的实现使微信小程序支持自定义组件式开发的方法， 初始化、将组件的数据“注入”到页面的data对象中、把组件的事件“合并”到页 面对象上、开发自定义组件、在组件目录components下建立自定义的组件目录、 实现自动通过传入的api接口获取接口数据并实现数据行的绘制和分页、在脚本 文件index.js中、顶部先定义组件的命名空间、建立组件默认配置对象、初始化 方法init、数据加载的实现、引入组件模板、初始化组件一系列的步骤实现自定 义组件式开发。[0133]以上所述，仅为本发明较佳的具体实施方式，但本发明的保护范围并不局 限于此，任何熟悉本技术领域的技术人员在本发明揭露的技术范围内，根据本 发明的技术方案及其发明构思加以等同替换或改变，都应涵盖在本发明的保护 范围之内。

9