文章首页 Web开发 Windows开发 编程语言 数据库技术 移动平台 系统服务 微信 设计 布布扣 其他

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

时间：2020-09-14 09:27:07   收藏：0   阅读：86

技术分享图片

(一) 常用标签

组件你可以理解为传统页面开发时候的各种标签，例如 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存在一些默认的样式

image 默认宽高

如果，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);
  }
})

例如获取用户信息

技术分享图片

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

(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 中的内容，就是接收到父（页面）的数据，也就是一个关于导航的数组，其中包括首页测试关于等等导航文字内容

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

// 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
    })
  }
})

结尾

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

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

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

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

技术分享图片

原文：https://www.cnblogs.com/ideal-20/p/13664831.html

评论（0）
© 2014 bubuko.com 版权所有 - 联系我们:wmxa8@hotmail.com
打开技术之扣，分享程序人生！