【微信小程序系列02】微信小程序(二)第四章、第五章、第六章

这篇具有很好参考价值的文章主要介绍了【微信小程序系列02】微信小程序(二)第四章、第五章、第六章。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

第四章:小程序事件的绑定

<!--
    1、需要给input标签绑定input事件
        绑定关键字 bindinput
    2、如何获取输入框的值
        通过事件源对象来获取
        e.detail.value
    3、把输入框的值赋值到data中
        1.不能直接this.data.num=e.detail.value
        2.不能this.num=e.detail.value
        正确的写法:
            this.setData({
                num:e.detail.value
            })
     4、需要加入一个点击事件
        1.bindtap
        2.无法在小程序中的事件中直接传参
        3.需要通过自定义属性的方式来传递参数
        4.事件源中获取自定义属性
-->
<input bindinput="handleInput" type="text"></input>
<button bindtap="handleTap" data-operation="{{1}}">+</button>
<button bindtap="handleTap" data-operation="{{-1}}">-</button>
<view>{{num}}</view>
// pages/demo04/demo04.js
Page({
    /**
     * 页面的初始数据
     */
    data: {
        num:0
    },
    //输入框的input事件的执行逻辑
    handleInput (e){
        this.setData({
            num: e.detail.value
        })
    },
    //加减按钮事件
    handleTap(e){
        //console.log(e)
        //1.获取自定义属性operation
        var operation=e.currentTarget.dataset.operation;
        this.setData({
            num: this.data.num+operation
        })
    }
})

⼩程序中绑定事件,通过bind关键字来实现。如 bindtap bindinput bindchange 等

不同的组件⽀持不同的事件,具体看组件的说明即可。

4.1 wxml
<input bindinput="handleInput" />
4.2 page
Page({
  // 绑定的事件
  handleInput: function(e) {
    console.log(e);
    console.log("值被改变了");
 }
})
4.3 特别注意
  1. 绑定事件时不能带参数 不能带括号 以下为错误写法

    <input bindinput="handleInput(100)" />
    
  2. 事件传值 通过标签⾃定义属性的⽅式 和 value

    <input bindinput="handleInput" data-item="100" />
    
  3. 事件触发时获取数据

     handleInput: function(e) {
        // {item:100}
       console.log(e.currentTarget.dataset)
          
        // 输入框的值
       console.log(e.detail.value);
     }
    

第五章:样式WXSS

/**
    1.小程序中不需要主动来引入样式文件,只需要名称保持一致即可
    2.需要把页面中的某些元素单位由px改成rpx
        1.设计稿750px
            750px=750rpx
            1px=1rpx
        2.把屏幕宽度改成375px
            375px=750rpx
            1px=2rpx
            1rpx=0.5px
        3.存在一个设计稿 宽度414 或者 未知page
            1. 设计稿page存在一个元素宽度100px
            2.拿以上的需求去实现不同宽度的页面适配
                page px=750rpx
                1px=750rpx/page
                100px=750rpx*100/page
				假设 page=375px
        4.利用一个属性 calc属性  css和wxss都支持的一个属性
            1. 750和rpx中间不要留空格
            2. 运算符的两边也不要留空格
 */

view {
    /*width: 375rpx;*/
    height: 200rpx;
    font-size: 40rpx;
    background-color: cornflowerblue;
    /*以下代码写法是错误的*/
    /*width: 750rpx*100/375;*/
    width: calc(750rpx*100/375);
}
<view>rpx</view>

WXSS( WeiXin Style Sheets )是⼀套样式语⾔,⽤于描述 WXML 的组件样式。

CSS 相⽐,WXSS 扩展的特性有:

  • 响应式长度单位rpx
  • 样式导入

5.1 尺寸单位

rpx (responsive pixel): 可以根据屏幕宽度进⾏⾃适应。规定屏幕宽为 750rpx 。如在 iPhone6 上,屏幕宽度为 375px ,共有750个物理像素,则 750rpx = 375px = 750物理像 素 , 1rpx = 0.5px = 1物理像素 。

设备 rpx换算px(屏幕宽度/750) px换算rpx(750/屏幕宽度)
IPhone5 1rpx=0.42px 1px=2.34rpx
IPhone6 1rpx=0.5px 1px=2rpx
IPhone6 Plus 1rpx=0.552px 1px=1.81rpx

建议: 开发微信⼩程序时设计师可以⽤ iPhone6 作为视觉稿的标准。

使⽤步骤:
  1. 确定设计稿宽度 pageWidth
  2. 计算⽐例 750rpx = pageWidth px ,因此 n px=750rpx * n/pageWidth
  3. 在wxss⽂件中,只要把设计稿中的 px => 750/pageWidth rpx 即可。

