💌 所属专栏:【微信小程序开发教程】
😀 作 者:我是夜阑的狗🐶
🚀 个人简介:一个正在努力学技术的CV工程师,专注基础和实战分享 ,欢迎咨询!
💖 欢迎大家:这里是CSDN,我总结知识的地方,喜欢的话请三连,有问题请私信 😘 😘 😘
您的点赞、关注、收藏、评论,是对我最大的激励和支持!!!🤩 🤩 🤩
前言
大家好,又见面了,我是夜阑的狗🐶,本文是专栏【微信小程序开发教程】专栏的第8篇文章;
今天开始学习微信小程序的第四天💖💖💖,开启新的征程,记录最美好的时刻🎉,每天进步一点点。
专栏地址:【微信小程序开发教程】, 此专栏是我是夜阑的狗微信小程序开发过程的总结,希望能够加深自己的印象,以及帮助到其他的小伙伴😉😉。
如果文章有什么需要改进的地方还请大佬不吝赐教👏👏,【源代码下载地址】。
一、基础内容组件
1、常用的基础内容组件
比较常用组件有 button
、 image
和 navigator
(后续讲解),其作用和使用场景如下所示:
组件 | 作用 |
---|---|
button | 按钮组件 功能比 HTML 中的 button 按钮丰富 通过 open-type 属性可以调用微信提供的各种功能(客服、转发、获取用户授权、获取用户信息等) |
image | 图片组件 image 组件默认宽度约 300px、高度约 240px |
navigator | 页面导航组件 类似于 HTML 中的 a 链接 |
2、 button 组件的基本使用
首先要找到对应的页面来使用 button
组件,这里以 cshPageButton
页面为例,在 cshPageButton.wxml
里写页面的结构,在 cshPageButton.wxss
里写页面的样式。下面是 button
组件常用的属性:
属性 | 类型 | 默认值 | 说明 | 最低版本 |
---|---|---|---|---|
size | string | default | 按钮的大小 | 1.0.0 |
type | string | default | 按钮的样式类型 | 1.0.0 |
plain | boolean | false | 按钮是否镂空,背景色透明 | 1.0.0 |
loading | boolean | false | 名称前是否带 loading 图标 | 1.0.0 |
cshPageButton.wxml:
通过 type
、size
属性可以改变按钮的样式.
<button>单抽一次试试</button>
<button type="primary">没出货?直接十连</button>
<button type="warn" loading>歪了?氪金</button>
<!-- 小尺寸按钮 -->
<button size="mini">单抽一次试试</button>
<button type="primary" size="mini">直接十连</button>
<button type="warn" loading size="mini">歪了?氪金</button>
<!-- 镂空按钮 -->
<button size="mini" plain>单抽一次试试</button>
<button type="primary" size="mini" plain>直接十连</button>
<button type="warn" loading size="mini" plain>歪了?氪金</button>
cshPageButton.wxss:
对 button
标签进行样式选择。
button{
margin-top: 30rpx;
margin-bottom: 30rpx;
}
可以看一下多种按钮实现效果:
3、image 组件的基本使用
如果想显示图片,就可以使用 image
组件,先来介绍 image
组件的常用属性吧。
属性 | 类型 | 默认值 | 说明 | 最低版本 |
---|---|---|---|---|
src | string | 图片资源地址 | 1.0.0 | |
mode | string | scaleToFill | 图片裁剪、缩放的模式 | 1.0.0 |
其中 image
组件的 mode
属性用来指定图片的裁剪和缩放模式,常用的 mode
属性值如下:
mode值 | 说明 |
---|---|
scaleToFill | (默认值)缩放模式,不保持纵横比缩放图片,使图片的宽高完全拉伸至填满 image 元素 |
aspectFit | 缩放模式,保持纵横比缩放图片,使图片的长边能完全显示出来。也就是说,可以完整地将图片显示出来。 |
aspectFill | 缩放模式,保持纵横比缩放图片,只保证图片的短边能完全显示出来。也就是说, 图片通常只在水平或垂直方向是完整的,另一个方向将会发生截取。 |
widthFix | 缩放模式,宽度不变,高度自动变化,保持原图宽高比不变 |
heightFix | 缩放模式,高度不变,宽度自动变化,保持原图宽高比不变 |
cshPageButton.wxml:
注意这里 style
后面要用单引号‘’,不能使用双引号,因为外面已经使用了。
<image></image>
<image src="/images/cshTest2.jpg" ></image>
<image src="/images/cshTest2.jpg" mode="aspectFit"></image>
<image src="/images/cshTest2.jpg" mode="aspectFill"></image>
<image src="/images/cshTest2.jpg" mode="widthFix"></image>
<image src="/images/cshTest2.jpg" mode="heightFix"></image>
cshPageButton.wxss:
对标签进行样式选择。
button{
margin-top: 30rpx;
margin-bottom: 30rpx;
}
image {
border: 1px solid red;
}
可以来看一下图片效果:
总结
感谢观看,这里就是其它常用组件的介绍使用,如果觉得有帮助,请给文章点个赞吧,让更多的人看到。🌹 🌹 🌹
也欢迎你,关注我。👍 👍 👍
原创不易,还希望各位大佬支持一下,你们的点赞、收藏和留言对我真的很重要!!!💕 💕 💕 最后,本文仍有许多不足之处,欢迎各位认真读完文章的小伙伴们随时私信交流、批评指正!下期再见。🎉
更多专栏订阅:
- 😀 【LeetCode题解(持续更新中)】
- 🌼 【鸿蒙系统】
- 👑 【Python脚本笔记】
- 🚝 【Java Web项目构建过程】
- 💛 【微信小程序开发教程】
- ⚽ 【JavaScript随手笔记】
- 🤩 【大数据学习笔记(华为云)】
- 🦄 【程序错误解决方法(建议收藏)】
- 🚀 【软件安装教程】
订阅更多,你们将会看到更多的优质内容!!