位置: IT常识 - 正文

【微信小程序】WXSS和全局、页面配置(微信小程序制作)

编辑:rootadmin
【微信小程序】WXSS和全局、页面配置

推荐整理分享【微信小程序】WXSS和全局、页面配置(微信小程序制作),希望有所帮助,仅作参考,欢迎阅读内容。

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

🍒观众老爷们好呀,小程序系列更新,上文我们讲解了小程序中WXML 中的条件渲染和列表渲染,那么接下来,就让我们走进微信小程序的WXSS以及小程序配置吧! 🍒今天的内容也是非常重要,赶紧拿小本本记起来呀。

文章目录一,WXSS1.1 rpx尺寸单位1.2 样式导入@import1.3 全局样式二,全局配置2.1 属性三,页面配置一,WXSS

首先我们先介绍一下wxss,wxss是微信小程序独有的模板样式,它类似于web开发中的CSS,具备CSS大部分的功能,同时,它还拓展出了几个内容功能,接下来牛牛介绍一下新增的rpx尺寸单位以及样式导入@import。

1.1 rpx尺寸单位

rpx尺寸单位是微信独有的,主要用来解决屏适配问题。怎么回事呢?我们知道,手机款式很多,手机屏幕的大小也并不一致,我们想要让小程序根据屏幕宽度自动完成屏适配,于是有了rpx,rpx将屏幕宽度等分为750份,我们在开发的时候使用rpx尺寸单位,到使用的时候就会将其换算成像素单位,实现屏适配。

tip: 微信建议开发者, 开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。

1.2 样式导入@import

在CSS中,我们用<link>标签导入外联样式表,在微信小程序中,单个页面的wxss文件渲染页面并不用我们操心,不过有时候我们需要格外导入外联样式,而在WXSS中,我们使用@import实现。

语法:@import "相对路径"

1.3 全局样式

微信小程序的全局样式是写在根目录的app.wxss文件中的,全局样式就意味着里面的样式将在每一个页面均生效。

需要注意的是,当全局样式与页面的局部样式发生冲突时,但局部选择器权重大于或等于全局样式选择器权重的时候,会采取就近原则,用局部样式的定义渲染。

二,全局配置【微信小程序】WXSS和全局、页面配置(微信小程序制作)

全局配置我们在之前的文章也有做过一定的了解,根目录下的app.json文件就是专门放全局配置的地方。

app.json文件中主要有六部分。

pages,用来存放页面的路径,第一个放的就是小程序的首页。 "pages": [ "pages/index/index", "pages/list/list" ],window,页面的窗口外观,如: "window": { "navigationBarBackgroundColor": "#fff", "navigationBarTextStyle": "black", "navigationBarTitleText": "第一个小程序" },tabBar,页面的底部栏,微信小程序中这部分经常作为跳转页面的工具。 "tabBar": { "list": [ { "pagePath": "pages/index/index", "text": "首页" }, { "pagePath": "pages/list/list", "text": "目录" } ], "color": "#fff", "selectedColor": "#999", "backgroundColor": "#111" },还有一个常见的就是style,用来设置是否启用新版组件样式,如果需要,需要让style的值为v2,如果不采用,直接把style那一行删掉即可。

下面这张图方便理解

2.1 属性

属性名中以navigationBar开头的,就是我们的导航栏部分,也就是写在我们app.json的window下。

以background开头的,表示对背景区域进行设置,背景区域在微信小程序默认为不可见,只有当我们下拉显示时才会出现,一般在开发中还有伴随加载事件和图片。

上面各属性其实我们通过说明列可以明白个大概,博主就不一一解释。

需要注意的是,最后一栏的onReachBottomDistance属性,指的是页面上拉触发据页面底部距离,也就是你玩手机往下滑的时候,屏幕底部离页面底部多远触发,一般与刷新新内容配合,如内容不够需要拉取更多内容。

三,页面配置

app.json中的部分配置也可以在页面的json文件中配置,不过需要注意的是,当全局配置和页面配置冲突时,也是会遵循就近原则,冲突属性的值以页面配置为准。