5.2 样式导入

/** common.wxss **/
view {
    color: cornflowerblue;
    font-size: 100px;
}
/** demo06.wxss **/
/*
    1、引入的代码是通过@import来引入
    2、路径只能写相对路径

*/
@import "../../styles/common.wxss";
/** demo06.wxml **/
<view>pages/demo06/demo06.wxml</view>

wxss中直接就⽀持,样式导⼊功能。

也可以和 less中的导⼊混⽤。

使⽤ @import 语句可以导⼊外联样式表,只⽀持相对路径。 ⽰例代码:

/** common.wxss **/
.small-p {
  padding:5px;
}
/** demo06.wxss **/
@import "common.wxss";
.middle-p {
  padding:15px;
}

5.3 选择器

特别需要注意的是 ⼩程序 **不⽀持通配符 *** 因此以下代码⽆效!

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

⽬前⽀持的选择器有:

选择器 样例 样例描述
.class .intro 选择所有拥有 class="intro"的组件
#id #firstname 选择拥有 id="firstname"的组件
element view 选择所有 view 组件
element,element view, checkbox 选择所有⽂档的 view 组件和所有的 checkbox 组 件
nth-child(n) view:nth-child(n) 选择某个索引的标签
::after view::after 在 view 组件后边插⼊内容
::before view::before 在 view 组件前边插⼊内容

5.4 小程序中使用less

demo07.less

/* 1、定义less变量 */
@color:yellow;
text {
  /*2、使用变量*/
  color: @color;
}

view{
  .viel{
    text {
      color: red;
    }
  }
}

/*导入less*/
@import "../../styles/reset.less";
view {
  color: @themeColor;
}

reset.less

@themeColor:green;

原⽣⼩程序不⽀持 less ,其他基于⼩程序的框架⼤体都⽀持,如 wepy , mpvue , taro 等。

但是仅仅因为⼀个less功能,⽽去引⼊⼀个框架,肯定是不可取的。因此可以⽤以下⽅式来实现

  1. 编辑器是vscode

  2. 安装插件easy less

  3. vscode的设置加入如下配置:

    "less.compile": {
        "outExt": ".wxss"
    }
    
  4. 在要编写样式的地方,新建less文件,如index.less,然后正常编辑即可

第六章:常见组件

重点讲解⼩程序中常⽤的布局组件 view,text,rich--text,button,image,navigator,icon,swiper,radio,checkbox

6.1 view

代替 原来的 div 标签

<view hover-class="h-class">
 点击我试试
</view>
属性
属性 类型 默认值 必填 说明 最低版本
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

6.2 text

<!--
    1、长按文字复制 selectable
    2、对文本内容进行解码
-->
<!--已弃用-->
<text selectable>text</text>
<!--当前使用-->
<text user-select decode>
    text&nbsp;123\n&lt;
</text>
  1. 文本标签
  2. 只能嵌套text
  3. 长按文字可以复制(只有该标签有这个功能)
  4. 可以对空格 回车进行编码
属性
属性名 类型 默认值 说明
user-select Boolean false 文本是否可选
selectable(已弃用) Boolean false 文本是否可选
decode Boolean false 是否解码
space string false 显示连续空格
代码
<text selectable="{{false}}" decode="{{false}}">&nbsp;</text>
space的合法值
说明
ensp 中文字符空格一半大小
emsp 中文字符空格大小
nbsp 根据字体设置的空格大小
Tips
  1. tip: decode可以解析的有 &nbsp;&lt;&amp;&apos;&ensp;&emsp;
  2. tip: 各个操作系统的空格标准并不一致。
  3. tip:text 组件内只支持 text 嵌套。
  4. tip: 除了文本节点以外的其他节点都无法长按选中。
  5. bug: 基础库版本低于 2.1.0 时, text 组件内嵌的 text style 设置可能不会生效

6.3 image

<!--
    image图片标签
    1、src指定要加载的图片路径
        图片存在默认的宽度和高度320*240 原图大小是200*100
    2、mode决定图片内容如何和图片标签宽高做适配
        1.scaleToFill:默认值,不保持纵横比缩放图片,使图片的宽高完全拉伸至填满image元素
        2.aspectFit:保持宽高比,确保图片的长边显示出来 页面轮播图常用
        3.aspectFill:保持宽高比,确保图片的短边显示出来  少用
        4.widthFix:宽度不变,以前web的图片的缩放模式,宽度指定了之后,高度会自己按照比例来调整  常用
        5.类似于以前的background-position,不缩放图片,只显示图片的..区域    少用
            top:
            bottom
            center
            left
            right
            top left
            top right
            bottom left
            bottom right
    3、小程序中的图片直接就支持懒加载 lazy-load
        1.lazy-load会自己判断 当图片出现在视口的上下三屏的高度之内的时候,自己开始加载图片
