【微信小程序】常用组件及自定义组件

(一) 常用标签

组件你可以理解为传统页面开发时候的各种标签，例如 div span 等等，我这里只说一些常用的，这样就能能搭建出一个基本的页面了，但是如果想要更加美观以及拥有更好的体验，就需要 XSS 和 别的一些强大的组件了，如果有额外的需求，可以去官方文档查阅一下 (同时不常用的属性，也就不提了)

https://developers.weixin.qq.com/miniprogram/dev/component/

(1) view

view 可以理解为传统页面开发中的 div 块级元素，使用 view 会换行

关于 view 标签，还有一些额外的属性，说的也很清楚，但是前期的话，其实不考虑这个也是可以的，就单纯的当做一个布局的 div 来用

属性	类型	默认值	必填	说明	最低版本
hover-class	string	none	否	指定按下去的样式类。当 hover-class="none" 时，没有点击态效果	1.0.0
hover-stop-propagation	boolean	false	否	指定是否阻止本节点的祖先节点出现点击态	1.5.0
hover-start-time	number	50	否	按住后多久出现点击态，单位毫秒	1.0.0
hover-stay-time	number	400	否	手指松开后点击态保留时间，单位毫秒	1.0.0

(2) text

text 可以理解为传统页面中的 span 行内元素，text 不会换行

text 涉及的一些标签

属性	类型	默认值	必填	说明	最低版本
selectable	boolean	false	否	文本是否可选	1.1.0
space	string		否	显示连续空格	1.4.0
decode	boolean	false	否	是否解码	1.4.0

space 的合法值

值	说明
ensp	中文字符空格一半大小
emsp	中文字符空格大小
nbsp	根据字体设置的空格大小

decode可以解析的有

  < > & '    

简单测试一下其中两个，可以看到，后者长按可以选择文字，同时编码被解析成空格，前者反之

<text selectable="{{false}}" decode="{{false}}">测&nbsp;试</text>
<text selectable="{{true}}" decode="{{true}}">测&nbsp;试</text>

(3) image

image 就是图片相关的一个组件，这个组件默认宽度320px、⾼度240px，同时支持懒加载

我摘了三个比较常用的属性出来

属性	类型	默认值	必填	说明	最低版本
src	string		否	图片资源地址	1.0.0
mode	string	scaleToFill	否	图片裁剪、缩放的模式	1.0.0
lazy-load	boolean	false	否	图片懒加载，在即将进入一定范围（上下三屏）时才开始加载	1.5.0

他作为图片的一个承载物，我们重点多说一下关于 mode 的问题，也就是图片的显示形式

所以先来看一下，mode 的取值范围（节选了相对常用的，其余的取值都属于裁剪类型）

值	说明	最低版本
scaleToFill	缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
aspectFit	缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。
aspectFill	缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。
widthFix	缩放模式，宽度不变，高度自动变化，保持原图宽高比不变
heightFix	缩放模式，高度不变，宽度自动变化，保持原图宽高比不变	2.10.3

比较常用是 widthFix，在这几个其中，aspectFill 相对还是用的比较少的

(4) swiper

这个组件，是小程序页面中的一个轮播图的效果

swiper 是轮播图的一个总的容器，swiper-item 代表其中的每一个内容，配合其属性，能很方便的达到需要的样式

同样摘了几个常见的属性

属性	类型	默认值	必填	说明	最低版本
indicator-dots	boolean	false	否	是否显示面板指示点	1.0.0
indicator-color	color	rgba(0, 0, 0, .3)	否	指示点颜色	1.1.0
indicator-active-color	color	#000000	否	当前选中的指示点颜色	1.1.0
autoplay	boolean	false	否	是否自动切换	1.0.0
interval	number	5000	否	自动切换时间间隔	1.0.0
duration	number	500	否	滑动动画时长	1.0.0
circular	boolean	false	否	是否采用衔接滑动	1.0.0
vertical	boolean	false	否	滑动方向是否为纵向	1.0.0

显示比例问题

首先说明一下，swiper存在一些默认的样式

• width: 100%
• height 150px

image 默认宽高

• width: 320px
• height: 240px

如果，swiper 的高度出现了问题，给出一个解决方式

先根据素材图片的宽高比例，等比计算 swiper 的宽高，这样高度就换算出来了

swiper 高度 = swiper 宽度 * 素材高度 / 素材宽度

即：height: 750rpx * 素材高度 / 素材宽度

来看个综合一些的例子

WXML

图片随便自己做了两张

