微信小程序基本用法2(三)

本文详细介绍了微信小程序中的navigator导航组件、rich-text富文本标签、button按钮(包括外观和开放能力)、icon字体图标、radio单选框和checkbox复选框的使用方法,包括属性、事件和真机调试。通过实例演示和注意事项,帮助读者掌握这些基础组件。
摘要由CSDN通过智能技术生成

一、navigator 导航组件

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

        一.1 属性值

属性名 类型 默认值 说明
target String self 在哪个项目上发生跳转,默认当前小程序,可选值 selft / miniProgram
url String 当前小程序内的跳转链接
open-type String navigate 跳转方式

        一.2 有效值

说明
navigate 保留当前页面,跳转到应用内的某个页面,但是不能跳转到 tabbar 页面
redirect 关闭当前页面,跳转到应用内的某个页面,但是不允许跳转到 tabbar 页面
switchTab 跳转到 tabbar 页面,并关闭其他所有非 tabbar 页面
reLaunch 关闭所有页面,打开到应用内的某个页面
navigateBack 关闭当前页面,返回上一页面或多级页面. 可通过 getCurrentPages() 获取当前的页面栈,决定需要返回几层
exit 退出小程序,target=“miniProgram”

        一.3 先在 app.json 中创建新页面
在这里插入图片描述

        一.4 在创建的新页面 xxx.wxml 中编译

<!-- 
  导航组件  navigator
  一. url 要跳转的页面路径 绝对路径 相对路径
  二. navigator 是块级元素,默认会换行,可以直接加入宽度和高度
      a链接不会换行,行级元素
  三. target  要跳转到当前的小程序,还是其它的小程序的页面
      self 默认值 自己  小程序的页面
      miniProgram  其它的小程序页面
  四. open-type 跳转的方式
      1. navigate 默认值   保留当前⻚⾯,跳转到应⽤内的某个⻚⾯,但是不能跳到tabbar ⻚⾯
      2. redirect   关闭当前⻚⾯,跳转到应⽤内的某个⻚⾯,但是不允许跳转到tabbar ⻚⾯。
      3. switchTab   跳转到 tabBar ⻚⾯,并关闭其他所有⾮ tabBar ⻚⾯
      4. reLaunch   关闭所有⻚⾯,打开到应⽤内的某个⻚⾯
 -->

<!-- 
  url 里面的地址 是上一个页面中 我们写的那个轮播图 swiper 的路径地址,
  注意要把路径地址中的 "\" 改为 "/"  把最后的后缀名 .wxml 删掉,就可以点击跳转了 
  跳转之后屏幕左上角会显示一个 ">" 返回图标
-->
 <navigator url="/pages/work7/work7">可以跳转到别的路径</navigator>

 <!-- 不能点击跳转到 tabBar 页面-->
 <navigator url="/pages/index/index">不能跳转到tabBar</navigator>

 <!-- 点击跳转之后,屏幕左上角会显示一个 小房子 的图标,可以跳转但是不能跳转到 tabBar 页面 -->
 <navigator open-type="redirect" url="/pages/work7/work7">可以跳转到别的页面</navigator>

 <!-- 这个属性添加之后,可以成功跳转到 tabBar 页面,但是没有返回功能 -->
 <navigator open-type="switchTab" url="/pages/index/index">可以跳转到 tabBar 页面</navigator>

 <!-- 这个属性添加之后,可以随便进行跳转,最强大 -->
 <navigator open-type="reLaunch" url="/pages/work2/work2">可以随便跳转到 某个 页面</navigator>
 

二、rich-text 富文本标签

        可以将字符串解析成 对应标签,类似 vue中 v-html 功能

        二.1 新建页面,并编译 xxx.wxml 文件 和 xxx.js 文件

        xxx.js 文件

// pages/work9/work9.js
Page({
   
  data: {
   
    // 1. 标签字符串
    // 在淘宝上复制的
    // html:'<ul class="zuanshi" data-spm-ab="zuanshi"><li class="item item-0"><a href="https://alimarket.tmall.com/markets/alimama/mingdian"><img src="https://gtms01.alicdn.com/tps/i1/TB12EhzIXXXXXbMXpXXDgwcQVXX-375-130.jpg"></a></li><li class="item item-1"><a href="https://alimarket.tmall.com/markets/alimama/mingdian"><img src="https://gtms02.alicdn.com/tps/i2/TB1ZeJGIXXXXXcnXXXXDgwcQVXX-375-130.jpg"></a></li><li class="item item-2"><a href="https://alimarket.tmall.com/markets/alimama/mingdian"><img src="https://gtms03.alicdn.com/tps/i3/TB197VzIXXXXXbJXpXXDgwcQVXX-375-130.jpg"></a></li></ul>'

    // 2. 对象数组
    html:[
      {
   
        // 1. div标签 name属性来制定
        name:"div",

        // 2. 标签上有那些属性
        attrs:{
   
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值