位置: IT常识 - 正文

微信小程序--》你真的了解小程序组件的使用吗?(微信小程序开发平台)

编辑:rootadmin
微信小程序--》你真的了解小程序组件的使用吗?

推荐整理分享微信小程序--》你真的了解小程序组件的使用吗?(微信小程序开发平台),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:微信小程序在哪里打开,微信小程序在哪里找?,微信小程序制作,微信小程序开发,微信小程序开发公司,微信小程序店铺怎么开,微信小程序店铺怎么开,微信小程序开发一个多少钱,内容如对您有帮助,希望把文章链接给更多的朋友!

🏍️作者简介:大家好,我是亦世凡华、渴望知识储备自己的一名在校大学生

🛵个人主页:亦世凡华、

🛺系列专栏:微信小程序

🚲座右铭:人生亦可燃烧,亦可腐败,我愿燃烧,耗尽所有光芒。

👀引言

       ⚓经过web前端开发的学习,相信大家对于前端开发有了一定深入的了解,今天我开设了微信小程序专栏,主要想从移动端开发方向进一步发展,而对于我来说写移动端博文的第一站就是小程序开发,希望看到我文章的朋友能对你有所帮助。

目录

📚小程序—组件

📰组件的分类:(标红的为重点知识)

📃视图容器类组件

常用的视图容器类组件

view组件的使用(和web前端的 div 及其类似,招壶画瓢即可)

scroll-view组件的使用 (实现纵向滚动效果)

swiper 和 swiper-item 组件的使用(实现轮播图的效果)

swiper 组件常用属性介绍

📜基础内容组件

常用的基础内容组件

text组件的使用(实现长按选中文本内容的效果)

rich-text组件的使用(把 HTML 字符串渲染为对应的 UI 结构)

📑其他常用组件

button按钮的基本使用

image组件的基本使用

image组件中 mode 属性讲解


📚小程序—组件

小程序中的组件是由宿主环境提供的,开发者可以基于组件快速搭建出漂亮的页面结构。

📰组件的分类:(标红的为重点知识)

①视图容器        ②基础内容        ③表单组件        ④导航组件        ⑤媒体组件        ⑥map地图组件        ⑦canvas画布组件        ⑧开放能力        ⑨原生组件        ⑩无障碍访问、导航栏以及页面属性配置节点。      

原本的组件分为九大类现在分为十二大类,新增了原生组件的说明、导航栏以及页面属性配置节点,想了解更多组件的知识,推荐看一下 微信官方文档 对组件的说明。

📃视图容器类组件名称功能说明名称功能说明cover-image覆盖在原生组件之上的图片视图page-container页面容器cover-view覆盖在原生组件之上的文本视图scroll-view可滚动视图区域match-mediamedia query 匹配检测节点share-element共享元素movable-areamovable-view的可移动区域swiper滑块视图容器movable-view可移动的视图容器,在页面中可以拖拽滑动view视图容器swiper-item仅可放置在swiper组件中,宽高自动设置100%常用的视图容器类组件

① view

        ●普通视图区域

        ●类似于 HTML 中的div,是一个块级元素

        ●常用来实现页面的布局效果

② scroll-view

        ●可滚动的视图区域

        ●常用来实现滚动列表效果

③ swiper 和 swiper-item

        ●轮播图容器组件 和 轮播图 item 组件

