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

  • 消费税是指什么税
  • 计提税金是什么会计科目
  • 个人所得税的纳税方式有哪几种
  • 采用现金支付
  • 每个月发工资扣个税扣的肉疼
  • 小规模纳税人不能抵扣进项税额
  • 油费补助记什么科目
  • 付款给对方未开具发票
  • 分公司企业所得税汇总缴纳还是单独缴纳
  • 工会经费的工资薪金总额包括保险吗
  • 现金比率的计算公式是指
  • 企业计提预提费用的会计分录如何编制?
  • 企业收到的政府补贴,怎么入账
  • 购货方非增值税一般纳税人
  • 运费发票备注栏新规定
  • 如何区分纳税人和小规模纳税人
  • 为什么纳税人不是负税人
  • 个税退税退给个人还是单位
  • 增值税的计税公式为
  • 软件进项税额分摊方式
  • 专票开票信息不填省份可以吗
  • 高新创投企业所得税税率
  • 纳税所得额怎么算个税
  • 先开发票后发货怎么做账?
  • wd discovery怎么安装
  • 商业承兑汇票承兑人可以是银行吗
  • PHP:mb_substr_count()的用法_mbstring函数
  • mid文件和midi文件
  • 印花税计提缴纳时间
  • 电风扇需要用完电再充吗
  • 车辆开具发票后会计分录?
  • 怎么核算购进商品
  • 跨年的材料票可以抵扣吗
  • 初学者安装visual studio
  • 什么叫web渗透测试
  • 终止cat命令
  • 代销手续费怎么开票
  • nginx运行python
  • 公司股权转移怎么办理
  • 城建税退回怎么做分录
  • 织梦发布文章栏目怎么不显示
  • 补发去年工资会被扣税吗
  • 总分类账户余额表怎么做账
  • 加速折旧法是指在固定资产使用的早期少提折旧
  • 金融资产经营资产
  • 无形资产的税收优惠政策
  • 什么是企业所得税收入
  • 房产税的纳税人包括
  • 用友t6操作流程
  • 有哪些企业项目
  • 价格调节基金费率
  • 管理费用的核算要求
  • 出口退税登记的内容
  • 物流运输车类型
  • 销售方开具的红字专票购买方在税控盘要怎么操作
  • 发票红冲重新开具怎么做分录
  • 社保滞纳金怎么记账
  • 汇算清缴产生的企业所得税如何做账
  • 根据企业
  • sql server错误和使用情况报告
  • centos下安装jdk
  • freebsd怎么用
  • xp系统电脑文件损坏怎样修复
  • centos7yum
  • linux的命令行怎么打开
  • win8.1怎么样
  • scrollview怎么用
  • 批处理文件是脚本吗
  • 批处理遍历文件输出文件路径
  • Android 获取网络时间
  • Unity3D游戏开发标准教程
  • js自动切换图片效果
  • 预拍摄功能相机
  • jQuery easyUI datagrid 增加求和统计行的实现代码
  • 技术咨询服务费税率
  • 税控盘托管给百旺的弊端
  • 放管服改革存在的不足
  • 进项发票的税收分类编码怎么查询
  • 税务宪法宣传简报
  • 河南税筹公司
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设