微信小程序开发核心:样式,组件,布局,矢量图标

在这里插入图片描述

✨✨ 欢迎大家来到景天科技苑✨✨

🎈🎈 养成好习惯,先赞后看哦~🎈🎈

🏆 作者简介:景天科技苑
🏆《头衔》:大厂架构师,华为云开发者社区专家博主,阿里云开发者社区专家博主,CSDN全栈领域优质创作者,掘金优秀博主,51CTO博客专家等。
🏆《博客》:Python全栈,前后端开发,小程序开发,人工智能,js逆向,App逆向,网络系统安全,数据分析,Django,fastapi,flask等框架,linux,shell脚本等实操经验,网站搭建,数据库等分享。

所属的专栏:微信小程序开发零基础教学,难点与应用实战总结
景天的主页:景天科技苑

文章目录

  • 小程序开发核心
    • 1.尺寸单位和样式
      • 1.1 创建小程序项目--纯净环境
      • 1.2 关于小程序显示的尺寸单位
      • 1.3 样式
        • 1.3.1 全局样式 app.wxss
        • 1.3.2 局部样式 页面.wxss
    • 2.首页案例
      • 2.1 button组件使用
      • 2.2 swiper+swiper-item首页轮播图
        • 2.2.1 index.wxml
        • 2.2.2 把轮播图放在 images/banner目录下
      • 2.3 首页提示板块
    • 3.小程序引入矢量图
      • 1 注册阿里矢量图账号
      • 2 搜索想要的图标
      • 3 我的项目--项目设置--》打开base64,然后点击保存
      • 4 选择font class --》生成代码--》点击链接地址打开
      • 5 把打开的链接地址内容复制到项目中
      • 6 在app.wxss中引入
      • 7 在想用图标的位置,加入text组件

小程序开发核心

1.尺寸单位和样式

1.1 创建小程序项目–纯净环境

在这里插入图片描述

纯净环境
在这里插入图片描述

我们把app.json里面的window的配置拿过来

 "window": {
    "navigationBarTitleText": "功能演示",   # 标题
    "navigationBarBackgroundColor": "#0000FF", #颜色
    "enablePullDownRefresh": false,  # 是否带下拉刷新
    "backgroundColor": "#00FFFF",    # 下拉刷新颜色
    "backgroundTextStyle": "dark"    # light ,下拉刷新的点点什么颜色
  },

在这里插入图片描述

我们将index.wxml的导航栏改为自己的
在这里插入图片描述

在app.json中配置下tabbar

"tabBar": {
    "selectedColor": "#b4282d",
    "position": "bottom",
    "list": [
        {
            "pagePath": "pages/index/index",
            "text": "首页",
            "iconPath": "images/home.png",
            "selectedIconPath": "images/home_select.png"
        },
        {
            "pagePath": "pages/my/my",
            "text": "我的",
            "iconPath": "images/my.png",
            "selectedIconPath": "images/my_select.png"
        }
    ]
},

将相关文件夹,文件都拷过来,上述操作都是上一章的内容,如有遗忘,可以翻过去复习一下
在这里插入图片描述
在这里插入图片描述

1.2 关于小程序显示的尺寸单位

1 小程序中–》手机屏幕大小可能不一样–》使用px 像素就会有问题–》小程序统一了–》整个宽度就是 750rpx—》这样无论在什么手机上能等比例缩放

2 以后在高度,宽度的时候–》统一都用 rpx
在这里插入图片描述

1.3 样式

1.3.1 全局样式 app.wxss

1 以后在这里面写css 样式
在这里插入图片描述

2 样式一般不会直接写在wxml文件中,全局的样式一般写在app.wxss里面。整个小程序 都生效

.myview {
  height: 500rpx;
  width: 750rpx;
  background-color: aquamarine;
  font-size: 30rpx;
}

在这里插入图片描述

然后在wxml里面调用
在这里插入图片描述

1.3.2 局部样式 页面.wxss

1 以后在这里面写css 样式

2 只在当前页面中生效

.myview{
  background-color: rebeccapurple;
}

个人中心wxml
在这里插入图片描述

个人中心样式
在这里插入图片描述

此时我们点击个人中心,北京颜色就是我们在个人中心设置的局部背景颜色
在这里插入图片描述

2.首页案例