-->
<image src="https://i.loli.net/2021/11/18/xE7hvpTj2oZtC4F.jpg" mode="top" lazy-load="true"></image>
  1. 图⽚标签,image组件默认宽度320px、⾼度240px
  2. ⽀持懒加载
属性
属性 类型 默认值 必填 说明 最低版本
src string 图片资源地址 1.0.0
mode string scaleToFill 图片裁剪、缩放的模式 1.0.0
webp boolean false 默认不解析 webP 格式,只支持网络资源 2.9.0
lazy-load boolean false 图片懒加载,在即将进入一定范围(上下三屏)时才开始加载 1.5.0
show-menu-by-longpress boolean false 长按图片显示发送给朋友、收藏、保存图片、搜一搜、打开名片/前往群聊/打开小程序(若图片中包含对应二维码或小程序码)的菜单 2.7.0
binderror eventhandle 当错误发生时触发,event.detail = {errMsg} 1.0.0
bindload eventhandle 当图片载入完毕时触发,event.detail = {height, width} 1.0.0
model的合法值
说明 最低版本
scaleToFill 默认值,缩放模式,不保持纵横比缩放图片,使图片的宽高完全拉伸至填满 image 元素
aspectFit 缩放模式,保持纵横比缩放图片,使图片的长边能完全显示出来。也就是说,可以完整地将图片显示出来。
aspectFill 缩放模式,保持纵横比缩放图片,只保证图片的短边能完全显示出来。也就是说,图片通常只在水平或垂直方向是完整的,另一个方向将会发生截取。
widthFix 缩放模式,宽度不变,高度自动变化,保持原图宽高比不变
heightFix 缩放模式,高度不变,宽度自动变化,保持原图宽高比不变 2.10.3
top 裁剪模式,不缩放图片,只显示图片的顶部区域
bottom 裁剪模式,不缩放图片,只显示图片的底部区域
center 裁剪模式,不缩放图片,只显示图片的中间区域
left 裁剪模式,不缩放图片,只显示图片的左边区域
right 裁剪模式,不缩放图片,只显示图片的右边区域
top left 裁剪模式,不缩放图片,只显示图片的左上边区域
top right 裁剪模式,不缩放图片,只显示图片的右上边区域
bottom left 裁剪模式,不缩放图片,只显示图片的左下边区域
bottom right 裁剪模式,不缩放图片,只显示图片的右下边区域
Tips
  1. tip:image组件默认宽度320px、高度240px
  2. tip:image组件中二维码/小程序码图片不支持长按识别。仅在wx.previewImage中支持长按识别

6.4 swiper

<!--
    1、轮播图外层容器swiper
    2、每一个轮播项 swiper-item
    3、swiper标签存在默认样式
        1. width 100%
        2. height 150px
        image也存在默认的宽度和高度:320*240
        3. swiper高度无法实现由内容撑开
    4、先找出来原图的宽度和高度,等比例地给swiper定宽度和高度
        原图的宽度和高度:1125*352px
        swiper的宽度/swiper的高度=原图的宽度/原图的高度
        swiper的高度=swiper的宽度*原图的高度/原图的宽度
        height:750rpx*352/1125
     5、autoplay:自动轮播
     6、interval:修改轮播时间
     7、circular:衔接轮播
     8、indicator-dots:是否显示面板指示点
     9、indicator-color:指示点未选中的颜色
     10、indicator-active-color:当前选中的指示点颜色
-->
<swiper autoplay="true" interval="1000" circular="true" indicator-dots="true" indicator-color="#ffffff" indicator-active-color="cornflowerblue" easing-function="linear">
    <swiper-item>
        <image mode="widthFix" src="https://i.loli.net/2021/11/18/xE7hvpTj2oZtC4F.jpg"></image>
    </swiper-item>
    <swiper-item>
        <image mode="widthFix" src="https://img.alicdn.com/imgextra/i3/2839724348/O1CN01RvuYib1hzQkyVGOP8_!!2839724348.jpg"></image>
    </swiper-item>
    <swiper-item>
        <image mode="widthFix" src="https://img.alicdn.com/imgextra/i2/2839724348/O1CN01KI3Fca1hzQkucHxFV_!!2839724348.jpg"></image>
    </swiper-item>
</swiper>

