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

(一) 常用标签

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

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可以解析的有

&nbsp; &lt; &gt; &amp; &apos; &ensp; &emsp;

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

<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:"🌞️",
        value:"太阳"
      },
      {
        id:1,
        name:"🌙",
        value:"月亮"
      },
      {
        id:2,
        name:"⭐️",
        value:"星星"
      }
    ],
    checkedList:[]
  },
  // 复选框的选中事件
  handleItemChange(e){
    // 获取被选中的复选框的值
    const checkedList=e.detail.value;
    // 进行赋值
    this.setData({
      checkedList
    })
  }
})

运行结果：

(二) 自定义组件（标签）

(1) 快速体验

如果我们想要自定义一些组件，也就是说将一些代码抽离出来，可以达到复用等的效果

我们一步一步举个例子：

首先创建文件夹目录 components/header

接着右键创建组件 header，点击新建 Component

结构就是这样的

一般点击创建组件的方式会自动将组件的 json 文件中声明组件，如果没有需要自己手动修改component 为 true

{
  "component": true,
}

接着在组件WXML中随便写点东西，然后打开想要引用组件的页面，首先在 json 中说明引用组件

{
  "usingComponents": {
    "header":"/../../components/header/header"
  }
}

然后直接引用就可以了，效果就出来了

<header></header>

(2) 组件传参

组件传参有两个方向，一个是父组件 --> 子组件，还有就是反过来。注：父组件是页面，子组件是自定义组件

⽗组件通过属性的⽅式给⼦组件传递参数
组件通过事件的⽅式向⽗组件传递参数

通过一个例子来演示

在上面结构上自己写一个自定义的组件，一个导航条的效果

自定义组件的页面代码

<!-- components/header/header.wxml -->
<view class="header">
    <view class="header_tabs_title">
        <view wx:for="{{headerTabs}}" 
        wx:key="id" 
        class="header_tabs_title_item {{item.isActive?'active':''}}"
        bindtap="hanldeItemTap"
        data-index="{{index}}"
        >
            {{item.name}}
        </view>
    </view>
</view>

自定义组件的样式文件如下

/* components/header/header.wxss */
.header_tabs_title{
    display: flex;
    padding: 10px;
}
.header_tabs_title_item{
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.active{
    color:blue;
    border-bottom: 5rpx solid currentColor;
}

自定义组件的 js文件，在 properties 中的内容，就是接收到父（页面）的数据，也就是一个关于导航的数组，其中包括首页测试关于等等导航文字内容

headerTabs的位置：要接受的名称，自己定
type：要接收的数据的类型
value：默认值

而下面的方法就是关于父传数据到子组件的内容，其代表触发父组件中的自定义事件，同时传递数据给父组件

// components/header/header.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    headerTabs:{
      type:Array,
      value:[]
    }
  },

  /**
   * 组件的初始数据
   */
  data: {

  },

  /**
   * 组件的方法列表
   */
  methods: {
    hanldeItemTap(e){
      const {index}=e.currentTarget.dataset;
      // 触发父组件中的自定义事件 同时传递数据给  
      this.triggerEvent("itemChange",{index});
    }
  }
})

补充：e.currentTarget.dataset; 是怎么来的，还是老办法，console 打印一下

父页面

绑定一个事件，同时把等会再 js 中的定义数据，传递到自定义组件中去，名称就是刚才接收的 headerTabs

<header headerTabs="{{headerTabs}}" binditemChange="handleItemChange" ></header>

父页面的 js

说明：let { headerTabs } = this.data; 这是 ES6 的写法，也可以写成

let headerTabs = this.data.headerTabs;

遍历数组的时候修改了 v ，就把源数组也修改了

目的就是通过点击修改定义导航中的 isActive 为 true 或 false

// pages/test08/test08.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    headerTabs:[
      {
        id:0,
        name:"首页",
        isActive:true
      },
      {
        id:1,
        name:"测试",
        isActive:false
      },
      {
        id:2,
        name:"测试",
        isActive:false
      },
      {
        id:3,
        name:"关于",
        isActive:false
      },
    ]
  },
  // 自定义事件 用来接收子组件传递的数据的
  handleItemChange(e) {
    // 接收传递过来的参数
    const { index } = e.detail;
    let { headerTabs } = this.data;
    headerTabs.forEach((v, i) => i === index ? v.isActive = true : v.isActive = false);
    this.setData({
      headerTabs
    })
  }
})

结尾

如果文章中有什么不足，欢迎大家留言交流，感谢朋友们的支持！

如果能帮到你的话，那就来关注我吧！如果您更喜欢微信文章的阅读方式，可以关注我的公众号

在这里的我们素不相识，却都在为了自己的梦而努力 ❤

一个坚持推送原创开发技术文章的公众号：理想二旬不止

posted @ 2020-09-14 08:48 BWH_Steven 阅读(1525) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

BWH_Steven

技术博客 https://www.yuque.com/ideal-20 各种原创文章，干货，收获满满，等你来！