云开发版的微信商城小程序第三章

简介: 云开发版的微信商城小程序第三章

三,初始化全局样式


我们在小程序里需要多处用到一些公共的,相同的颜色或者字体大小。我们如果每个地方都写上一个颜色值,后期如果需要更换主题颜色时,要修改很多地方,所以我们要把颜色定义一个全局的变量,来供需要使用到颜色的地方使用。这样后期主题颜色有变化时,我们只需要单独改变这个全局的颜色,其他地方使用到这个全局颜色的地方就方便了。所谓前人栽树后人乘凉。


3-1,在app.wxss定义全局颜色


我这里先定义一个全局的主题颜色如下:

这里要记住,我们themeColor前面的 - - 是固定写法。只有这样定义的全局变量,才能使用。


3-2,使用全局颜色变量


这里以首页里的一个文字,来给大家演示全局颜色变量的使用。

我们在home.wxml里定义一个demo的选择器

然后在home.wxss里使用

21d9564d07cb167ef5d9149414a8257b.png

使用全局样式变量的语法也是固定的。必须是var()包裹着变量名。

这样我们就可以在任何需要统一颜色的地方,使用我们定义好的颜色变量了。


3-3,改变navigationBar顶部栏样式。


可以看出我们默认的顶部栏是白色背景,黑色文字。

a2e3690e293c50f5708b915311be060f.png

对应代码是app.json里的window

221bc50da40286840dbfbecd6ddf8567.png

那我我们如果想变成下面这样的

就要把window里的几个值做下改变。

这样我们顶部的导航栏和我们底部的tabBar主题颜色就可以保持统一了。


3-4,全局字体大小保持统一


字体大小统一,就比较容易了,我们只需要在app.wxss的page里设置font-size即可,如下

这样我们就可以把整体的字体大小设置为32rpx了。

相关文章
|
2月前
|
存储 JSON 小程序
微信小程序入门之新建并认识小程序结构
微信小程序入门之新建并认识小程序结构
55 1
ly~
|
3月前
|
存储 供应链 小程序
除了微信小程序,PHP 还可以用于开发哪些类型的小程序?
除了微信小程序,PHP 还可用于开发多种类型的小程序,包括支付宝小程序、百度智能小程序、抖音小程序、企业内部小程序及行业特定小程序。在电商、生活服务、资讯、工具、娱乐、营销等领域,PHP 能有效管理商品信息、订单处理、支付接口、内容抓取、复杂计算、游戏数据、活动规则等多种业务。同时,在企业内部,PHP 可提升工作效率,实现审批流程、文件共享、生产计划等功能;在医疗和教育等行业,PHP 能管理患者信息、在线问诊、课程资源、成绩查询等重要数据。
ly~
84 6
|
2月前
|
小程序 JavaScript API
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
这篇文章介绍了如何在uni-app和微信小程序中实现将图片保存到用户手机相册的功能。
851 0
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
|
2月前
|
小程序 数据可视化 API
低代码可视化-uniapp商城首页小程序-代码生成器
低代码可视化-uniapp商城首页小程序-代码生成器
31 0
|
2月前
|
小程序
创建云开发小程序
创建云开发小程序
26 0
|
4月前
|
JSON 小程序 JavaScript
微信小程序制作 购物商城首页 【内包含源码】
这篇文章提供了一个微信小程序购物商城首页的实现方法和源码,包括页面布局、数据结构、核心代码以及如何配置tabBar和搜索框组件。
微信小程序制作 购物商城首页 【内包含源码】
|
2月前
|
小程序 前端开发 数据可视化
微信商城小程序WeiMall
微信商城小程序WeiMall
37 0
|
2月前
|
JavaScript
vue尚品汇商城项目-day06【43.微信支付业务】
vue尚品汇商城项目-day06【43.微信支付业务】
36 0
|
3月前
|
小程序 前端开发 API
微信小程序 - 调用微信 API 回调函数内拿不到 this 问题(解决方案)
本文讨论了在微信小程序中调用API回调函数时无法获取到`this`上下文的问题,并提供了解决方案。在回调函数中,使用一个变量(如`that`)来保存当前的`this`引用,然后在回调内部使用这个变量来访问当前页面的数据和方法。
|
4月前
|
移动开发 小程序 前端开发