swiper {
    width: 100%;
    height: calc(750rpx*100/200);
}
image {
    width: 100%;
}
6.4.1 swiper
属性:
属性 类型 默认值 必填 说明 最低版本
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
current number 0 当前所在滑块的 index 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
previous-margin string “0px” 前边距,可用于露出前一项的一小部分,接受 px 和 rpx 值 1.9.0
next-margin string “0px” 后边距,可用于露出后一项的一小部分,接受 px 和 rpx 值 1.9.0
snap-to-edge boolean false 当 swiper-item 的个数大于等于 2,关闭 circular 并且开启 previous-margin 或 next-margin 的时候,可以指定这个边距是否应用到第一个、最后一个元素 2.12.1
display-multiple-items number 1 同时显示的滑块数量 1.9.0
easing-function string “default” 指定 swiper 切换缓动动画类型 2.6.5
bindchange eventhandle current 改变时会触发 change 事件,event.detail = {current, source} 1.0.0
bindtransition eventhandle swiper-item 的位置发生改变时会触发 transition 事件,event.detail = {dx: dx, dy: dy} 2.4.3
bindanimationfinish eventhandle 动画结束时会触发 animationfinish 事件,event.detail 同上 1.9.0
easy-function合法值
说明 最低版本
default 默认缓动函数
linear 线性动画
easeInCubic 缓入动画
easeOutCubic 缓出动画
easeInOutCubic 缓入缓出动画
change事件 source 返回值

从 1.4.0 开始,change事件增加 source字段,表示导致变更的原因,可能值如下:

  1. autoplay 自动播放导致swiper变化;
  2. touch 用户划动引起swiper变化;
  3. 其它原因将用空字符串表示。
Bug & Tip
  1. tip: 如果在 bindchange 的事件回调函数中使用 setData 改变 current 值,则有可能导致 setData 被不停地调用,因而通常情况下请在改变 current 值前检测 source 字段来判断是否是由于用户触摸引起。
6.4.2 swiper-item

仅可放置在swiper组件中,宽高自动设置为100%。

属性
属性 类型 默认值 必填 说明
item-id string 该 swiper-item 的标识符
skip-hidden-item-layout boolean false 是否跳过未显示的滑块布局,设为 true 可优化复杂情况下的滑动性能,但会丢失隐藏状态滑块的布局信息

6.5 navigator

<!--
    导航组件navigator
    相当是一个块级元素,可以直接加宽度高度
    1、url:要跳转的页面路径  可以放绝对路径、相对路径
    2、target:要跳转到当前的小程序还是其它的小程序页面
        self:默认值,自己小程序的页面
        miniProgram:其他小程序的页面
    3、跳转的方式
        1.navigate:默认值,保留当前页面,跳转到应用内的某个页面,但是不能跳转到tabbar页面
        2.redirect:关闭当前页面,跳转到应用内的某个页面,但是不能跳转到tabbar页面
        3.switchTab:跳转到tabBar页面,并关闭其他所有非tabBar页面
        4.reLaunch:关闭所有页面,打开到应用内的某个页面
        5.navigateBack:关闭当前页面,返回上一页面,可通过getCurrentPages()获取当前的页面栈,决定需要返回几层
        6.exit:退出小程序,target="miniProgram"时生效
-->
<navigator url="/pages/demo10/demo10" target="self" open-type="navigate">轮播图页面</navigator>
<navigator url="/pages/demo10/demo10" target="self" open-type="redirect">轮播图页面redirect</navigator>
<navigator url="/pages/index/index" target="self" open-type="switchTab">TableBar页面switchTab</navigator>
<navigator url="/pages/index/index" target="self" open-type="reLaunch">reLaunch可以随便跳</navigator>
<navigator url="/pages/index/index" target="self" open-type="navigateBack">navigateBack关闭当前页面返回上一页面</navigator>

导航组件,类似于超链接标签

属性
属性 类型 默认值 必填 说明 最低版本
target string self 在哪个目标上发生跳转,默认当前小程序 2.0.7
url string 当前小程序内的跳转链接 1.0.0
open-type string navigate 跳转方式 1.0.0
delta number 1 当 open-type 为 ‘navigateBack’ 时有效,表示回退的层数 1.0.0
app-id string target="miniProgram"时有效,要打开的小程序 appId 2.0.7
path string target="miniProgram"时有效,打开的页面路径,如果为空则打开首页 2.0.7
extra-data object target="miniProgram"时有效,需要传递给目标小程序的数据,目标小程序可在 App.onLaunch()App.onShow() 中获取到这份数据。详情 2.0.7
version string release target="miniProgram"时有效,要打开的小程序版本 2.0.7
short-link string target="miniProgram"时有效,当传递该参数后,可以不传 app-id 和 path。链接可以通过【小程序菜单】->【复制链接】获取。 2.18.1
hover-class string navigator-hover 指定点击时的样式类,当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 600 手指松开后点击态保留时间,单位毫秒 1.0.0
bindsuccess string target="miniProgram"时有效,跳转小程序成功 2.0.7
bindfail string target="miniProgram"时有效,跳转小程序失败 2.0.7
bindcomplete string target="miniProgram"时有效,跳转小程序完成 2.0.7
target的合法值
说明
self 当前小程序
miniProgram 其它小程序
open-type的合法值
说明
navigate 对应 wx.navigateTo 或 wx.navigateToMiniProgram 的功能
redirect 对应 wx.redirectTo 的功能
switchTab 对应 wx.switchTab 的功能
reLaunch 对应 wx.reLaunch 的功能
navigateBack 对应 wx.navigateBack 的功能
exit 退出小程序,target="miniProgram"时生效
version的合法值
说明
develop 开发版
trial 体验版
release 正式版,仅在当前小程序为开发版或体验版时此参数有效;如果当前小程序是正式版,则打开的小程序必定是正式版。

