小程序 自定义组件

• 文档地址：
• https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/

开发者可以将页面内的功能模块抽象成自定义组件（思想与vue和react一样），以便在不同的页面中重复使用；也可以将复杂的页面拆分成多个低耦合的模块，有助于代码维护。自定义组件在使用时与基础组件非常相似。

• 步骤：

1. 创建组件（页面）`main.wxml`，其实现的操作是可以被复用的
2. 声明上一步创建好的页面为一个组件（在其`main.json`文件中声明）
3. 此时就可以将组件`main`在其他组件`uescomp.json`中导入并在`uescomp.wxml`进行使用

• 目录结构

• main.wxml文件代码

<!--miniprogram/pages/main/main.wxml-->

<!-- 表单组件：按钮组件 -->
<!-- 常规按钮：底色灰白的，不易见，type值为default（可以不写） -->
<button>常规按钮</button>
<!-- 主要按钮：绿色按钮，最常用的按钮 -->
<button type="primary">主要按钮</button>
<!-- 警告按钮：底色灰色，但是字是红色 -->
<button type="warn">警告按钮</button>
<!-- 按钮开放功能：打开授权，需要配合授权的回调函数，综合案例中再讲 -->
<button open-type="getUserInfo" bindgetuserinfo="getInfo">授权</button>

<!-- 单选按钮组 -->
<!-- 由于单选按钮组中包含了多个redio，因此需要被包裹 -->
<radio-group>
    <radio value="1">男</radio>
    <radio value="2">女</radio>
</radio-group>

<!-- 复选框组 -->
<!-- 与单选按钮组类似，也需要被包裹 -->
<checkbox-group>
    <checkbox value="吃饭">吃饭</checkbox>
    <checkbox value="睡觉">睡觉</checkbox>
    <checkbox value="打DD">打DD</checkbox>
</checkbox-group>

<!--表单组件的标签的样式是需要自己去调节设置的 -->
<input type="text" value="zhangsan" />

• main.json文件代码

{
  "usingComponents": {},
  "component":true
}

• usecomp.json文件代码

{
  "usingComponents": {
    "main": "/pages/main/main"
  }
}

• usecomp.wxml文件代码

<!--miniprogram/pages/usecomp/usecomp.wxml-->

<!-- 使用main组件，来复用main页面 -->
<!-- 使用组件的时候方法与vue及react一致，当作标签使用即可 -->
<main></main>