内置组件
text span
view div
image img
icon 提示

这些组件都是怎么用的呢,我们可以子啊开发工具中,将光标放在标签处,然后点击微信开放文档
在这里插入图片描述

点进去,就会跳到组件使用介绍页
在这里插入图片描述

2.1 button组件使用

在这里插入图片描述

1 在 页面.wxml 中

<button size="mini" type="default" plain class="mybutton">我是个按钮</button>
<button size="mini" type="warn" plain>我是个按钮</button>
<button size="mini" type="primary" plain>我是个按钮</button>

plain 镂空,北京透明色
在这里插入图片描述

在这里插入图片描述

2 在 页面.wxss中使用 可以给按钮设置单独的样式

.mybutton{
  /* 距离顶部30rpx */
  margin-top: 300rpx;   
  /* 距离底部30rpx */
  margin-bottom: 30rpx;

  /* 优先以这个样式为准 */
  background-color: red !important;
}

在这里插入图片描述

3 后续其它属性,都比较简单,参照官网,相信大家可以实现效果
-按钮带加载
-按钮不可点击
。。。。

2.2 swiper+swiper-item首页轮播图

看下各参数属性
在这里插入图片描述

把之前我们得首页代码全删了,来制作首页轮播图
我们可以把swiper放在view里面

2.2.1 index.wxml
<view>
    <swiper 
  autoplay
  indicator-dots
  circular
  indicator-color='#FFFFF'
  interval='3000'
>
  <swiper-item>
    <image src="/images/banner/banner1.jpg" mode="widthFix" style="width: 750rpx;"/>
  </swiper-item>
  <swiper-item>
    <image src="/images/banner/banner2.png" mode="widthFix" style="width: 750rpx;" />
  </swiper-item>
  <swiper-item>
    <image src="/images/banner/banner3.jpg" mode="widthFix" style="width: 750rpx;" />
  </swiper-item>
</swiper>
</view>

效果
在这里插入图片描述

真机调试效果
在这里插入图片描述

2.2.2 把轮播图放在 images/banner目录下

2.3 首页提示板块

index.wxml

<view class="tips">
  <text class="iconfont icon-tishi icon"></text>
  <text>欢迎使用我们的系统,谢谢~~</text>
</view>

在这里插入图片描述

index.wxss

.tips{
  /* 背景色 */
  background-color: #f5eedf;
  /* 字大小 */
  font-size: 32rpx;
  /* 字颜色 */
  color:#e9ab4e; 
  /* 圆角效果 */
  border-radius: 50rpx;
  /* 距离上下右左距离 */
  margin:30rpx 10rpx 30rpx 10rpx;
  padding-left:130rpx ;
}
.icon{
  padding-right: 10rpx;
}

在这里插入图片描述

3.小程序引入矢量图

小程序中我们经常会用到图标,自己绘制图标可能比较麻烦,也不一定满意,此时我们可以使用阿里的矢量库图标
我们使用 阿里 矢量库图标

1 注册阿里矢量图账号

  • 打开 https://www.iconfont.cn/
  • 注册成功
    在这里插入图片描述

2 搜索想要的图标

在搜索框输入想要搜索的图标,按回车搜索
在这里插入图片描述
在这里插入图片描述

  • 加入购物车
    在这里插入图片描述

  • 在购物车中添加至项目
    在这里插入图片描述

刚开始没有项目,需要新建项目
在这里插入图片描述

可以多选几个需要用到的图标,添加到项目
在这里插入图片描述

3 我的项目–项目设置–》打开base64,然后点击保存

在这里插入图片描述

4 选择font class --》生成代码–》点击链接地址打开

在这里插入图片描述

点击生成
在这里插入图片描述

点击链接,可以看到里面写了一些样式
此时的图片等资源是用base64编码得到的,不用去远程去下载
在这里插入图片描述

5 把打开的链接地址内容复制到项目中

  • static/css/font.wxss
    在这里插入图片描述

6 在app.wxss中引入

一般我们都会将样式单独写在一个一个文件中,然后在app.wxss中引入

@import "/static/css/font.wxss";

在这里插入图片描述

7 在想用图标的位置,加入text组件

想加入什么图标,就在图标悬浮处,复制代码
在这里插入图片描述

放入到text中

<text class="iconfont icon-tishi icon"></text>

