小程序类库封装

组件的复用在软件开发中有着非常重要的作用、在本文、我们将介绍、怎样从0开始自己动手封装一个微信小程序的可视化组件；在学习本章教程之前、您需要先掌握或持有基础的微信小程序开发或JS相关开发知识、一个基于微信小程序原生框架的前端组件主要由以下三个部分组成：

界面模板<template>
JS代码<script>
CSS效果<style>

注：在 VcnStudio 安装包中已自带大量基础组件；可参考其基础组件源码进行封装；路径：VcnStudio安装目录/sdk/wechat/components/*.sc

组件文件格式

微信小程序中单个组件文件后缀为 .sc ，其命名为 simple component 的缩写，多个组件可以合并成一个后缀为 .scm 的组件库，与安卓，视窗，网站组件库类似。

这里我们重点讲解单个微信小程序 .sc 组件中代码的组成和格式，以便于我们更好的学习其封装。

先让我们看一下一个标准的轻语言小程序组件的源代码结构：

/* 负责定义界面模板代码 */
<template>
    <view>文本内容</view>
</template>

/* 负责定义组件功能的JS代码 */
<script>
    const sview = require('../sview')
    Component({
      behaviors:[sview],
      data: {

      },
      methods: {

      }
    })
</script>

/* 负责定义组件渲染样式的CSS代码 */
<style>
    .style1{
        width: 100%;
    }
</style>

接下来让我们再分别看下每个部分的详细作用：

界面模板

界面模板主要定义在页面中显示的内容、由 HTML 标签组成、小程序组件界面代码都必须放在 template 标签中；且根组件必须设置 style 的值为“ {{customStyle}} ”变量。例如：

<template>
    <view style="{{customStyle}}">
        <text>{{mTitle}}</text>
    </view>
</template>

JS代码

JS代码主要定义组件的属性、方法、事件、处理组件中的计算属性与界面模板的显示；在JS代码中、主要分为以下几个重要的部分：

继承基础视图sview 每个小程序组件都必须继承继承视图。

数据(data) 用于定义封装组件所属的特有功能或特点、例如：在一个文本类组件中、可以通过定义属性的方式设置该组件中的文本字体颜色、在可视化设计时则可以通过属性编辑框为组件设置、在代码中可以通过"组件对象.属性名"的方式进行设置；属性支持以下5种类型值：
- 文本型
- 整数型(数值型)
- 逻辑型
- 数组
- 对象(可视化设计时不可用)
方法(methods) 用于定义组件的方法、在代码中使用、例如一个列表组件如果要想向列表框中添加项目、则可以定义一个“添加项目”的方法、用户在代码中通过"组件对象.添加项目"即可向列表框中添加数据。
事件用于定义组件的回调事件、例如一个列表框组件、当用户点击项目时、要回调点击事件告诉开发者。

以下为一个简单的组件代码示例：

<script>
    const sview = require("../sview")
    Component({
        behaviors:[sview],
        data:{
           mTitle:""
        },
        methods:{
           置标题(mTitle){ this.setData({mTitle:mTitle}); },
           取标题(){ return this.data.mTitle; },
           置被单击回调(func){
            this.onclick = func;
           },
           disOnClick(e){
               if(this.onclick != null){
                   this.onclick(e);
               }
           }
        }
    })
</script>

上述代码讲解：

1. 引入基础类组件(地址和名称固定)、所有可视组件都必须继承该组件。

const sview = require('../sview')

2. 定义组件字段、继承、属性。

behaviors：固定用法、设置当前组件继承自 sview 即可。

data：组件的字段、用于接收属性方法的值。

methods: 定义组件的方法

3. 定义属性

当在方法中定义了、含有“置”和“取”的前缀方法、如果名字一样、则表示为属性；否则为普通方法、例如上方代码中的标题、即为一个属性。

4. 定义事件

定义事件时需要注意：由于事件需要先在 template 模板中注册、因此不能使用中文、且建议以 disOn 开头、后跟具体事件名称、例如：disOnClick 表示当组件被单击时触发该事件、然后通过“置被单击回调”函数在外部传入的子函数接收该事件。

