位置: 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知识点汇总)

  • 未来广告营销的三大关键(未来广告的发展方向)

    未来广告营销的三大关键(未来广告的发展方向)

  • 小米mix4防水级别是多少(小米mix4防水性能)

    小米mix4防水级别是多少(小米mix4防水性能)

  • 微信留言板怎么做 微信留言板制作方法(微信留言板怎么看)

    微信留言板怎么做 微信留言板制作方法(微信留言板怎么看)

  • 小米10如何关闭广告(小米10如何关闭开发者模式)

    小米10如何关闭广告(小米10如何关闭开发者模式)

  • qq空间没有查看权限什么意思(qq空间没有查看权限会有访客记录吗)

    qq空间没有查看权限什么意思(qq空间没有查看权限会有访客记录吗)

  • 闲鱼运费按距离估算是怎么的(闲鱼运费按距离和实际不一样)

    闲鱼运费按距离估算是怎么的(闲鱼运费按距离和实际不一样)

  • 计算机中最直接最基本的操作是对什么的操作(计算机中最直接、最基本的操作就是对( )位的操作)

    计算机中最直接最基本的操作是对什么的操作(计算机中最直接、最基本的操作就是对( )位的操作)

  • 微信收款不报金额只响怎么设置(微信收款不报金额是怎么回事)

    微信收款不报金额只响怎么设置(微信收款不报金额是怎么回事)

  • excel背景图片怎么设置(excel背景图片怎么设置平铺)

    excel背景图片怎么设置(excel背景图片怎么设置平铺)

  • iPhone11有XS好用吗(苹果11好用还是xs好用)

    iPhone11有XS好用吗(苹果11好用还是xs好用)

  • 华为nova7se怎么设置锁屏?(华为nova7se怎么恢复出厂设置)

    华为nova7se怎么设置锁屏?(华为nova7se怎么恢复出厂设置)

  • oppo旗下有什么品牌(oppo旗下的)

    oppo旗下有什么品牌(oppo旗下的)

  • 手机直播发烫怎么解决(手机直播发热严重)

    手机直播发烫怎么解决(手机直播发热严重)

  • 苹果手机降低白点值要不要打开(苹果手机降低白点值调多少)

    苹果手机降低白点值要不要打开(苹果手机降低白点值调多少)

  • 1813a是什么手机(手机型号v1818a是什么手机)

    1813a是什么手机(手机型号v1818a是什么手机)

  • qq群视频最多几个人开摄像头(qq群视频最多几个人)

    qq群视频最多几个人开摄像头(qq群视频最多几个人)

  • 对讲机充电红灯是代表正在充电吗(对讲机充电红灯是充满了吗)

    对讲机充电红灯是代表正在充电吗(对讲机充电红灯是充满了吗)

  • oppoa91怎么关闭运行程序(oppoa91怎么关闭自动更新系统)

    oppoa91怎么关闭运行程序(oppoa91怎么关闭自动更新系统)

  • 拼多多查看分享3次什么意思(拼多多查看分享的商品)

    拼多多查看分享3次什么意思(拼多多查看分享的商品)

  • 网易云怎么根据QQ号找别人(网易云怎么根据分享找人)

    网易云怎么根据QQ号找别人(网易云怎么根据分享找人)

  • 暂停服务是不是销户了(暂停服务是不是停机的意思)

    暂停服务是不是销户了(暂停服务是不是停机的意思)

  • 反向选择快捷键(ps蒙版反向选择快捷键)

    反向选择快捷键(ps蒙版反向选择快捷键)

  • arserver干什么用的(arsercer)

    arserver干什么用的(arsercer)

  • ps如何做对称图形(如何用ps制作对称图)

    ps如何做对称图形(如何用ps制作对称图)

  • 绿钻能同时让几个人登(绿钻能不能一个账号登几个设备)

    绿钻能同时让几个人登(绿钻能不能一个账号登几个设备)

  • 小米9怎么设置电话铃声(小米9怎么设置无线充电)

    小米9怎么设置电话铃声(小米9怎么设置无线充电)

  • 毒app退货流程(毒退货怎么退回去)

    毒app退货流程(毒退货怎么退回去)

  • 8代cpu不支持win7吗(8代以后cpu不支持win7)

    8代cpu不支持win7吗(8代以后cpu不支持win7)

  • 怎么设置信任黄瓜视频(设置信任怎么弄)

    怎么设置信任黄瓜视频(设置信任怎么弄)

  • mb是多少流量(100mb是多少流量)

    mb是多少流量(100mb是多少流量)

  • 小米手机的屏幕分辨率怎么调(小米手机的屏幕使用时间在哪里)

    小米手机的屏幕分辨率怎么调(小米手机的屏幕使用时间在哪里)

  • wps如何给文档加密(wps如何给文档加密码保护)

    wps如何给文档加密(wps如何给文档加密码保护)

  • 在WIN8中,如何关闭防火墙?(win8.1技巧)

    在WIN8中,如何关闭防火墙?(win8.1技巧)

  • python根据键值(value)返回键(key)(python根据键输出值)

    python根据键值(value)返回键(key)(python根据键输出值)

  • 小规模季度不超30万需要交什么税
  • 拍卖行如何征税呢
  • 小规模纳税人申请一般纳税人条件
  • 期末有留底税额可需要进行账务处理
  • 会计报表编制有哪些标准
  • 物业公司停车费按什么征税
  • 未分配利润很高说明什么
  • 新成立的公司残保金如何申报
  • 房地产土地增值税的算法
  • 小规模企业所得税会计分录怎么做
  • 上月多计收入,本月如何调整?
  • 小规模纳税人可以转为一般纳税人吗?
  • 企业年会的增值税能抵扣吗?
  • 上海房产税如何退税
  • 房地产企业销售老项目税率
  • 增值税发票税率6%是什么
  • 资产负债表季度申报期末余额怎么填
  • 水利建设基金按什么基数计算
  • 企业提供技术咨询服务的企税优惠政策
  • 所得税季度申报营业收入填什么
  • 现金存入银行是付款还是转账
  • 招待客户产生的住宿费
  • 退税收入怎么做分录
  • 新成立的有限公司
  • 农村合作社补贴政策
  • 主营业务成本计入成本类账户吗
  • 上海中秋活动2021
  • 文件pages
  • 外币债券汇兑损益怎么算
  • win7系统怎么设置最佳性能
  • php单例模式demo
  • thinkphp分页传递参数
  • 增值税专用发票的税率是多少啊
  • 收到招标费用会计分录
  • 应付职工薪酬的借方和贷方
  • 小茴香的栽培技术
  • 代垫运费的增值税可以抵扣吗
  • 全局平均池化(GAP)层
  • 跟日期有关的名字
  • 纳税人在工作
  • 企业转让无形资产取得的收益应计入营业外收入
  • db management
  • 钢贸企业税收怎么算
  • 新成立的公司企业所得税
  • 合并资产负债表图片
  • 固定资产盘点怎么做
  • 低值易耗品摊销方法有几种
  • 充电桩的安装费是多少
  • 给客户赞助怎么写合适
  • 代缴车险
  • 公司老板个人卡收支公司业务属于什么行为
  • 有留抵税额可以红冲吗
  • 场地租赁费属于劳务还是服务
  • 向客户收取的承兑贴息款如何开发票
  • 所得税会计凭证包括哪些
  • 金蝶制造费用明细如何查询
  • 在固定资产下的折旧年限
  • 赠送购物券的会计处理
  • 跨年材料票可以入账吗
  • 商业企业费用的计算方法
  • mysql5.6源码安装
  • 在一台服务器上安装软件
  • mysql应用案例
  • Windows Server 2008下的网络排错
  • windowsxp开机启动项在哪里设置
  • xp系统怎么删除电脑里所有东西
  • win10 20h2 v2
  • centos7网络配置文件在哪
  • win7系统浏览器版本老怎么升级
  • windows7cmd命令不能执行
  • 谈一谈js消息机制的理解
  • javascript如何学
  • js查看浏览器信息
  • android的ui组件有哪些
  • unity3d武器模型
  • js控制并发数
  • perl vs python
  • python获取xhr
  • 吉林省电子税务局操作手册
  • 酒店行业区分小巨头企业
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设