可以看到图标显示出来了
在这里插入图片描述

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

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

相关文章

Zynq 7000 系列之启动模式—NAND启动

NAND启动是一种使用NAND闪存进行设备启动的方式。NAND闪存是一种非易失性存储设备&#xff0c;广泛用于嵌入式系统、计算机和其他电子设备中。由于NAND闪存具有高速读写和较高的存储密度等特点&#xff0c;使得NAND启动成为了一种高效且常用的启动方式。 1 特点 NAND启动具有…

【Spring】Spring中AOP的简介和基本使用,SpringBoot使用AOP

&#x1f4dd;个人主页&#xff1a;哈__ 期待您的关注 一、AOP简介 AOP的全称是Aspect-Oriented Programming&#xff0c;即面向切面编程&#xff08;也称面向方面编程&#xff09;。它是面向对象编程&#xff08;OOP&#xff09;的一种补充&#xff0c;目前已成为一种比较成…

Milvus Cloud 向量数据库Reranker成本比较和使用场景

成本比较:向量检索 v.s. Cross-encoder Reranker v.s. 大模型生成 虽然 Reranker 的使用成本远高于单纯使用向量检索的成本,但它仍然比使用 LLM 为同等数量文档生成答案的成本要低。在 RAG 架构中,Reranker 可以筛选向量搜索的初步结果,丢弃掉与查询相关性低的文档,从而有…

电商技术揭秘三十九:电商智能风控技术架构设计

相关系列文章 电商技术揭秘相关系列文章合集&#xff08;1&#xff09; 电商技术揭秘相关系列文章合集&#xff08;2&#xff09; 电商技术揭秘二十八&#xff1a;安全与合规性保障 电商技术揭秘二十九&#xff1a;电商法律合规浅析 电商技术揭秘三十&#xff1a;知识产权保…

简单分享,豆瓣小组,可能被你忽视的获取精准流量渠道!

⾖瓣⼩组&#xff1a;精准流量的隐藏宝藏 探索互联网世界的每一个角落&#xff0c;你会发现总有那么一些被忽视的宝藏&#xff0c;等待着被发现者的光临。今天&#xff0c;我要和大家分享的这个宝藏&#xff0c;就是⾖瓣⼩组——一个你可能未曾注意到的精准流量渠道。 ⾖瓣平…

2024最新UI发卡盗U/支持多语言/更新UI界面/支持多个主流钱包

本文来自&#xff1a;2024最新UI发卡盗U/支持多语言/更新UI界面/支持多个主流钱包 - 源码1688 应用介绍 简介&#xff1a; 2024最新UI发卡盗U/支持多语言/更新UI界面/支持多个主流钱包 自行检查后门&#xff0c;最好是部署智能合约后用合约地址来授权 包含转账支付页面盗U授…

蓝网科技临床浏览系统 deleteStudy SQL注入漏洞复现(CVE-2024-4257)

0x01 产品简介 蓝网科技临床浏览系统是一个专门用于医疗行业的软件系统,主要用于医生、护士和其他医疗专业人员在临床工作中进行信息浏览、查询和管理。 0x02 漏洞概述 蓝网科技临床浏览系统 deleteStudy接口处SQL注入漏洞,未经身份验证的恶意攻击者利用 SQL 注入漏洞获取…

HEVC/H.265视频编解码学习笔记–框架及块划分关系

前言 由于本人在学习视频的过程中&#xff0c;觉得分块单元太多搞不清楚其关系&#xff0c;因此本文着重记录这些分块单元的概念以及关联。 一、框架 视频为一帧一帧的图像&#xff0c;其编码的主要核心是压缩空间以及时间上的冗余。因此&#xff0c;视频编码有帧内预测和帧间…

TCP协议在物联网中实战

一、TCP协议介绍 网上对TCP协议介绍众多&#xff0c;本人按照自己的理解简单介绍一下。 TCP&#xff08;Transmission Control Protocol&#xff0c; 传输控制协议&#xff09;是一种面向连接的、可靠的、基于字节流的传输控制层通信协议。 1.1 协议机制 1.1.1 三次握手 &…

面试重点1:打开网页点击URL,返回页面内容,从网络协议层面讲解一下

