微信小程序中的基础标签

一、什么是微信小程序中的标签

  • 小程序标签是指微信小程序页面中的不同组件,用于展示和处理数据。
  • 小程序标签由结构标签、样式标签和逻辑标签三部分组成,分别对应页面的结构、样式和逻辑。
  • 小程序标签具有良好的兼容性,可以在不同品牌、不同型号的手机上正常运行。

二 、基础标签

1.view标签:用于展示文本、图片、组合等元素,类似于HTML的div标签。

2.text标签:用于设置文本的字体、大小、颜色等样式。

复制代码
 <view>
    <text>1111</text>
    <image src="image.png"></image>
    <view>2222</view>
  </view>

3.scroll-view标签:用于展示可滚动的区域,可以设置横向或纵向滚动。

复制代码
  <scroll-view scroll-x="true">
    <view>A</view>
    <view>B</view>
    <view>C</view>
  </scroll-view>

3、swiper标签:用于展示可滑动的轮播图。

swiper有很多的属性可以配置,具体可以去文档中看

复制代码
<swiper>
    <swiper-item><image src="image1.png"></image></swiper-item>
    <swiper-item><image src="image2.png"></image></swiper-item>
    <swiper-item><image src="image3.png"></image></swiper-item>
  </swiper>

4.button标签:用于创建按钮,可以设置背景颜色、边框、圆角等样式,跟Html中基本一样

5.image标签:用于展示图片,可以设置宽度、高度、模式等样式。

6.input标签:用于输入框,可以处理输入事件和变化事件。

注:想要获取input输入框中的值必须使用bindinput绑定一个方法,用该方法来接受值

复制代码
  <input type="text" bindinput="inputHandler"  value="{{text}}" />
  Page({
    data: {
      text: ''
    },
    inputHandler: function(e) {
      this.setData({
        text: e.detail.value
      })
    }
  });

7.navigator标签:用于跳转页面,可以设置url、目标页面等参数。

在微信小程序中有两种导航方式

navigator为声明式导航(跟Html中的a标签一样直接在属性中定义要跳转的链接)

编程式导航:通过方法来跳转:如下

复制代码
<button bindtap="gotoMessage"></button>
gotoMessage(){
   wx.switchTab({
       url:"/pages/group/group"
    })
}
相关推荐
知识分享小能手11 小时前
微信小程序入门学习教程,从入门到精通,WXML(WeiXin Markup Language)语法基础(8)
前端·学习·react.js·微信小程序·小程序·vue·个人开发
小咕聊编程12 小时前
【含文档+PPT+源码】基于微信小程序的在线考试与选课教学辅助系统
微信小程序·小程序·毕业设计·教学辅助系统
一匹电信狗12 小时前
【MySQL】数据库基础
linux·运维·服务器·数据库·mysql·ubuntu·小程序
知识分享小能手13 小时前
微信小程序入门学习教程,从入门到精通,微信小程序开发进阶(7)
前端·javascript·学习·程序人生·微信小程序·小程序·vue3
2501_9159090615 小时前
iOS 抓包工具有哪些?实战对比、场景分工与开发者排查流程
android·开发语言·ios·小程序·uni-app·php·iphone
软希网分享源码1 天前
WIFI大师小程序4.1.9独立版源码(源码下载)
小程序·wifi大师小程序
说私域1 天前
互联网新热土视角下开源AI大模型与S2B2C商城小程序的县域市场渗透策略研究
人工智能·小程序·开源
小咕聊编程1 天前
【含文档+PPT+源码】基于微信小程序的关爱老年人在线能力评估系统
微信小程序·小程序·毕业设计·老人能力评估
知识分享小能手1 天前
微信小程序入门学习教程,从入门到精通,微信小程序常用API(上)——知识点详解 + 案例实战(4)
前端·javascript·学习·微信小程序·小程序·html5·微信开放平台
2501_915918412 天前
iOS 框架全解析,原生框架与跨平台框架对比、开发应用打包与 App Store 上架实战经验
android·ios·小程序·https·uni-app·iphone·webview