专栏首页理想二旬不止微信小程序【常用组件及自定义组件】

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

微信小程序入门的文章,其实暂时就更新到这里了,还有一个生命周期的内容,感觉当初整理的不是很好就不更新了,学完了 WXML、WXSS、一些常用组件,还有事件绑定,其实一个较为不错的页面已经能自己搭建出来了,如果你还想继续往后面研究,我给一下方向就是,可以开始看 与后台交互的内容了,发送异步请求,对数据进行回显等,回显内容时,你就又可以开始考虑用什么别的组件,可以让页面的数据加载或者观看更加顺滑,美观,当然有很多小伙伴都是后端,所以,可以自己搭个后台,试着弄用户登录授权这块,这块算是小程序一个重要的点,要好好研究一下,以后要做的事情,就和传统的后端基本一样了。我的文章都是根据官网写的原生写法,当然你也可以看一下一些小程序框架,或者看一看 ES6 的内容,毕竟我也是个后端,也没细细研究前端的内容,有什么想法或者意见,可以在公众号菜单页面直接给后台发文字,或者发送邮件:ideal_bwh@163.com

(一) 常用标签

组件你可以理解为传统页面开发时候的各种标签,例如 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可以解析的有

  < > & '    

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

<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

这几个代码就是通过 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>

下面就是一些开放的功能

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

本文分享自微信公众号 - 理想二旬不止(ideal-20),作者:BWH_Steven

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-09-14

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Spring 通过单表 CURD 认识配置IOC的两兄弟(XML&注解)

    前面一篇文章花大量内容,重点学习了 Spring入门 的一些思想,以及简单的学习了 IOC基础 以及基于基于 XML 的配置方式,大家应该清楚,XML与注解常常...

    BWH_Steven
  • (四) SpringBoot起飞之路-Web静态资源处理

    这是第四篇,关于如何处理第三方静态资源以及自己的静态资源的小结,其实如果仅仅想要知道将静态资源放在哪里,或者说怎么直接用,其实几句话就说完了,但是我在文中是循着...

    BWH_Steven
  • 第一阶段-Java基础知识:【第一章 DOS命令与开发环境的配置 + 第一个程序HelloWorld】

    DOS命令,计算机术语,是指DOS操作系统的命令,是一种面向磁盘的操作命令,主要包括目录操作类命令、磁盘操作类命令、文件操作类命令和其它命令。

    BWH_Steven
  • 五分钟用Docker快速搭建Go开发环境

    挺早以前在我写过一篇用 Docker搭建LNMP开发环境的文章:用Docker搭建Laravel开发环境,里面详细介绍了将 nginx、 mysql和 php三...

    KevinYan
  • 搞定Markdown中的图片,一劳永逸的方法!

    经常用markdown写博客的朋友一定都体会过markdown图片的蛋疼之处,并不是说图片的这用引用方式不好,而且图片要放到什么服务器上?

    猫叔Rex
  • 图床神器iPic彻底解决图片管理问题

    对于有强迫症的人而言,管理图片是令人很烦恼的事情。放在自己的服务器,是不可靠的,而且加载速度慢。第三方图床分为免费与付费,免费的首选新浪图床,加载速度很快,但毕...

    章鱼喵
  • 微信小程序开发之路之组件化

    组件化,反过来理解,写重复的页面,方法,写第二遍就烦了,抽取出来就是组件化,可以理解为公用的方法

    陈灬大灬海
  • Python使用matplotlib绘制正多边形逼近圆周

    运行结果:用鼠标单击或拖动Slider组件并修改其值,单击按钮组件可以恢复Slider组件的默认值6。

    Python小屋屋主
  • Tesseract-OCR识别中文与训练字库实例

    关于中文的识别,效果比较好而且开源的应该就是Tesseract-OCR了,所以自己亲身试用一下,分享到博客让有同样兴趣的人少走弯路。 文中所用到的身份证图片资源...

    貟王軍
  • LaTeX系列:基本框架

    详细代码百度云链接:http://pan.baidu.com/s/1hrNF1Rm

    努力在北京混出人样

扫码关注云+社区

领取腾讯云代金券