小程序常用组件

小程序常用组件

  • 1.组件的定义
  • 2.常用组件
  • 3.引入外部字体图标库
  • 4.组件样式
  • 5.示例代码

1.组件的定义

组件就是指微信定义的具有特殊功能的标签，在wxml中只能使用微信定义的标签。

2.常用组件

  <view>：用于页面布局的块级组件，类似于html中的div标签，默认不具有任何样式，独占一行
  <text>：用于页面布局的行级组件，类似于html中的span，默认不具有任何样式，不会独占一行
  <scroll-view>：可滚动的块级组件
  <swiper>：实现轮播的块级组件，其中只能放置swiper-item组件，否则会出现未定义的异常
  <icon>：图标
  <rich-text>：富文本
  <表单组件>：表单
  <navigator>：导航，类似于html中的标签<a>
  <image>：图片
  <map>：地图

3.引入外部字体图标库

  • 登录 iconfont-阿里巴巴矢量图标库：https://www.iconfont.cn
  • 找到需要的图标加入购物车 -> 添加至项目（无项目自己创建）-> 选择 Font-class -> 查看在线链接 -> 点击链接可以查看到代码
    在这里插入图片描述
  • 复制代码，并在小程序中创建一个 wcss文件，将代码粘贴至文件中
  • 直接引用里面的图标

4.组件样式

WXSS（WeiXin Style Sheets）是微信定义的一套样式语言，用于描述WXML的组件样式，具有CSS大部份特性，同时对CSS进行了扩充的修改。
相同特性如：选择器与CSS相同，都有以下几种：

  • 标签选择器：view{}
  • 类选择器：.myView{}
  • id选择器：#id{}
  • 行级样式：在组件内属性直接写style属性
  • 外部样式

扩展特性主要有以下两点：

  • 尺寸单位：新增了rpx单位，能自适应不同分辨率的手机，px是传统意义上的像素值，不能很好的适应不同分辨率的手机。
  • 样式导入：@import “外部样式文件”

全局样式与局部样式：定义在app.wxss中的样式为全局样式，作用于每一个页面。在页面的wxss文件中定义的样式为局部样式，仅作用于当前页面。全局样式与局部样式冲突时使用局部样式。

5.示例代码

WXML示例代码：

<!-- 两对大括号{{}}称为插值表达式，用来进行数据的展示 -->
<!-- <text style="height:2000rpx;display:block;background:#ccc">{{ msg }}</text> -->
<!--
  view和text
-->
<view class="hi" id="world" style="text-decoration:underline">块级标签</view>aaa
ccc
<text user-select="true">行级标签</text>bbb

<!-- wxss的扩展 -->
<view class="myView">wxss扩展特征</view>

<!-- 
  scroll-view
    1.必须要设置固定的高度或宽度
    2.内部元素必须超出高度或宽度
    3.必须定义滚动方向
-->
<scroll-view scroll-y="true" bindscrolltoupper="scrolltoupper" bindscrolltolower="scrolltolower">
  <view>view1</view>
  <view>view2</view>
  <view>view3</view>
</scroll-view>

<!--
  swiper 只可放置swiper-item组件
-->
<swiper autoplay="true" indicator-dots="true" indicator-color="#fff">
  <swiper-item>view1</swiper-item>
  <swiper-item>view2</swiper-item>
  <swiper-item>view3</swiper-item>
</swiper>

<!--
  icon 显示内置图标
-->
<view class="myicon">
  <icon type="success" size="40" color="red"></icon>
  <icon type="info"></icon>
  <icon type="download"></icon>
  <!--  引入外部的字体图标库 -->
  <text class="iconfont icon-cart"></text>
  <text class="iconfont icon-cart1"></text>
</view>

<!--
  rich-text 展示富文本代码
-->
<view class="myrichtext">
  <rich-text nodes="<h2 style='text-align:center;color:blue;'>abcd</h2>"></rich-text>
  <rich-text nodes="{{ content }}"></rich-text>
</view>

<!--
  表单组件
