微信小程序组件封装

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

• 界面模板<template>

• JS代码<script>

• CSS效果<style>

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

界面模板

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

<template>
    <view style="{{customStyle}}">
        <text>我是具体组件</text>
    </view>
</template>

JS代码

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

• 数据(data) 用于定义封装组件所属的特有功能或特点、例如：在一个文本类组件中、可以通过定义属性的方式设置该组件中的文本字体颜色、在可视化设计时则可以通过属性编辑框为组件设置、在代码中可以通过"组件名.属性名"的方式进行设置；属性支持以下5种类型值：

  • 文本型
  • 整数型(数值型)
  • 逻辑型
  • 数组
  • 对象(可视化设计时不可用)

• 方法(methods) 用于定义组件的方法、在代码中使用、例如一个列表组件如果要想向列表框中添加项目、则可以定义一个“添加项目”的方法、用户在代码中通过"组件对象.添加项目"即可向列表框中添加数据。

• 事件 用于定义组件的回调事件、例如一个列表框组件、当用户点击项目时、要回调点击事件告诉开发者、分发事件需要使用“triggerEvent”方法。

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

<script>
    const sview = require('../sview')
    Component({
        behaviors:[sview],
        data:{
           mTitle:""
        },
        methods:{
           置标题(mTitle){ this.setData({mTitle:mTitle}); },
           取标题(){ return this.data.mTitle; },
           disOnClick(e){
           this.triggerEvent('onClick',{e:e})
           },
        }
    })
</script>

上述代码讲解：

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

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

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

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

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

methods: 定义组件的方法

3.定义属性

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

4.定义事件

定义事件时需要注意：由于事件需要先在 template 模板中注册、因此不能使用中文、且建议以 disOn 开头、后跟具体事件名称、例如：disOnClick 表示当组件被单击时触发该事件、然后通过“triggerEvent”函数分发出去；这个函数中有两个方法、第一个是这个组件在被使用时注册的事件名称(非类库封装开发者不需要了解)、第二个为事件传递出去的参数对象、例如：这里传出去的为“e”也就是原事件源、如果你还需要传出其它参数、添加再添加一个字段及值即可。但需要注意的是：在编写 xml 节点树的时候、需要指定 disargs 属性。默认为 disargs="(e)"

methods:{
    disOnClick(e){
        this.triggerEvent('onClick',{e:e})
    }
}

CSS效果

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

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