methods:{
   置被单击回调(func){
    this.onclick = func;
   },
   disOnClick(e){
       if(this.onclick != null){
           this.onclick(e);
       }
   },
}

CSS代码

CSS 即为渲染界面的 style样式代码、通过编写 style 样式、可以渲染出不同的界面或布局、微信小程序开发框架支持所有H5的 style 、因此较简单这里不详细说明、示例代码：

<style>
    .border-style{
        border: #007AFF 1px solid;
    }
</style>

上述示例完整代码

<template>
    <view style="{{customStyle}}" class="border-style">
        <text bindtap="disOnClick" >{{mTitle}}</text>
    </view>
</template>
<script>
    const sview = require("../sview")
    Component({
        behaviors:[sview],
        data:{
           mTitle:""
        },
        methods:{
           置标题(mTitle){ this.setData({mTitle:mTitle}); },
           取标题(){ return this.data.mTitle; },
           标题等于(value){ return this.data.mTitle == value; }
           置被单击回调(func){
                this.onclick = func;
           },
           disOnClick(e){
               if(this.onclick != null){
                   this.onclick(e);
               }
           }
        }
    })
</script>
<style>
    .border-style{
        border: #007AFF 1px solid;
    }
</style>

编写组件存根文档

当我们封装好一个.sc组件后，要想让VcnStudio 的IDE正常使用它，我们还需要为其编写组件的存根文档，在存根文档中，我们需要描述组件的功能，名称以及包含的函数，属性及事件，这样当我们安装组件后，IDE才能正常获取其组件信息，并为使用者提供组件属性，函数的智能提示以及正常参与项目的编译和使用。

在轻语言框架中，我们统一使用 xml 标记语言编写库的存根文档，在安装目录中的sdk/wechat/sdk.xml 文件中包含了内置核心库组件的大量存根文档，可以作为我们编写自己封装的库文档的参考。

为上述示例编写存根文档

接下来让我们为上述示例中的组件编写其属于它的存根文档，编写之前让我们先看一下轻语言中组件库的标准存根文档的模板：

<control name="组件名称" comment="组件的注释，描述组件的具体功能，作者等信息。">
    <property name="属性1" type="文本型" comment="属性功能描述。" />
    <method name="函数1" args="()" return="" comment="函数功能的描述" />
    <method name="置{事件名称}回调" args="(回调函数)" return="" comment="设置事件回调，回调函数返回参数：(事件源)" />
    <interface name="{事件名称}回调" comment="被单击回调接口。">
        <event name="事件名称" return="" args="(事件源)" comment="组件被单击时触发该事件。" />
    </interface>
</control>

模板中相关标签说明：

<control name="示例组件" comment="文档演示的示例组件。">
    <property name="标题" type="文本型" comment="设置或获取当前组件的标题文本。" />
    <method name="标题等于" args="(目标值)" return="" comment="判断当前组件的标题是否等于指定文本。" />
    <method name="置被单击回调" args="(回调函数)" return="" comment="设置被单击事件回调，回调函数返回参数：(事件源)" />
    <interface name="被单击回调" comment="被单击回调接口。">
        <event name="被单击" return="" args="(事件源)" comment="组件被单击时触发该事件。" />
    </interface>
</control>

注意事项

属性如果在JS代码中，存在两个符合set、get定义的函数，例如：置XX、取XX 则规定这两个函数为 属性函数，在编写存根文档时，需将其按照属性定义。
接口事件 如果在JS代码中设置了传入子函数接收回调事件的函数，则必须在存根文件中声明所要分发的具体事件，例如：本例中要向外分发当组件被单击时的事件，则需要定义：被单击回调接口，并在接口标签中声明具体事件。

格式规定：

注册回调函数：置{事件名称}回调

回调事件接口：{事件名称}回调

事件名称：{事件名称}

例如：注册回调函数的函数为：置被单击回调，则回调事件接口命名为：被单击回调，事件名称为：被单击

VcnStudio开发帮助文档

小程序类库封装

组件文件格式

界面模板

JS代码

CSS代码

上述示例完整代码

编写组件存根文档

为上述示例编写存根文档

组件的身份定义

组件的数据状态

组件的行为能力

组件的通信机制

示例代码的存根文档

注意事项