-->
<form class="myfrom" bindsubmit="duSUbmit">
  <input name="username" placeholder="用户名称"></input>
  <input name="pwd" password></input>
  <radio-group name="sex" bindchange="chgSex">
    <radio checked="true" value="man">男</radio>
    <radio value="gril">女</radio>
  </radio-group>
  <checkbox-group name="like" bindchange="chglike">
    <checkbox value="ps">爬山</checkbox>
    <checkbox value="yy">游泳</checkbox>
    <checkbox value="dlq">打蓝球</checkbox>
  </checkbox-group>
  <view>
    <picker mode="date" value="{{ date }}" bindchange="binddatechg">选择日期</picker>
    <text> {{date}} </text>
    <picker mode="region" bindchange="bindRegion">选择地址：{{ region }}</picker>
    <picker mode="selector" range="{{ countrys }}" bindchange="bindCountry">选择国家：{{ countrys[index] }}</picker>
  </view>
  <view>
    <switch checked="true" name="open" bindchange="bindOpen"></switch>
  </view>
  <view>
    <button form-type="submit" size="mini" type="primary">提交</button>
    <button type="primary" bindtap="doButton" size="mini">普通按钮</button>
  </view>
</form>

<!--
  导航组件
    1.默认只能跳转到非tabBar页面
    2.如果要跳转到tabBar页面，需要指定open-type为switchTab
-->
<navigator url="/pages/logs/logs">跳转到logs</navigator>
<navigator url="/pages/index/index" open-type="switchTab">跳转到index</navigator>
<!--  重定向时，当前页面会被卸载 -->
<navigator url="/pages/logs/logs" open-type="redirect">重定向到logs</navigator>

<!--
  image
    1.自带宽度和高度，默认width:320px,height:240px
-->
<view class="myimage">
  <image src="/images/我的1.png"></image>
  <image src="https://p1.itc.cn/q_70/images03/20240101/5d01d5da227a4a2c90c1662146af625b.jpeg"></image>
  <image src="/images/我的1.png" mode="scaleToFill"></image>
  <image src="/images/我的1.png" mode="aspectFit"></image>
  <image src="/images/我的1.png" mode="aspectFill"></image>
  <image src="/images/我的1.png" mode="widthFix"></image>
  <image src="/images/我的1.png" mode="heightFix"></image>
  <image src="/images/我的1.png" mode="top"></image>
  <image src="/images/我的1.png" mode="top right"></image>
  <image src="/images/我的1.png" mode="top left"></image>
</view>

<!--
  map
-->
<map longitude="118" latitude="32"></map>

WXSS示例代码：

.myView,scroll-view,swiper,.myicon,.myrichtext,myfrom,navigator,myimage {
  margin-bottom: 30rpx;
}