在这种场景下&#xff0c;从网络协议层面来讲解打开网页并点击 URL 的过程可以大致分为以下几个步骤&#xff1a; 1. DNS 解析 当你在浏览器中输入一个 URL&#xff08;例如 https://www.example.com&#xff09;&#xff0c;首先浏览器会进行 DNS 解析&#xff0c;将域名解析…

前端VUE项目中使用async()用法是为什么?能不用吗?

使用 async 关键字来定义一个函数主要有几个原因&#xff1a; 支持 await 关键字&#xff1a; async 函数允许你在其中使用 await 关键字&#xff0c;这使得你可以在不阻塞程序执行的情况下&#xff0c;等待一个异步操作&#xff08;如网络请求、文件读写等&#xff09;的完成。…

JAVA基础---Stream流

Stream流出现背景 背景 在Java8之前&#xff0c;通常用 fori、for each 或者 Iterator 迭代来重排序合并数据&#xff0c;或者通过重新定义 Collections.sorts的 Comparator 方法来实现&#xff0c;这两种方式对 大数量系统来说&#xff0c;效率不理想。 Java8 中添加了一个…

Python量化炒股的获取数据函数—get_concept()

查询股票所属的概念板块函数get_concept()&#xff0c;利用该函数可以查询一只或多只股票所属的概念板块&#xff0c;其语法格式如下&#xff1a; get_concept(security, dateNone)security&#xff1a;标的代码。类型为字符串&#xff0c;形式如‘000001.XSHE’&#xff0c;或…

邦注科技 模具清洗机 干冰清洗机 干冰清洗设备原理介绍

干冰清洗机&#xff0c;这款神奇的清洁设备&#xff0c;以干冰颗粒——固态的二氧化碳&#xff0c;作为其独特的清洁介质。它的工作原理可谓独具匠心&#xff0c;利用高压空气将干冰颗粒推送至超音速的速度&#xff0c;犹如一颗颗银色的流星&#xff0c;疾速喷射至待清洗的物体…

攻防世界XCTF-WEB入门12题解题报告

WEB入门题比较适合信息安全专业大一学生&#xff0c;难度低上手快&#xff0c;套路基本都一样 需要掌握&#xff1a; 基本的PHP、Python、JS语法基本的代理BurpSuite使用基本的HTTP请求交互过程基本的安全知识&#xff08;Owasp top10&#xff09; 先人一步&#xff0c;掌握W…

基准测试函数表达式--单峰函数与多峰函数

⚠申明&#xff1a; 未经许可&#xff0c;禁止以任何形式转载&#xff0c;若要引用&#xff0c;请标注链接地址。 全文共计3077字&#xff0c;阅读大概需要3分钟 &#x1f308;更多学习内容&#xff0c; 欢迎&#x1f44f;关注&#x1f440;【文末】我的个人微信公众号&#xf…

SSH和Telnet的区别

SSH&#xff08;Secure Shell&#xff09;和Telnet是两种网络协议&#xff0c;用于远程登录和管理计算机系统。但是它们有以下几个主要的区别&#xff1a; 安全性&#xff1a;SSH是一种加密的协议&#xff0c;可以向服务器传输加密的数据&#xff0c;以防止数据被窃听或篡改。而…

Arcade 用户界面滚动文本框

代码 import arcade from arcade import load_texture from arcade.gui import UIManager from arcade.gui.widgets import UITextArea, UIInputText, UITexturePaneLOREM_IPSUM ("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget pellentesqu…

探索互联网医院系统源码:在线问诊小程序开发教学

在线问诊小程序作为互联网医院系统的重要组成部分&#xff0c;为患者提供了更便捷、高效的医疗服务&#xff0c;成为了人们生活中不可或缺的一部分。今天&#xff0c;小编将带您探索互联网医院系统的源码&#xff0c;并介绍在线问诊小程序的开发教学&#xff0c;带领读者深入了…

【优质书籍推荐】Vue.js 3.x+Element Plus从入门到精通

大家好&#xff0c;我是爱编程的喵喵。双985硕士毕业&#xff0c;现担任全栈工程师一职&#xff0c;热衷于将数据思维应用到工作与生活中。从事机器学习以及相关的前后端开发工作。曾在阿里云、科大讯飞、CCF等比赛获得多次Top名次。现为CSDN博客专家、人工智能领域优质创作者。…