6.6 rich-text

**富文本标签:**可以将字符串解析为对应标签,类似vue中的v-html功能

<!--
    rich-text:富文本标签
    1、nodes属性来实现
        1.接收标签字符串
            html:"<div class=\"screen-outer clearfix\">\n<div class=\"main\" role=\"main\">\n<div class=\"main-inner clearfix\">\n<div class=\"tbh-service J_Module\" data-name=\"service\" data-spm=\"201867\">\n<div class=\"service J_Service\" data-spm-ab=\"main\">\n<ul class=\"service-bd\" role=\"menubar\">\n\n<li data-closeper=\"\" aria-label=\"查看更多\" role=\"menuitem\" aria-haspopup=\"true\" data-groupid=\"0\" class=\"J_Cat a-all\">\n<i aria-hidden=\"true\" class=\"tb-ifont service-arrow\"></i>\n<a href=\"https://huodong.taobao.com/wow/a/act/tao/dailyact/4634/wupr?wh_pid=dailyAct-257518\" data-cid=\"1\" data-dataid=\"222887\">女装</a><span class=\"service-slash\">/</span><a href=\"https://s.taobao.com/search?q=内衣\" data-cid=\"1\" data-dataid=\"222890\">内衣</a><span class=\"service-slash\">/</span><a href=\"https://s.taobao.com/search?q=家居\" data-cid=\"1\" data-dataid=\"222889\">家居</a>\n</li>\n</ul>\n</div></div></div></div></div>"
        2.接收对象数组

-->
<rich-text nodes="{{html}}"></rich-text>
<rich-text nodes="{{array}}"></rich-text>
Page({

    /**
     * 页面的初始数据
     */
    data: {
        html:"<div class=\"screen-outer clearfix\">\n<div class=\"main\" role=\"main\">\n<div class=\"main-inner clearfix\">\n<div class=\"tbh-service J_Module\" data-name=\"service\" data-spm=\"201867\">\n<div class=\"service J_Service\" data-spm-ab=\"main\">\n<ul class=\"service-bd\" role=\"menubar\">\n\n<li data-closeper=\"\" aria-label=\"查看更多\" role=\"menuitem\" aria-haspopup=\"true\" data-groupid=\"0\" class=\"J_Cat a-all\">\n<i aria-hidden=\"true\" class=\"tb-ifont service-arrow\"></i>\n<a href=\"https://huodong.taobao.com/wow/a/act/tao/dailyact/4634/wupr?wh_pid=dailyAct-257518\" data-cid=\"1\" data-dataid=\"222887\">女装</a><span class=\"service-slash\">/</span><a href=\"https://s.taobao.com/search?q=内衣\" data-cid=\"1\" data-dataid=\"222890\">内衣</a><span class=\"service-slash\">/</span><a href=\"https://s.taobao.com/search?q=家居\" data-cid=\"1\" data-dataid=\"222889\">家居</a>\n</li>\n</ul>\n</div></div></div></div></div>",
        array:[
            {
                //1.div标签,由name属性来指定  最常用的
                name:"div",
                //2.标签上有哪些属性
                attrs:{
                    //标签上的属性 class style
                    class:"my_div",
                    style:"color:red;"
                },
                //3.子节点:children要接收的数据类型和nodes第二种渲染方式的数据类型一致
                children:[
                    {
                        name: "p",
                        attrs: {},
                        //放文本
                        children: [{
                            type:"text",
                            text:"hello"
                        }]
                    }
                ]
            }
        ]
    }
})
属性
属性 类型 默认值 必填 说明
nodes array/string [] 节点列表/HTML String
space string 显示连续空格
space的合法值
说明
ensp 中文字符空格一半大小
emsp 中文字符空格大小
nbsp 根据字体设置的空格大小
nodes

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