/*
  wxss中选择器与css相同
    标签选择器、类选择器、id选择器、行级样式、外部样式等
*/
view {
  color:red
}
.hi {
  background: #ccc;
}
#world {
  font-weight: bold;
}
/*
  wxss特征
    1.尺寸单位
    2.样式导入
    3.全局样式与局部样式
    4.不能指定本地图片，无法加载本地资源
*/
.myView {
  font-size: 40rpx;
  height: 400rpx;
  background: #ccc;
  background-image: url(https://bkimg.cdn.bcebos.com/pic/cefc1e178a82b9014a90e40fabc7be773912b31b41fe);
  background-size: 100%;
}
@import "../../styles/common.wxss";

text {
  color: blue;
}

scroll-view {
  height: 300rpx;
  border: 1px solid #f00;
}
scroll-view view {
  height: 200rpx;
  background: white;
  border: 1px solid white;
}

swiper {
  height: 200rpx;
  color: white;
}
swiper swiper-item:first-child {
  background-color: red;
}
swiper swiper-item:nth-child(2) {
  background-color: blue;
}
swiper swiper-item:last-child {
  background-color: green;
}

/* 引入图标字体库 */
@import "../../styles/iconfont.wxss";
.myicon text {
  font-size: 60rpx;
  color: green;
}

.myfrom input {
  background-color: #ccc;
  height: 50rpx;
  width: 400rpx;
  border: 1px solid #f00;
  margin: 0 auto;
}

.myimage image {
  width:150px;
  height:150px;
  border: 1px solid #f00;
  margin-right: 3px;
}

JS示例代码：

//获取小程序App实例
const app = getApp();
console.log(app);
console.log(app.user.name);
app.show();

Page({
  // 页面初始数据，称为数据仓库data
  data:{
    msg:'hello',
    arr:[1,2,3,4],
    user:{
      id:1001,
      name:'dog'
    },
    content:'<div><img src="../../images/我的1.png"></img></div>',
    date:'2000-09-01',
    countrys:['中国','日本','美国','英国']
  },
  /**
   * 生命周期回调函数-监听页面加载
   * 1.该函数只执行一次
   * 2.已加载的页面会被缓存，不会重复加载，提高性能
   */
  onLoad:function(options){ // 参数options中包含了跳转到当前页面时，所携带的参数信息
    console.log('关于页面加载......',options)
  },
  /**
   * 生命周期回调函数-监听页面初次渲染完成
   * 该函数只执行一次
   */
  onReady:function(){
    console.log('关于页面初次渲染完成.....')
  },
  /**
   * 生命周期回调函数-监听页面显示
   * 该函数可以多次执行，第一次执行时早于onReady
   */
  onShow:function(){
    console.log('关于页面显示......')
  },
  /**
   * 生命周期回调函数-监听页面隐藏
   * 该函数可以多次执行
   */
  onHide:function(){
    console.log('关于页面隐藏......')
  },
  /**
   * 生命周期回调函数-监听页面卸载
   */
  onUnload:function(){
    console.log('关于页面卸载......')
  },
  /**
   * 监听用户下拉刷新事件
   */
  onPullDownRefresh:function(){
    console.log('关于页面执行下拉刷新......')
  },
  /**
   * 监听用户上拉触底事件
   */
  onReachBottom:function(){
    console.log('关于页面上拉触底事件发生......')
  },
  /**
   * 监听用户点击右上脚的转发
   * 只有监听了该事件后，点击右上脚的转发才能分享
   * 转发的标题、显示的图片和转发的具体页面都可以指定
   */
  onShareAppMessage:function(options){
    console.log('关于页面执行了转发......',options);
    return {
      title:'分享标题',
      path:'/pages/about/about',
      imageUrl:'../../images/主页2.png'
    }
  },
  /**
   * 监听当前页面对应的tab点击操作
   */
  onTabItemTap:function(item){
    console.log('关于页面的tab被点击了......',item)

    // this代表当前页面实例
    console.log(this);
    // 获取自定义的数据和方法
    console.log(this.user.name);
    this.show();
    // 获取数据仓库data中的数据
    console.log(this.data.msg);
    // 修改数据仓库data中的数据，使用this.data的方式修改是不会重新渲染页面的，即页面不会同步更新，会造成数据不一致
    // 应使用 this.setData 修改就会同步渲染页面，使数据同步，
    // this.data.msg = '您好'
    this.setData({
      msg:'您好', // 如果已存在，则修改
      info:'信息' // 如果不存在，则新增
    });
  },
  /**
   * 其他：自定义的变量和函数
   */
  user:{
    name:'leo',
    sex:'男'
  },
  show(){
    console.log('执行了关于页面的show方法......')
  },
  scrolltoupper(e){ // 事件对象
    console.log('滚动到顶部',e);
  },
  scrolltolower(e){
    console.log('滚动到底部',e)
  },
  chgSex(e){
    console.log(e.detail.value) // 获取选中radio的值
  },
  chglike(e){
    console.log(e.detail.value) // 获取选中checkbox值
  },
  binddatechg(e){
    this.setData({
      date:e.detail.value
    })
  },
  bindRegion(e){
    this.setData({
      region:e.detail.value
    })
  },
  bindCountry(e){
    this.setData({
      index:e.detail.value
    })
  },
  bindOpen(e){
    console.log(e.detail.value)
  },
  duSUbmit(e){
    console.log(e.detail.value)
  },
  doButton(e){
    console.log('单击普通按钮')
  }
})

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/622239.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

【3dmax笔记】021：对齐工具（快速对齐、法线对齐、对齐摄影机）

【3dmax笔记】021：对齐工具（快速对齐、法线对齐、对齐摄影机）

文章目录 一、对齐二、快速对齐三、法线对齐四、对齐摄影机五、注意事项3dmax提供了对齐、快速对齐、法线对齐和对齐摄像机等对齐工具： 对齐工具选项： 下面进行一一讲解。 一、对齐 快捷键为Alt+A，将当前选择对象与目标对象进行对齐。 最大对最大：
阅读更多...
基于SpringBoot+Vue的法律咨询系统

基于SpringBoot+Vue的法律咨询系统

课题背景 二十一世纪互联网的出现&#xff0c;改变了几千年以来人们的生活&#xff0c;不仅仅是生活物资的丰富&#xff0c;还有精神层次的丰富。在互联网诞生之前&#xff0c;地域位置往往是人们思想上不可跨域的鸿沟&#xff0c;信息的传播速度极慢&#xff0c;信息处理的速…
阅读更多...
7B2 PRO主题5.4.2 免授权开心版源码 | WordPress主题

7B2 PRO主题5.4.2 免授权开心版源码 | WordPress主题

简介&#xff1a; B2 PRO 5.4.2 最新免授权版不再需要改hosts&#xff0c;和正版一样上传安装就可以激活。 直接在WordPress上传安装即可 点击下载
阅读更多...
3.整数运算

3.整数运算

系列文章目录 信息的表示和处理 : Information Storage&#xff08;信息存储&#xff09;Integer Representation&#xff08;整数表示&#xff09;Integer Arithmetic&#xff08;整数运算&#xff09;Floating Point&#xff08;浮点数&#xff09; 文章目录 系列文章目录前…
阅读更多...
基于SpringBoot + MySQL的宠物医院管理系统设计与实现+毕业论文+指导搭建视频

基于SpringBoot + MySQL的宠物医院管理系统设计与实现+毕业论文+指导搭建视频

系统介绍 项目的使用者可以避免排队挂号&#xff0c;比较方便&#xff0c;也方便于宠物医院的管理。现在的宠物本系统根据华阳社区宠物医院管理工作流程将系统使用者划分为三类&#xff0c;分别为、宠物医生、宠物主人以及系统管理人员&#xff0c;以下是对该三类类用户的具体…
阅读更多...
几个简单操作，让3dmax渲染速度起飞‼️

几个简单操作，让3dmax渲染速度起飞‼️

3dmax渲染慢原因&#xff1a; 场景复杂度&#xff1a;场景中模型、材质、纹理和贴图的复杂性增加渲染时间。优化场景&#xff0c;使用简化模型和材质可提高速度。 高质量设置&#xff1a;高级渲染效果如光线追踪、全局照明等增加计算量。适当降低设置&#xff0c;如减少分辨率…
阅读更多...
类文件具有错误的版本 61.0, 应为 52.0

类文件具有错误的版本 61.0, 应为 52.0

报错如下&#xff1a; Spring Boot 3以上版本至少得依赖JDK17版本&#xff0c;如果项目中要求使用JDK8版本&#xff0c;那么只能使用Spring Boot 2版本了。 <parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-par…
阅读更多...
ssm+vue的公务用车管理智慧云服务监管平台查询统计（有报告）。Javaee项目，ssm vue前后端分离项目

ssm+vue的公务用车管理智慧云服务监管平台查询统计（有报告）。Javaee项目，ssm vue前后端分离项目

演示视频&#xff1a; ssmvue的公务用车管理智慧云服务监管平台查询统计&#xff08;有报告&#xff09;。Javaee项目&#xff0c;ssm vue前后端分离项目 项目介绍&#xff1a; 采用M&#xff08;model&#xff09;V&#xff08;view&#xff09;C&#xff08;controller&…
阅读更多...
pytest(二)

pytest(二)

1.pytest-html⽣成报告 Pytest-HTML 是⼀个插件&#xff0c;它可以⽣成漂亮且易于阅读的 HTML 测试报告。下⾯是使⽤ pytest-html ⽣成报告的步骤&#xff1a; 1. 安装 pytest-html 插件&#xff1a; pip install pytest-html 2. 运⾏测试并⽣成报告 pytest --htmlr…
阅读更多...
python内置类bytearray()详解

python内置类bytearray()详解

bytearray 是 Python 的一个内置类&#xff0c;它提供了一个可变序列的字节数组。 bytearray 数组的元素必须是0-255之间的整数&#xff0c;这些整数对应于ASCII字符集中的数字。下面着张图是部分ASCII字符&#xff1a; bytearray 是可变的&#xff0c;可修改其内容&#xff0c…
阅读更多...
Linux下网络命令

Linux下网络命令

目录 需求1-查看本机是否存在22端口解法1解法2解法3 需求2-查看其他主机是否存在22端口解法1解法2解法3 需求3-查看TCP连接解法1/2 需求4-统计80端口tcp连接次数解法 需求5-查看总体网络速度解法 需求6-查看进程流量解法 需求7-dns解法 需求8-traceroute到baidu解法 需求9-查看…
阅读更多...
上传到 PyPI

上传到 PyPI

将软件包上传到 PyPI&#xff08;Python Package Index&#xff09;&#xff0c;您需要遵循以下步骤&#xff1a; 准备软件包&#xff1a;确保您的软件包满足以下要求&#xff1a; 包含一个 setup.py 文件&#xff0c;用于描述软件包的元数据和依赖项。包含软件包的源代码和必要…
阅读更多...
浅析扩散模型与图像生成【应用篇】(二十四)——Text2Live

浅析扩散模型与图像生成【应用篇】(二十四)——Text2Live

24. Text2LIVE : Text-Driven Layered Image and Video Editing 本文提出一种文本驱动的图像和视频编辑方法。与其他方法直接对图像进行编辑的方式不同&#xff0c;本文提出的方法并不是基于扩散模型的&#xff0c;更像是一个自编码器&#xff0c;通过对原图编码解码输出一个新…
阅读更多...
[ACTF新生赛2020]SoulLike

[ACTF新生赛2020]SoulLike

没见过的错误&#xff1a; ida /ctg目录下的hexrays.cfg文件中的MAX_FUNCSIZE64 改为 MAX_FUNCSIZE1024 然后就是一堆数据 反正就是12个字符 from pwn import * flag"actf{" k0 for n in range(12):for i in range(33,127):pprocess("./SoulLike")_flag…
阅读更多...
FFmpeg常用API与示例（三）—— 音视频解码与编码

FFmpeg常用API与示例（三）—— 音视频解码与编码

编解码层 1.解码 (1) 注册所有容器格式和 CODEC:av_register_all() (2) 打开文件:av_open_input_file() (3) 从文件中提取流信息:av_find_stream_info() (4) 穷举所有的流&#xff0c;查找其中种类为 CODEC_TYPE_VIDEO (5) 查找对应的解码器:avcodec_find_decoder() (6) …
阅读更多...
家居分类的添加、修改、逻辑删除和批量删除

家居分类的添加、修改、逻辑删除和批量删除

文章目录 1.逻辑删除家居分类1.将之前的docker数据库换成云数据库2.树形控件增加添加和删除按钮1.找到控件2.粘贴四个属性到<el-tree 属性>3.粘贴两个span到<el-tree>标签里4.代码5.效果6.方法区新增两个方法处理添加和删除分类7.输出查看一下信息8.要求节点等级小…
阅读更多...
蓝桥杯国赛每日一题：完全二叉树的权值（双指针，二叉树）

蓝桥杯国赛每日一题：完全二叉树的权值（双指针，二叉树）

题目描述&#xff1a; 给定一棵包含 N 个节点的完全二叉树&#xff0c;树上每个节点都有一个权值&#xff0c;按从上到下、从左到右的顺序依次是 A1,A2,⋅⋅⋅AN&#xff0c;如下图所示&#xff1a; 现在小明要把相同深度的节点的权值加在一起&#xff0c;他想知道哪个深度的节…
阅读更多...
微前端无界方案

微前端无界方案

微前端无界 无界 官方文档 主应用 1、引入 // 无框架时使用wujie import Wujie from wujie // 当结合框架时使用wujie-xxx // import Wujie from "wujie-vue2"; // import Wujie from "wujie-vue3"; // import Wujie from "wujie-react";cons…
阅读更多...
软件需求工程习题

软件需求工程习题

1.&#xff08;面谈&#xff09;是需求获取活动中发生的需求工程师和用户间面对面的会见。 2.使用原型法进行需求获取&#xff0c;&#xff08;演化式&#xff09;原型必须具有健壮性&#xff0c;代码质量要从一开始就能达到最终系统的要求 3.利用面谈进行需求获取时&#xf…
阅读更多...
提升文本到图像模型的空间一致性：SPRIGHT数据集与训练技术的新进展

提升文本到图像模型的空间一致性：SPRIGHT数据集与训练技术的新进展

当前的T2I模型&#xff0c;如Stable Diffusion和DALL-E&#xff0c;虽然在生成高分辨率、逼真图像方面取得了成功&#xff0c;但在空间一致性方面存在不足。这些模型往往无法精确地按照文本提示中描述的空间关系来生成图像。为了解决这一问题&#xff0c;研究人员进行了深入分析…
阅读更多...
最新文章

Copyright @ 2022~2023