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

2020/9/14 19:23:20 人评论 次浏览 分类:开发资料

(一) 常用标签

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

(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}}">测 试text>
<text selectable="{{true}}" decode="{{true}}">测 试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 的写法会有一个返回上一层的

"/pages/test06/test06">默认跳转到test06

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

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

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

(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:'

理想二旬不止

'
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

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

<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>

下面就是一些开放的功能







需要说明的几个点:

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

  • 获取电话号码,以及用户信息,需要结合事件来做,例如:
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

简单用一下

type="success" size="50"> 
type="success" size="50" color="#3390ff"> 

如果不指定颜色,其默认都是有一定颜色样式的,如果指定了 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:":sun_with_face:️",
        value:"太阳"
      },
      {
        id:1,
        name:":crescent_moon:",
        value:"月亮"
      },
      {
        id:2,
        name:":star:️",
        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) 组件传参

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

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

  • 组件通过事件的⽅式向⽗组件传递参数

通过一个例子来演示

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

自定义组件的页面代码


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

结尾

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

赞赏

相关教程

  • 微信小程序卡券开发(亲测)

    提示:小程序卡券和公众平台调用基本一致,请先查看公众平台卡券文档一、公众帐号/小程序绑定由于微信卡券用的是一套逻辑。所以小程序需要先和公众账号绑定,才能在小程序中调起公众平台卡券登录微信公众平台:https://open.weixin.qq.com/ 进行绑定操作二、公众号卡券添加小……

    2017/6/3 18:45:01

共有访客发表了评论 网友评论

验证码: 看不清楚?