微信小程序（七、常用小程序组件及自定义封装组件）

常用小程序组件

1、组件介绍

文档地址：视图容器 | 微信开放文档

框架为开发者提供了一系列基础组件，开发者可以通过组合这些基础组件进行快速开发。一个组件通常包括开始标签和结束标签，属性用来修饰这个组件，内容在两个标签之间。

2、swiper组件

文档地址：swiper | 微信开放文档

案例：使用swiper展示轮播图

逻辑层定义数据

data: {
 background: ["https://storage.lynnn.cn/assets/markdown/91147/pictures/2020/11/bce52a5f143cd3e25c6c39c7a0fd7f276ce43bad.png?sign=f4ec5771f7eabd11226fe5f4b7f0f6e8&t=5fa403f2",
            "https://storage.lynnn.cn/assets/markdown/91147/pictures/2020/11/6018ac895dd29437b1d023c121c7539ecf2e9221.jpeg?sign=47da092f8a6a1650df3da3dd3dd40cb3&t=5fa4041d",
            "https://storage.lynnn.cn/assets/markdown/91147/pictures/2020/11/f81d133833b89a18cb1842f449810d16ec5d3c78.jpeg?sign=22eadb72caac161df642aa18b84127a8&t=5fa40431"
        ]
},

图片采用image组件进行展示，其支持对图片进行缩放、裁剪处理。关于image组件的信息，可以访问文档：image | 微信开放文档

实际在wxml中展示

<view>
  <swiper indicator-dots indicator-color="rgba(52, 155, 252,1)" autoplay>
  <swiper-item wx:for="{{background}}" wx:key="index">
   <image src="{{item}}" style="width: 100%; height: 100%;"></image>
  </swiper-item>
  </swiper>
</view>

在设计图片的时候，一定要和设计人员对接好图片的合适尺寸比例。

3、表单组件

小程序项目中但凡是涉及到表单的地方，都需要使用表单组件。表单组件的作用就是用于组成表单的。

注意点：

• 这里面表单组件部分的标签继续沿用html的标签，与之前完全同名

• 组件标签的部分属性也与之前html属性一致，但是更多的是不一致的

文档地址：button | 微信开放文档

<!-- 表单 -->
  <!-- 移动端登录表单 -->
  <view class="login_form">
    <image src="/assets/icon/home-seleted.png"/>
    <input type="text" placeholder="用户名"/>
    <input type="password" placeholder="密码"/>
    <button type="primary">登录</button>
    <view class="login_button" hover-class="active">
      view登录
    </view>
  </view>

wxss

/* pages/list/list.wxss */
input{
  border-bottom:1px solid gray;
  height: 120rpx;
  width: 600rpx;
}
.login_form{
  width: 750rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}
button{
  margin-top: 30rpx;
}
image{
  width: 120rpx;
  height: 120rpx;
}
.login_button{
  margin-top: 30rpx;
  background-color: cadetblue;
  color: white;
  width: 430rpx;
  height: 100rpx;
  border-radius: 10rpx;
  text-align: center;
  line-height: 100rpx;
  font-weight: bold;
}
.active{
  /* 透明度 */
  opacity: 0.7;
}

按钮button组件有一个非常实用的属性open-type，后续可以通过该属性赋予按钮高级的功能（微信开放能力），例如：

• 获取用户信息的时候

• 唤起其他App的时候

  • 不是任意app都可以唤起，只能唤起来源app

• 获取用户手机号

• ....

<!-- button open-type属性的多种功能 -->
    <button type="default" open-type="chooseAvatar" bindchooseavatar="getAvatar">测试按钮</button>

使用第三方UI组件库

〇进入项目包目录生成packge.json文件

npm init -y

①安装vantUI

# 通过 npm 安装
npm i @vant/weapp -S --production

②app.json 去除style2版本配置

将 app.json 中的 "style": "v2" 去除

③配置 project.config.json

{
  ...
  "setting": {
    ...
    "packNpmManually": true,
    "packNpmRelationList": [
      {
        "packageJsonPath": "./package.json",
        "miniprogramNpmDistDir": "./miniprogram/"
      }
    ]
  }
}
​

关闭微信开发者工具，重启进入项目

④构建npm

打开微信开发者工具，点击 工具 -> 构建 npm，并勾选 使用 npm 模块 选项，构建完成后，即可引入组件。

注意如果使用的是新版本微信小程序开发者工具，修改上面的配置"miniprogramNpmDistDir": "./"

⑤在使用的地方引入组件即可

xxxx.json

{
  "usingComponents": {
    "van-button": "@vant/weapp/button/index"
  }
}

⑥在页面组件中使用

xxx.wxml

<van-button type="primary">按钮</van-button>

自定义封装组件

可以像在Vue和React中一样，将可复用的部分使用组件进行封装，可以通过模板标签进行调用。

文档地址：自定义组件 | 微信开放文档

①建立components文件并创建一个组件

②根据需要进行文件划分

components\mySwiper.wxml

<swiper indicator-dots  indicator-color="rgba(52, 155, 252,1)" autoplay>
  <swiper-item wx:for="{{data}}" wx:key="index">
   <image src="{{item}}" style="width: 100%; height: 100%;"></image>
  </swiper-item>
  </swiper>

components\mySwiper.js

// components/mySwiper.js
Component({
  /**
   * 组件的属性列表
   * 接收父传子的参数信息
   */
  properties: {
    // 父传子props的类型限定
    data:{
      type:Array
    }
  },
​
  /**
   * 组件的初始数据
   */
  data: {
  },
​
  /**
   * 组件的方法列表
   */
  methods: {
​
  }
})
​

③在页面组件中调用自定义组件

pages\list\list.json

{
  // 组件注册
  "usingComponents": {
    // 调用名称:文件路径
    "mySwiper":"/components/mySwiper"
  }
}

pages\list\list.wxml

<!-- data是传递给自定义组件的参数  父传子 -->
​
<mySwiper data="{{background}}"></mySwiper>