<swiper autoplay="{{true}}" interval="5000" circular="{{true}}" indicator-dots="{{true}}"
    indicator-color="#D3D3D3" indicator-active-color="#FFFF00">
    <swiper-item><image mode="widthFix" src="../../image/swiperC.jpg"></image></swiper-item>
    <swiper-item><image mode="widthFix" src="../../image/swiperB.jpg"></image></swiper-item>
    <swiper-item><image mode="widthFix" src="../../image/swiperA.jpg"></image></swiper-item>
</swiper>

WXSS

swiper{
    width: 100%;
    height: calc(750rpx * 275 / 1000);
}

image{
    width: 100%;
}

看一下效果，现在就实现了轮播图的效果，同时会5秒自动循环轮播，自己可以对照属文档进行定制修改

(5) navigator

导航组件，这块可以理解为传统页面开发的超链接标签

属性	类型	默认值	必填	说明	最低版本
target	string	self	否	在哪个目标上发生跳转，默认当前小程序	2.0.7
url	string		否	当前小程序内的跳转链接	1.0.0
open-type	string	navigate	否	跳转方式	1.0.0

open-type 的合法值

值	说明	最低版本
navigate	保留当前页面，跳转到应用内的某个页面，但是不能跳到tabbar 页面
redirect	关闭当前页面，跳转到应用内的某个页面，但是不允许跳转到tabbar 页面
switchTab	跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
reLaunch	关闭所有页面，打开到应用内的某个页面	1.1.0
navigateBack	关闭当前页面，返回上⼀页面或多级页面。可通过 getCurrentPages() 获取当	1.1.0
exit	退出小程序，target=miniProgram时⽣效	2.1.0

下面给出一个测试的代码，默认不添加 open-type 的写法会有一个返回上一层的

<navigator url="/pages/test06/test06">默认跳转到test06</navigator>

<navigator open-type="redirect" url="/pages/test06/test06">redirect跳转到test06</navigator>

<navigator open-type="switchTab" url="/pages/index/index">switchTab跳转到主页</navigator>

<navigator open-type="reLaunch" url="/pages/index/index">reLaunch跳转到主页</navigator>

(6) rich-text

这是一个富文本标签，作用就是把字符串中的对应标签解析出来，其主要的一个属性就是 nodes ，我们先简单看一下 nodes的属性有哪些

现支持两种节点，通过type来区分，分别是元素节点和文本节点，默认是元素节点，在富文本区域里显示的HTML节点 元素节点：type = node

属性	说明	类型	必填	备注
name	标签名	string	是	支持部分受信任的 HTML 节点
attrs	属性	object	否	支持部分受信任的属性，遵循 Pascal 命名法
children	子节点列表	array	否	结构和 nodes 一致

来看一个例子，这个nodes 的值，我们去 js 中定义一个

<rich-text nodes="{{receive}}"></rich-text>

有两种方式赋值，一种就是我注释掉的那一行，直接使用一个含有标签的字符串，直接赋值就会解析，另一种就是通过后面这样 JSON 的一种格式赋值，效果是一样的

Page({
  data: {
    // receive:'<div class="div_class"><h3>理想二旬不止</h3></div>'
    receive:[{
      name:'div',
      attrs:{
        class:'div_class'
      },
      children:[{
        name:'h3',
        attrs:{},
        children:[{
          type:'text',
          text:'理想二旬不止'
        }]
      }]
    }]
  },
})

(7) button

按钮标签，也算是非常常用的内容了，同时相比较传统页面开发中的按钮，微信小程序中又有很多开放式的功能，首先看一些涉及的一些属性（更多内容可以看官网文档）：

https://developers.weixin.qq.com/miniprogram/dev/component/button.html

属性	类型	默认值	必填	说明	最低版本
size	string	default	否	按钮的大小	1.0.0
type	string	default	否	按钮的样式类型	1.0.0
plain	boolean	false	否	按钮是否镂空，背景色透明	1.0.0
disabled	boolean	false	否	是否禁用	1.0.0
loading	boolean	false	否	名称前是否带 loading 图标	1.0.0
form-type	string		否	用于 form 组件，点击分别会触发 form 组件的 submit/reset 事件	1.0.0
open-type	string		否	微信开放能力	1.10

size 的合法值

值	说明
default	默认大小
mini	小尺寸

type 的合法值

值	说明
primary	绿色
default	白色
warn	红色

form-type 的合法值

值	说明	最低版本
submit	提交表单
reset	重置表单

open-type 的合法值

值	说明	最低版本
contact	打开客服会话，如果用户在会话中点击消息卡片后返回小程序，可以从 bindcontact 回调中获得具体信息	1.1.0
share	触发用户转发，使用前建议先阅读	1.2.0
getPhoneNumber	获取用户手机号，可以从bindgetphonenumber回调中获取到用户信息	1.2.0
getUserInfo	获取用户信息，可以从bindgetuserinfo回调中获取到用户信息	1.3.0
launchApp	打开APP，可以通过app-parameter属性设定向APP传的参数	1.9.5
openSetting	打开授权设置页	2.0.7
feedback	打开“意见反馈”页面，用户可提交反馈内容并上传日志，开发者可以登录小程序管理后台后进入左侧菜单“客服反馈”页面获取到反馈内容	2.1.0

