miniProgram

微信小程序标签

微信小程序常见标签使用

一、view标签&text标签

view标签：

  1. 长按展示不同样式： <view hover-class="classhover"></view>

  2. 阻止冒泡：<view hover-stop-propagation="true"></view>

    文档：https://developers.weixin.qq.com/miniprogram/dev/component/view.html

text标签：

  1. 长按使文字能被复制： <text selectable></text>;

  2. 对文本内容进行解码（例如识别$nbsp;）：<text decode></text>

    文档：https://developers.weixin.qq.com/miniprogram/dev/component/text.html

二、image标签

因为项目大小不能超过2M，image一般引用网上文件，image标签有默认的宽高320 * 240，按需要手动调整

  1. src 指定要加载的图片路径
  2. mode 决定图片的宽高模式(图片默认宽高居中显示)
    • scaleToFill 不保持纵横比缩放图片，使图片的宽高完全撑满image标签
    • aspectFit 保持纵横比，保证图片长边能完全放在容器中，不一定撑满image标签
    • aspectFill 保持纵横比，保证图片短边能完全放在容器中，图片很可能显示不完全
    • widthFix 保持纵横比，image宽度指定后高度自适应(直接无视css设置的高度)
    • top、buttom、left … 不缩放图片，放在image标签中的指定位置
  3. lazy-load 小程序中默认支持懒加载(image标签若判断自己处于视口上下3屏高度内就开始加载)

文档：https://developers.weixin.qq.com/miniprogram/dev/component/image.html

三、swiper标签

  1. 轮播图外层容器为<swiper></swiper> ，内层装的图片容器为<swiper-item></swiper-item>
  2. 默认样式：宽100%，高150px。
  3. image标签默认宽高无法自适应swiper-item，且无法撑开swiper-item
  4. 一般通过原图宽高计算，给swiper定高度→swiper宽高比 = 原图宽高比(可使用css中calc方法)

常用attributes：

  1. indicator-dots 是否显示轮播指示点
  2. indicator-color="rgb(0, 0, 0, .3)" 指示点颜色(支持16进制)
  3. indicator-active-color="#000" 当前选中指示点颜色
  4. autoplay 自动轮播
  5. interval="5000" 自动循环时间间隔
  6. circular 是否循环轮播

文档：https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html

四、navigator标签

​ 类似于a标签，但是是块级元素，独占一行。

常用attributes：

  1. url 路径(相当于href)
  2. target="miniProgram" 跳转的目标(可以是当前小程序的页面，也可以是其他小程序的，默认值是self)
  3. open-type="navigate" 跳转方式，有如下值可用：
    1. navigate 保留当前页面(左上角会保留返回按钮)，跳转到应用内某页面，但是不能跳转到tabBar页面(点击什么都不会发生)
    2. redirect 关闭当前页面，跳转到应用内某页面，也不能跳转到tabBar页面
    3. switchTab 跳转到tabBar页面，并关闭其他所有非tabBar页面(左上角不会有返回按钮)
    4. reLaunch 跳转到目标页面，并关闭所有页面
    5. navigateBack 返回跳转前的页面
    6. exit 退出其他小程序(一般配合target使用)

文档：https://developers.weixin.qq.com/miniprogram/dev/component/navigator.html

五、rich-text标签

用来支持和显示html代码

attributes：

  1. nodes 接受一个标签字符串或对象数组

    1. 标签字符串：<div>啦啦啦</div>

    2. 对象数组：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    html: [
        {
            name: "div",// 标签名，支持大部分标签
            attrs: {
                class: "my_div",
                style: "color:red;"
            },// 各种attributes
            children: [
                {}// 里面可以再放类似的节点信息
            ]
        }
    ]

  2. space 用来显示连续空格

tips:

  1. nodes尽量用array，使用string的话性能会稍微下降。
  2. 标签内屏蔽所有节点事件。
  3. attrs内不支持id，支持class。
  4. img标签只支持网络图片，且部分ios系统不支持webp格式。
  5. 若自定义组件中使用rich-text，wxss会对rich-text内部出现的class生效。
  6. ios系统下rich-text中出现的图片可以长按提示操作，然后所有其他tap事件都会失效。解决方法是：添加-webkit-touch-callout: none;样式。

文档：https://developers.weixin.qq.com/miniprogram/dev/component/rich-text.html

六、button标签

可以自定义按钮样式，下面是默认按钮

外观attributes：

  1. size 按钮大小，取值有 default 和 mini
  2. type 按钮样式类型，取值有 default 灰色、 primary绿色 、 warn 红色
  3. plain 按钮是否镂空
  4. disabled 是否禁用
  5. loading 是否在名称前加loading图标

功能attributes:

  1. contact 打开客服对话，需要在小程序后台配置(需要真机)
    1. 使用自己的appID加载小程序开发软件
    2. 登录微信小程序用户官网，在功能tab中点击客服，添加客服账号(可以是自己的另外一个账号)
  2. share 转发当前小程序到微信朋友中，不能转发到朋友圈
  3. getPhoneNumber 配合bindgetphonenumber事件，在回调函数的参数中获取当前用户的手机号码加密信息(在后台解密)，非企业小程序账号没有权限获取用户手机号
  4. getUserInfo 获取当前用户的个人信息，和上面一样需要bindgetuserinfo事件配合(未加密)
  5. launchApp 在小程序中打开某个app，需要先在app中通过链接打开小程序，才能反过来打开app(京东app可试验)
  6. openSetting 打开小程序内置的授权页面，只有用户曾经允许的授权信息(例如3、4中的手机号和个人信息)
  7. feedback 打开意见反馈页面(需要真机)

七、icon标签

​ 图标标签

常用attributes：

  1. type 图标类型，取值(不完全)：success|success_no_circle|circle(文档未注明)|info|warn|waiting|cancel|download|search|clear
  2. size 图标大小，取值为number/string，默认值23
  3. color 图标颜色，取值同css的color

八、radio标签

  1. 类似于原生radio标签

  2. 选中后的默认绿色可以通过color特性修改

  3. 需要搭配 父级标签 radio-group标签 使用

    1
    2
    3
    4
    5
    <radio-group bindchange="changeGender">
    	<radio value="male">男</radio>
        <radio value="female">女</radio>
    </radio-group>
    <view>选中了{{gender}}性</view>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    Page({
        data: {
            gender: ''
        },
        changeGender (e) {
            let gender = e.detail.value
            this.setData({
                gender
            })
        }
    })

九、checkbox标签

  1. 类似于原生checkbox标签
  2. 同样可以通过color特性改变选中颜色
  3. 同样需要父级标签checkbox-group配合使用

十、scroll-view标签

可滚动标签

  1. scroll-top="变量"显示竖直方向滚动条所在的位置，需要重置到顶部时可以将变量重置为0。
  2. scroll-left="变量"显示水平方向滚动条所在位置，同上。

十一、rich-text标签

用来支持和显示html代码

attributes:

  1. nodes 可选值：array | string ；分别用来支持节点列表和字符串html，默认是array。
    • array内成员：
      1. name 标签名，只支持受信任的标签
      2. attrs 属性
      3. children 子节点列表