view组件的使用(和web前端的 div 及其类似,招壶画瓢即可)<!--pages/person/person.wxml--><view class="view"> 我是相当于 div 的容器组件 <view class="content">大家想了解更多<span>微信小程序</span>可以关注一下作者</view> <view class="content1">csdn搜索亦世凡华、哦</view></view>/* pages/person/person.wxss */.view{ color: #f00; text-align: center; font-weight: bold;}.content span{ font-size: 1.5em; color: #008c8c;}.content{ color: #0f0; margin-top: 30px;}.content1{ margin-top: 30px; color: #ffd345; font-size: 25px;}

 

scroll-view组件的使用 (实现纵向滚动效果)<!-- scroll-y 属性:允许纵向滚动 --><!-- scroll-x 属性:允许横向滚动 --><!-- 注意:使用竖向滚动时,必须给scroll-view 一个固定的高度 --><scroll-view class="container1" scroll-x> <view>手机</view> <view>电脑</view> <view>平板</view> <view>键盘</view></scroll-view>/* pages/person/person.wxss */.container1 view{ width: 100px; height: 100px; text-align: center; line-height: 100px;}.container1 view:nth-child(1){ background-color: #f00;}.container1 view:nth-child(2){ background-color: #0f0;}.container1 view:nth-child(3){ background-color: #00f;}.container1 view:nth-child(4){ background-color: gold;}.container1{ border: 1px solid red; width: 100px; height: 200px;}微信小程序--》你真的了解小程序组件的使用吗?(微信小程序开发平台)

微信小程序中 container 是有默认样式的,其中就会是display:flex不起作用,推荐写类名的时候要避免出现使用含义特殊样式的关键字,否则程序可能会出现一些 Bug。

swiper 和 swiper-item 组件的使用(实现轮播图的效果)<!-- 轮播图区域 --><!-- indicator-dots 属性:显示面板指示点 --><swiper class="swiper-container" indicator-dots><!-- 第一页 --><swiper-item> <view class="item">手机</view></swiper-item><!-- 第二页 --><swiper-item> <view class="item">电脑</view></swiper-item><!-- 第三页 --><swiper-item> <view class="item">平板</view></swiper-item><!-- 第四页 --><swiper-item> <view class="item">键盘</view></swiper-item></swiper>/* pages/person/person.wxss */.swiper-container{ height: 150px; /* 轮播图容器的宽度 */}.item{ height: 100%; line-height: 150px; text-align: center;}swiper-item:nth-child(1) .item{ background-color: #f00;}swiper-item:nth-child(2) .item{ background-color: #0f0;}swiper-item:nth-child(3) .item{ background-color: #00f;}swiper-item:nth-child(4) .item{ background-color: #ff0;}

swiper 组件常用属性介绍属性类型默认值说明indicator-dotsbooleanfalse是否显示面板指示点indicator-colorcolorrgba(0,0,0,.3)指示点颜色indicator-active-colorcolor#000000当前选中的指示点颜色autoplaybooleanfalse是否自动切换intervalnumber5000自动切换时间间隔circularbooleanfalse是否采用衔接滑动

根据上述属性可以做一个简单的动图,大家仔细看一下变化。

📜基础内容组件名称功能说明text文本rich-text富文本icon图标组件progress进度条常用的基础内容组件

① text

        ●文本组件

        ●类似于 HTML 中的 span 标签,是一个行内元素

② rich-text

        ●富文本组件

        ●支持把 HTML 字符串渲染为 WXML 结构

text组件的使用(实现长按选中文本内容的效果)

官方文档以前使用的selectable已经废弃,现在使用user-select,这里了解一下即可。

<view> 进行手机号的复制: <!-- 复制要加上 user-select 才行 --> <text user-select>13333333333</text></view>

rich-text组件的使用(把 HTML 字符串渲染为对应的 UI 结构)<rich-text nodes="<h1 style='color:red'>我是h1标题</h1>"></rich-text>

 

📑其他常用组件

① button

        ●按钮组件

        ●功能比 HTML 中的 button 按钮丰富

        ●通过 open-type 属性可以调用微信提供的各种功能(客服、转发、获取用户授权等)

② image

        ●图片组件

        ●image组件的默认宽度约为 300px,高度约为 240px

button按钮的基本使用<view>-------通过 type 指定按钮类型---------</view><button>默认按钮</button><button type="primary">主色调按钮</button><button type="warn">警告按钮</button><view>--------size="mini" 小尺寸按钮--------</view><button size="mini">默认按钮</button><button type="primary" size="mini">主色调按钮</button><button type="warn" size="mini">警告按钮</button><view>------------plain 镂空按钮--------------</view><button size="mini" plain="">普通按钮</button><button type="primary" size="mini" plain="">主色调按钮</button><button type="warn" size="mini" plain="">警告按钮</button>

 

image组件的基本使用<!-- 空图片 --><image></image><!-- 图片 --><image src="/images/1.jpeg" mode="aspectFill"></image>image{ border: 1px solid red;}

image组件中 mode 属性讲解

image组件中mode属性是用来指定图片的剪切和缩放模式,常用的mode属性如下:

mode值说明scaleToFill(默认值)缩放模式,不保持纵横比缩放图片,使图片宽高完全拉伸至填满image元素aspectFit缩放模式,保持纵横比缩放图片,使图片的长边能完全显示出来aspectFill缩放模式,保持纵横比缩放图片,只保证图片的短边能完全显示出来widthFix缩放模式,宽度不变,高度自动变化,保持原图宽高比不变heightFix缩放模式,高度不变,宽度自动变化,保持原图宽高比不变

今天的讲解就到这,下期继续讲解认知小程序的开发 ! 

本文链接地址:https://www.jiuchutong.com/zhishi/299954.html 转载请保留说明!

上一篇:gdal概览(gdal官方文档)

下一篇:CSS字体样式(font)[详细](css中设置字体样式)

  • 饿了么怎么查看浏览足迹(饿了么怎么查看对骑手的评价)

    饿了么怎么查看浏览足迹(饿了么怎么查看对骑手的评价)

  • 顺丰没有单号只有手机号可以查到快递吗(顺丰有单号没有物流信息)

    顺丰没有单号只有手机号可以查到快递吗(顺丰有单号没有物流信息)

  • 剪映添加音乐怎么调节声音(剪映添加音乐怎么删除前奏部分)

    剪映添加音乐怎么调节声音(剪映添加音乐怎么删除前奏部分)

  • 装系统出现546怎么设置(装机出现546)

    装系统出现546怎么设置(装机出现546)

  • 抖音里不能下载的视频怎么保存下来(抖音不能下载是怎么回事)

    抖音里不能下载的视频怎么保存下来(抖音不能下载是怎么回事)

  • vivo手机上下箭头(vivo手机上下箭头图标)

    vivo手机上下箭头(vivo手机上下箭头图标)

  • 华为畅享9plus指纹解锁突然没有(华为畅享9plus指纹锁怎么设置)

    华为畅享9plus指纹解锁突然没有(华为畅享9plus指纹锁怎么设置)

  • 数据库删除表语句(数据库删除表语句区别)

    数据库删除表语句(数据库删除表语句区别)

  • 微信朋友圈指定人看其他能不能看到(微信朋友圈指定人可见新加的好友能看到吗)

    微信朋友圈指定人看其他能不能看到(微信朋友圈指定人可见新加的好友能看到吗)

  • 魅族蓝牙耳机声音太小怎么调节(魅族蓝牙耳机声音小怎么回事)

    魅族蓝牙耳机声音太小怎么调节(魅族蓝牙耳机声音小怎么回事)

  • 佳能打印机竖线不直(佳能打印机竖线不直是什么原因)

    佳能打印机竖线不直(佳能打印机竖线不直是什么原因)

  • 华为mate30pro怎么装双卡(华为mate30pro怎么刷机)

    华为mate30pro怎么装双卡(华为mate30pro怎么刷机)

  • 3500x配什么显卡(3500x配什么显卡性价比高)

    3500x配什么显卡(3500x配什么显卡性价比高)

  • 来电头像怎么设置(来电头像怎么设置视频)

    来电头像怎么设置(来电头像怎么设置视频)

  • 腾讯视频能不能看春晚直播(腾讯视频能不能投屏电视)

    腾讯视频能不能看春晚直播(腾讯视频能不能投屏电视)

  • vivos1怎么分屏(vivos1怎么分屏两个光遇)

    vivos1怎么分屏(vivos1怎么分屏两个光遇)

  • 声卡和网卡是主板自带的吗(声卡和网卡一般集成在机箱上对吗)

    声卡和网卡是主板自带的吗(声卡和网卡一般集成在机箱上对吗)

  • 苹果手机能控制空调么(苹果手机能控制空调开关吗)

    苹果手机能控制空调么(苹果手机能控制空调开关吗)

  • 苹果应用加密怎么设置(苹果应用加密怎么开)

    苹果应用加密怎么设置(苹果应用加密怎么开)

  • iphonexr支持多少w快充(iPhonexr支持多少w充电)

    iphonexr支持多少w快充(iPhonexr支持多少w充电)

  • 苹果手机备份占空间吗(苹果手机备份占用电脑内存吗)

    苹果手机备份占空间吗(苹果手机备份占用电脑内存吗)

  • 轻松互助怎么退出(轻松互助怎么退款)

    轻松互助怎么退出(轻松互助怎么退款)

  • 如何恢复qq阅读足迹(qq上的阅读怎么找回)

    如何恢复qq阅读足迹(qq上的阅读怎么找回)

  • excel批量匹配查询(Excel批量匹配查询)

    excel批量匹配查询(Excel批量匹配查询)

  • 企业所得税广告费30%扣除
  • 企业借出去的钱收不回来
  • 一般纳税人结转税额怎么做会计分录
  • 权益法核算转成本法
  • 未达起征点增值税能否开票
  • 财政基建拨款如何做分录
  • 进口产品销售需要什么资质
  • 什么情况下做暂估
  • 企业年度财务报表主要包括
  • 非盈利组织的银行是什么
  • 收付转记凭证如何填写例题
  • 初期厂房监理费怎么做账?
  • 建筑行业的收入是什么
  • 驾校挂靠车辆账务处理?
  • 土地出让金抵减销项税如何申报
  • 报名费发票开什么项目
  • 生产药酒的厂家
  • 委托代销收取手续费账务处理
  • 地税开发票为啥要交百分之二的企业所得税?
  • 企业发现多缴税款超过3年
  • 员工一次性赔偿怎么算
  • 托儿所幼儿园卫生保健工作规范2022
  • 公司经营情况说明怎么写模板
  • 药品增值税简易征收
  • 房地产企业预收房款开票
  • 财务报表第一季度引用的期初数是第四季度还是年报
  • win11怎么设置最佳能效模式
  • 怎样才能防止臭虫在卧室里呢
  • 预提费用利息会增加吗
  • 发票来了冲预付账款怎么记账
  • 固定资产折旧计算方法
  • 固定资产清理应交税费怎么算
  • 产品分仓
  • 系统更新到win11后还可以调回win10吗
  • vue+element-ui项目
  • 公司向职工借款利息需要交税吗
  • 在途物资运费会计科目怎么写
  • 工伤补贴由谁发放
  • 纳税人提供劳务派遣服务,选择差额纳税的,按照5%
  • 专利年费的滞纳金
  • 时间序列转换
  • css 自定义变量
  • 购税盘分录
  • 待抵扣进项税额和进项税额的区别
  • 公司之间往来款需要交税吗
  • 企业汇算清缴的工资薪金支出是怎么填
  • 1000元的打印机双十一满减可以减150吗少
  • 待认证进项税额借贷方向
  • 公司为员工异地缴纳五险一金
  • 小规模注销时盈余怎么算
  • 产品销售收入的确认条件
  • 一般纳税人的进项税额可以抵扣吗
  • 提供加工劳务计入什么科目
  • 固定资产原值如何计算
  • 分公司设立条件怎么写
  • 应付职工薪酬账户贷方登记的是
  • 新开办企业如何建账
  • sql server多行添加
  • win7全屏游戏怎么窗口化
  • win7怎么打开后缀
  • win7系统打开计算机的管理出现正在向控制台添加属性
  • 和查看已连接的wifi密码
  • xp怎么安装iis
  • 让mac桌面变整洁的方法
  • 快速关机的快捷方式
  • redhat无法启动
  • mysqld-nt.exe - mysqld-nt是什么进程 有什么用
  • 十个常用linux脚本命令
  • wps linux版本是什么意思
  • opengl网格
  • js怎么理解
  • javascript零基础学要学多久
  • nodejs xhr
  • android自定义权限申请弹窗
  • android环境搭建实验报告
  • 手机截取电脑屏幕
  • 重庆市电子发票样式
  • 如何查询税务是否签订三方
  • 国家税务总局 土地增值税
  • 税控盘口令密码怎么修改
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设