而且,在页面配置中,我们不需要再次指定为window字段的属性。

直接,如下所示:

{ "navigationBarBackgroundColor": "#ffffff", "navigationBarTextStyle": "black", "navigationBarTitleText": "微信接口功能演示", "backgroundColor": "#eeeeee", "backgroundTextStyle": "light"}

今天的小程序文章到这里就结束了呀,如果觉得对您有帮助的话,可以继续关注牛牛后续的文章呀,您的支持是我创作的最大动力!

债见~~

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

上一篇:给饿了么Radio 单选框添加点击事件(vue2)(饿了么指定单)

下一篇:JavaWeb简易复习手册(javaweb知识点汇总)

  • SEO优化之外链专业博客技巧传递(外链 seo)

    SEO优化之外链专业博客技巧传递(外链 seo)

  • 品牌塑造之路共七步,而大部分企业只走了一两步(品牌塑造过程)

    品牌塑造之路共七步,而大部分企业只走了一两步(品牌塑造过程)

  • 苹果13怎么设置返回键(苹果13怎么设置指纹密码)

    苹果13怎么设置返回键(苹果13怎么设置指纹密码)

  • 做淘宝直播需要准备什么(做淘宝直播需要哪些设备)

    做淘宝直播需要准备什么(做淘宝直播需要哪些设备)

  • iphone无服务 如何解决(iphone 手机 无服务)

    iphone无服务 如何解决(iphone 手机 无服务)

  • 手机wps可以删除页眉吗(手机wps可以删除页面吗)

    手机wps可以删除页眉吗(手机wps可以删除页面吗)

  • 快手退出登录别人还能看到我吗(快手退出登录别人还能给我发私信吗)

    快手退出登录别人还能看到我吗(快手退出登录别人还能给我发私信吗)

  • 华为nova7怎么调出返回键(华为nova7怎么调时间)

    华为nova7怎么调出返回键(华为nova7怎么调时间)

  • windows属于什么软件(在软件分类来看windows属于什么)

    windows属于什么软件(在软件分类来看windows属于什么)

  • 华为nova7pro来电闪光灯怎么设置(华为nova7pro来电闪光灯怎么开)

    华为nova7pro来电闪光灯怎么设置(华为nova7pro来电闪光灯怎么开)

  • 淘宝关注的店铺突然没有了(怎么批量删除淘宝关注的店铺)

    淘宝关注的店铺突然没有了(怎么批量删除淘宝关注的店铺)

  • 苹果手机wifi斜杠变灰(苹果手机wifi斜杠打不开,蓝牙也打不开)

    苹果手机wifi斜杠变灰(苹果手机wifi斜杠打不开,蓝牙也打不开)

  • qq群荣誉怎么设置(怎么设置qq群荣誉样式)

    qq群荣誉怎么设置(怎么设置qq群荣誉样式)

  • 苹果11是双卡双待么(苹果12是不是双卡双待)

    苹果11是双卡双待么(苹果12是不是双卡双待)

  • 在多媒体系统中,内存和光盘属于什么(在多媒体系统中MPC)

    在多媒体系统中,内存和光盘属于什么(在多媒体系统中MPC)

  • 为什么qq远程控制电脑进行不了操作了(为什么qq远程控制连接不上)

    为什么qq远程控制电脑进行不了操作了(为什么qq远程控制连接不上)

  • 为什么快手头像不能换(为什么快手头像变白了)

    为什么快手头像不能换(为什么快手头像变白了)

  • 手机版本全网通是什么意思(手机全网通和标准版有什么区别)

    手机版本全网通是什么意思(手机全网通和标准版有什么区别)

  • 安卓手机有屏幕录制功能吗(安卓手机有屏幕使用时间吗)

    安卓手机有屏幕录制功能吗(安卓手机有屏幕使用时间吗)

  • 华为手机信号出现沙漏(华为手机信号出现地球)

    华为手机信号出现沙漏(华为手机信号出现地球)

  • 手机照片怎么添加文字(手机照片怎么添加自定义贴纸)

    手机照片怎么添加文字(手机照片怎么添加自定义贴纸)

  • wps怎么以文件形式分享(wps怎么以文件形式发送到qq)

    wps怎么以文件形式分享(wps怎么以文件形式发送到qq)

  • 爱奇艺删除登录记录(爱奇艺删除登录账号)

    爱奇艺删除登录记录(爱奇艺删除登录账号)

  • 快手主播怎么提成(快手主播怎么提现合适呢)

    快手主播怎么提成(快手主播怎么提现合适呢)

  • b612怎么调好看(b612怎么调整照片大小)

    b612怎么调好看(b612怎么调整照片大小)

  • 优酷VIP连续包月如何取消(优酷vip连续包月怎么取消)

    优酷VIP连续包月如何取消(优酷vip连续包月怎么取消)

  • node版本、npm版本随意切换(node-gyp版本)

    node版本、npm版本随意切换(node-gyp版本)

  • 票种核定表怎么填写
  • 企业保持存货的必要性是什么
  • 汇算清缴后发现多结转了成本
  • 工程项目估算收入要缴税吗
  • 个体工商户报税一年几次
  • 进项税的现金流量项目
  • 土地增值税计税依据
  • 营改增后房地产公司税种及税率
  • 城市维护建设税税率
  • 一般公共预算支出是什么意思
  • 建设工程服务招标管理办法
  • 以资抵债是利空还是利好
  • 增值税代开扣款怎么报税?
  • 贴息收入什么意思
  • 预付账款冲销其他应付款法人吗
  • 发票限额是多少
  • 加工成本属于什么会计科目
  • 持有至到期投资属于什么科目
  • 调离工作岗位是什么处分
  • 开具的销项发票是否都要入收入科目吗?
  • 税控盘发票抵扣
  • 人工服务费发票
  • etc在充值后未索取可以再次索取吗
  • 高铁票可以要发票吗
  • 预收的销售商品货款通过什么科目核算
  • 自然灾害造成的存货净损失计入什么科目
  • 房租税收怎么算?
  • macOS Catalina10.15.2值得升级吗 macOS Catalina10.15.2更新了什么
  • PHP:oci_set_edition()的用法_Oracle函数
  • win11如何
  • kb4499164安装失败怎么办
  • protect.exe进程
  • bhvc.exe
  • 羊肚菌的功效和价格
  • javascript局部变量
  • php中通过什么属性可以获取数组中元素的个数
  • php数组去重函数
  • y库数据库
  • vue自定义页面
  • 结构体基本知识
  • 收到退税款怎么做账
  • 营业外收入需要报增值税吗
  • 一般纳税人购进免税农产品如何抵扣进项税额
  • 开源 okr
  • 暂估应付款怎么录入
  • 公司成立开的户叫什么
  • 怎样备份mysql数据库
  • 如果返利冲抵货款怎么办
  • 无形资产的有效期限与法定保护期限相等
  • 零售金银首饰是否缴纳消费税
  • 关税计入什么科目
  • 应付职工薪酬账户贷方登记的是
  • 研发费用按50%的预算
  • 业务招待费 纳税调增
  • 加油票和过桥过路费怎么做账
  • 固定资产转为投资性房地产的账务处理公允价值
  • 带折扣的发票如何开具
  • 什么是增资扩股协议
  • mysql查询语句中的逻辑运算符
  • win101909激活
  • solaris开放指定端口
  • linux git教程
  • host文件内容
  • windows画图程序名
  • linux创建目录函数
  • win81激活
  • win10界面虚化模糊
  • python批量更改文件名称
  • jquery实战
  • python3正则
  • Unity 管理www类访问的写法
  • unity优化技巧
  • javascript数据结构与算法第三版
  • 二手车公司如何运营
  • 深圳增值税勾选平台网址
  • 税务行政执法风险防范与控制
  • 如何查询甘肃省志愿录取状态
  • 深圳房东有钱吗
  • 湖北省税务发票
  • 房地产的土地增值税怎么交
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设