元素节点:type = node
属性 说明 类型 必填 备注
name 标签名 string 支持部分受信任的 HTML 节点
attrs 属性 object 支持部分受信任的属性,遵循 Pascal 命名法
children 子节点列表 array 结构和 nodes 一致
文本节点:type = text
属性 说明 类型 必填 备注
text 文本 string 支持entities
受信任的HTML节点及属性

全局支持class和style属性,不支持id属性

节点 属性
a
abbr
address
article
aside
b
bdi
bdo dir
big
blockquote
br
caption
center
cite
code
col span,width
colgroup span,width
dd
del
div
dl
dt
em
fieldset
font
footer
h1
h2
h3
h4
h5
h6
header
hr
i
img alt,src,height,width
ins
label
legend
li
mark
nav
ol start,type
p
pre
q
rt
ruby
s
section
small
span
strong
sub
sup
table width
tbody
td colspan,height,rowspan,width
tfoot
th colspan,height,rowspan,width
thead
tr colspan,height,rowspan,width
tt
u
ul
Bug & Tip
  1. tip: nodes 不推荐使用 String 类型,性能会有所下降。
  2. tip: rich-text 组件内屏蔽所有节点的事件。
  3. tip: attrs 属性不支持 id ,支持 class 。
  4. tip: name 属性大小写不敏感。
  5. tip: 如果使用了不受信任的HTML节点,该节点及其所有子节点将会被移除。
  6. tip: img 标签仅支持网络图片。
  7. tip: 如果在自定义组件中使用 rich-text 组件,那么仅自定义组件的 wxss 样式对 rich-text 中的 class 生效

6.7 button

<!--
    button标签
    1、外观的属性
        1.size:控制按钮的大小
            1.default:默认大小
            mini:小尺寸
        2.type:控制按钮的颜色
            1.default 灰色
            2.primary 绿色
            3.warn 红色
        3.plain:按钮是否镂空,背景色透明
        4.loading:加载按钮
        5.disabled:禁用按钮
-->
<button size="default">默认按钮</button>
<button size="mini">迷你按钮</button>
<button size="mini" type="primary">primary 按钮</button>
<button size="mini" type="warn">warn 按钮</button>
<button size="mini" type="default">default按钮</button>
<button size="mini" type="primary" plain="true">plain 按钮</button>
<button size="mini" type="primary" loading>loading 按钮</button>
<button size="mini" type="primary" disabled="true">disabled 按钮</button>

<!--
    button按钮的开放能力
    open-type:
    1、contact:直接打开客服会话功能    需要在微信小程序的后台进行配置
    2、share:转发当前的小程序到微信朋友中  不能把小程序分享到朋友圈中
    3、getPhoneNumber:获取当前用户的手机号码中心  结合一个事件来使用   不是企业的小程序账号没有权限获取用户的手机号码
        1.绑定一个事件 bindgetphonenumber
        2.在事件的回调函数中,通过参数来获取信息
        3.获取到的信息 已经加密过了
            需要用户自己搭建一个小程序的后台服务器,在后台服务器中进行解析手机号码,返回到小程序中就可以看到信息了
    4、getUserInfo:获取当前用户的个人信息
        1.使用方法 类似获取用户手机号码
        2.可以直接获取,不存在加密的字段
    5、launchApp:在小程序中直接打开APP
        1.先在APP中通过APP的某个链接打开小程序
        2.在小程序中再通过这个功能重新打开APP
    6、openSetting:打开小程序中内置的授权页面
        1.授权页面中只会出现用户曾经点击过的权限
    7、feedBack:打开小程序中内置的意见反馈页面
        1.只能够通过真机调试来打开
-->

<button type="default" open-type="contact">contact</button>
<button type="default" open-type="share">share</button>
<button type="default" open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">getPhoneNumber</button>
<button type="default" open-type="getUserInfo" bindgetuserinfo="getUserInfo">getUserInfo</button>
<button type="default" open-type="launchApp">launchApp</button>
<button type="default" open-type="openSetting">openSetting</button>
<button type="default" open-type="feedback">feedback</button>
Page({
    //获取用户的手机号码信息
    getPhoneNumber(e){
        console.log(e)
    },
    //获取用户个人信息
    getUserInfo(e){
        console.log(e)
    }
})
属性

按钮。