这几个代码就是通过 size 、type 进行基本的大小或者说类型实现一个样式

<button style="width:100%">默认按钮</button>
<button style="width:100%" size="mini">mini 默认按钮</button>
<button style="width:100%" type="primary">primary 按钮</button>
<button style="width:100%" type="warn">warn 按钮</button>
<button style="width:100%" type="warn" plain>plain 按钮</button>

下面就是一些开放的功能

<button style="width:100%" open-type="contact">联系客服</button>
<button style="width:100%" open-type="share">分享小程序</button>
<button style="width:100%" open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">
    获取电话号码
</button>
<button style="width:100%" open-type="getUserInfo" bindgetuserinfo="getUserInfo">
    获取用户信息
</button>
<button style="width:100%" open-type="launchApp">打开App</button>
<button style="width:100%" open-type="openSetting">打开授权设置页</button>
<button style="width:100%" open-type="feedback">意见反馈</button>

需要说明的几个点：

• 联系客服这个功能只能在真机调试，需要先在后台绑定一个客服的微信号码，接着在开发工具中选择真机调试，然后扫描二维码就可以了

• 获取电话号码，以及用户信息，需要结合事件来做，例如：

Page({
  // 获取用户的手机号码信息
  getPhoneNumber(e){
    console.log(e);
  },
  // 获取用户个人信息
  getUserInfo(e){
    console.log(e);
  }
})

例如获取用户信息

但是电话号码，不是企业的小程序账号 没有权限来获取用户的手机号码

• 打开App，是在 app 中 通过 app 的某个链接打开小程序，然后在小程序 再通过这个功 重新打开 app

• 当前版本的微信小程序，在.wxss文件里设置Button宽度无效，网络上的一种解决方案就是把 app.json里的 style: v2语句删掉，还有一种就是像我代码中一样，直接加 style，暂时推荐后者吧，此处未深究

(8) icon

微信小程序默认封装了一些图标，也很简单，只有三个属性

属性	类型	默认值	必填	说明	最低版本
type	string		是	icon的类型，有效值：success, success_no_circle, info, warn, waiting, cancel, download, search, clear	1.0.0
size	number/string	23	否	icon的大小	1.0.0
color	string		否	icon的颜色，同css的color	1.0.0

简单用一下

<icon  type="success" size="50"> </icon>
<icon  type="success" size="50" color="#3390ff"> </icon>

如果不指定颜色，其默认都是有一定颜色样式的，如果指定了 color 就会覆盖掉原来的颜色

(9) radio

单选框组件，需要配合 radio-group 使用，下面看代码就明白了

属性	类型	默认值	必填	说明	最低版本
value	string		否	radio标识。当该radio选中时，radio-group 的 change 事件会携带 radio 的 value	1.0.0
checked	boolean	false	否	当前是否选中	1.0.0
disabled	boolean	false	否	是否禁用	1.0.0
color	string	#09BB07	否	radio的颜色，同css的color	1.0.0

简单用一下，

<radio-group bindchange="handleChange">
  <radio color="blue" value="male">男</radio>
  <radio color="blue" value="female" >女</radio>
</radio-group>

<view>你选择的性别是:{{gender}}</view>

js 内容，至于 e.detail.value 如何来的，可以通过 console.log(e) 打印看到

Page({
  data: {
    gender: ""
  },
  handleChange(e){
    // 获取单选框中的值
    let gender=e.detail.value;
    // 把值 赋值给 data中的数据
    this.setData({
      gender
    })
  }
})

(10) checkbox

属性	类型	默认值	必填	说明	最低版本
value	string		否	checkbox 标识，选中时触发 checkbox-group 的 change 事件，并携带 checkbox 的 value	1.0.0
disabled	boolean	false	否	是否禁用	1.0.0
checked	boolean	false	否	当前是否选中，可用来设置默认选中	1.0.0
color	string	#09BB07	否	checkbox的颜色，同css的color	1.0.0

直接用一下

<view>
  <checkbox-group bindchange="handleItemChange">
    <checkbox value="{{item.value}}" wx:for="{{list}}" wx:key="id">
      {{item.name}}
    </checkbox>
  </checkbox-group>
  <view>
    选中的内容:{{checkedList}}
  </view>
</view>

Page({
  data: {
    list:[
      {
        id:0,
        name:"