属性 类型 默认值 必填 说明 最低版本
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.1.0
hover-class string button-hover 指定按钮按下去的样式类。当 hover-class="none" 时,没有点击态效果 1.0.0
hover-stop-propagation boolean false 指定是否阻止本节点的祖先节点出现点击态 1.5.0
hover-start-time number 20 按住后多久出现点击态,单位毫秒 1.0.0
hover-stay-time number 70 手指松开后点击态保留时间,单位毫秒 1.0.0
lang string en 指定返回用户信息的语言,zh_CN 简体中文,zh_TW 繁体中文,en 英文。 1.3.0
session-from string 会话来源,open-type="contact"时有效 1.4.0
send-message-title string 当前标题 会话内消息卡片标题,open-type="contact"时有效 1.5.0
send-message-path string 当前分享路径 会话内消息卡片点击跳转小程序路径,open-type="contact"时有效 1.5.0
send-message-img string 截图 会话内消息卡片图片,open-type="contact"时有效 1.5.0
app-parameter string 打开 APP 时,向 APP 传递的参数,open-type=launchApp时有效 1.9.5
show-message-card boolean false 是否显示会话内消息卡片,设置此参数为 true,用户进入客服会话会在右下角显示"可能要发送的小程序"提示,用户点击后可以快速发送小程序消息,open-type="contact"时有效 1.5.0
bindgetuserinfo eventhandle 用户点击该按钮时,会返回获取到的用户信息,回调的detail数据与wx.getUserInfo返回的一致,open-type="getUserInfo"时有效 1.3.0
bindcontact eventhandle 客服消息回调,open-type="contact"时有效 1.5.0
bindgetphonenumber eventhandle 获取用户手机号回调,open-type=getPhoneNumber时有效 1.2.0
binderror eventhandle 当使用开放能力时,发生错误的回调,open-type=launchApp时有效 1.9.5
bindopensetting eventhandle 在打开授权设置页后回调,open-type=openSetting时有效 2.0.7
bindlaunchapp eventhandle 打开 APP 成功的回调,open-type=launchApp时有效 2.4.4
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
open-type的contact实现流程
  1. 将小程序的appid由测试号改为自己的appid
  2. 登录小程序官网,添加客服-微信
  3. 为了方便演示,自己准备了两个账号
    1. 普通用户A
    2. 客服-微信B
  4. 就是干!
lang 的合法值
说明 最低版本
en 英文
zh_CN 简体中文
zh_TW 繁体中文
Bug & Tip
  1. tip: button-hover 默认为{background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;}
  2. tip: bindgetphonenumber 从1.2.0 开始支持,但是在1.5.3以下版本中无法使用wx.canIUse进行检测,建议使用基础库版本进行判断。
  3. tip: 在bindgetphonenumber 等返回加密信息的回调中调用 wx.login 登录,可能会刷新登录态。此时服务器使用 code 换取的 sessionKey 不是加密时使用的 sessionKey,导致解密失败。建议开发者提前进行 login;或者在回调中先使用 checkSession 进行登录态检查,避免 login 刷新登录态。
  4. tip: 从 2.1.0 起,button 可作为原生组件的子节点嵌入,以便在原生组件上使用 open-type 的能力。
  5. tip: 目前设置了 form-typebutton 只会对当前组件中的 form 有效。因而,将 button 封装在自定义组件中,而 form 在自定义组件外,将会使这个 buttonform-type 失效。

6.8 icon

<!--
    小程序中的字体图标
    1、type:图标的类型
        success、success_no_circle、info、warn、waiting、cancel、download、search、clear
    2、size:图标的大小
    3、color:图标的颜色
-->
<icon type="success" size="60" color="#0094ff"></icon>
<icon type="cancel" color="red"></icon>

图标。组件属性的长度单位默认为px,2.4.0起支持传入单位(rpx/px)。

属性
属性 类型 默认值 必填 说明 最低版本
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

6.9 radio

<!--
    radio单选框
    1、radio标签必须要和父元素radio-group来使用
    2、value:选中的单选框的值
    3、需要给radio-group绑定change事件
    4、需要在页面中显示选中的值
-->
<radio-group bindchange="handleChange">
    <radio value="male" color="#0094ff"></radio>
    <radio value="female" color="red"></radio>
</radio-group>

<view>您选中的是:{{gender}}</view>
Page({

    /**
     * 页面的初始数据
     */
    data: {
        gender:""
    },
    handleChange(e){
        //1.获取单选框中的值
        var sex=e.detail.value
        //2.把值赋给data中的数据
        this.setData({
            gender:sex
        })
    }
})

单选项目

需要搭配radio-group使用

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

单项选择器,内部由多个 radio 组成。

属性 类型 默认值 必填 说明 最低版本
bindchange EventHandle radio-group中选中项发生改变时触发 change 事件,detail = {value:[选中的radio的value的数组]} 1.0.0

6.10 checkbox

需要搭配checkbox-group一起使用

多选项目。

属性
属性 类型 默认值 必填 说明 最低版本
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
checkbox-group

多项选择器,内部由多个checkbox组成。文章来源地址https://www.toymoban.com/news/detail-861721.html

属性 类型 默认值 必填 说明 最低版本
bindchange EventHandle checkbox-group中选中项发生改变时触发 change 事件,detail = {value:[选中的checkbox的value的数组]} 1.0.0

到了这里,关于【微信小程序系列02】微信小程序(二)第四章、第五章、第六章的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序开发实战课后习题解答————第四章(作业版)

    一、填空题 1、  组件  是视图层的基本组成单元。 2、 swiper内部只可以放置   swiper-item    组件。 3、 设置text文本内容长按可选的属性是   selectable   。    4、navigator组件通过设置   open-type    属性,来区分不同的跳转功能。 5、通过image的  mode    属性来设定不同的图

    2024年02月06日
    浏览(16)
  • Go学习第四章——程序流程控制

    流程控制的作用: 流程控制语句是用来控制程序中各语句执行顺序的语句,可以把语句组合成能完成一定功能的小逻辑模块。 控制语句的分类: 控制语句分为三类:顺序、选择和循环。 “顺序结构”代表“先执行a,再执行b”的逻辑。 “条件判断结构”代表“如果…,则…

    2024年02月07日
    浏览(17)
  • 第四章 Python程序的流程控制

    顺序结构:按程序语句的自然顺序,从上到下,以此执行每条语句的程序。 单分支if 单分支结构 if 的语法结构: if 表达式 :   语句块 注意 冒号和下一行的缩进 是非常重要的(在Python中是通过冒号和缩进来控制程序逻辑的)。 双分支if else 双分支结构 if…else… 的语法结构:

    2024年04月09日
    浏览(19)
  • 云计算工程师系列 Day04 第四章 进程管理(超详细 持续更新中....)

    简介:Linux系统Centos7中程序的相关概念。进程管理工具pstop的用法。kill控制进程。job控制作业的相关方式。 目标:掌握程序概念 掌握进程管理工具的使用/控制进程的方法 (1)灵魂三问 01.我是谁? 什么是进程 02.我从哪里来?进程从哪来 03.我要上哪去?进程上哪去 (2)进

    2024年01月25日
    浏览(17)
  • Java Web程序设计课后习题答案 第四章

    第4章 一、填空 1.如果当前Web资源不想处理请求, RequestDispatcher接口提供了一个 forward()方法,该方法可以将当前请求传递给其他Web资源对这些信息进行处理并响应给客户端,这种方式称为请求转发。 2.Servlet API中,专门用来封装HTTP响应消息的接口是HttpServletResponse。 3. 重定向指

    2024年04月23日
    浏览(10)
  • 打印不同的图形-课后程序(JAVA基础案例教程-黑马程序员编著-第四章-课后作业)

    【案例4-1】打印不同的图形 记得 关注,收藏,评论哦,作者将持续更新。。。。 【案例介绍】 案例描述 本案例要求编写一个程序,可以根据用户要求在控制台打印出不同的图形。例如,用户自定义半径的圆形和用户自定义边长的正方形。 运行结果   【案例分析】 ( 1 )

    2024年02月01日
    浏览(22)
  • 【期末不挂科-单片机考前速过系列P4】(第四章:32题搞定基本指令例题)经典例题盘点(带图解析)

    前言 大家好吖,欢迎来到 YY 滴单片机系列 ,热烈欢迎! 本章主要内容面向接触过单片机的老铁 主要内容含: 欢迎订阅 YY 滴C++专栏!更多干货持续更新!以下是传送门! YY的《C++》专栏 YY的《C++11》专栏 YY的《Linux》专栏 YY的《数据结构》专栏 YY的《C语言基础》专栏 YY的《

    2024年02月02日
    浏览(20)
  • 【期末不挂科-考前速过系列P4】单片机[接口与总线]——经典例题盘点(带图解析)(第四章:32题搞定基本指令例题))

    前言 大家好吖,欢迎来到 YY 滴单片机系列 ,热烈欢迎! 本章主要内容面向接触过单片机的老铁 主要内容含: 欢迎订阅 YY 滴C++专栏!更多干货持续更新!以下是传送门! YY的《C++》专栏 YY的《C++11》专栏 YY的《Linux》专栏 YY的《数据结构》专栏 YY的《C语言基础》专栏 YY的《

    2024年02月02日
    浏览(19)
  • 第四章,登录注册

    目录 4.1 添加注册页面 4.2 注册表单验证 4.3提交注册信息 4.4 完善注册功能

    2024年02月12日
    浏览(14)
  • 第四章 单例模式

    代码示例 优缺点:可能会造成内存的浪费,但也只能浪费内存 代码示例 代码示例 缺点:多线程不安全 缺点效率太低 在类加载时,静态内部类没有调用是不会进行类加载的,当被调用时才会被加载,而且只加载一次,加载时线程安全 优缺点

    2023年04月21日
    浏览(18)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包