E企盈营销工具技术服务商 热线:4006-838-530

微信小程序(WXSS样式文件)

E企盈直播平台营销卖货系统

WXSS(WeiXin Style Sheets)是一套用于小程序的样式语言,用于描述WXML的组件样式,也就是视觉上的效果。WXSS分类小程序中的样式文件一共分为两个级别/两类:提供了全局的样式和局部样式。和前边 app.json, page.json 的概念相同,可以写一个 app.wxss 作为全局样式,会作用于当前小程序的所有页面,局部页面样式 page.wxss 仅对当前页面生效。小程序全局样式app.wxss,也叫页面公共样式,会被注入到小程序的每个页面。页面样式page.wxss,即单个页面样式注意:WXSS 仅支持部分 CSS 选择器WXSS简介WXSS 决定 WXML 组件的显示样式。为了适应广大的前端开发者,WXSS 具有 CSS 大部分特性。同时为了更适合开发微信小程序,WXSS 对 CSS 进行了扩充以及修改。与 CSS 相比,WXSS 扩展的特性有:尺寸单位样式导入WXSS尺寸单位在WXSS中、引入了rpx(responsive pixel响应像素)尺寸单位。、目的:适配不同了宽度的屏幕、开发起来更简单。在不同宽度的屏幕下,如果使用px为尺寸单位,有可能造成留白过多,如图:修改为rpx尺寸单位,则如下所示:原理:小程序编译后,rpx会做一次px换算。换算是以375个物理像素为基准,也就是在一个宽度为375物理像素的屏幕下,1rpx = 1px。具体适配与像素问题见下节《物理像素与逻辑像素》WXSS样式导入微信小程序可以使用@import语句导入外联样式表@import后跟需要导入的外联样式表的相对路径,用;表示结束①定义公共样式②导入③结果WXSS内联样式小程序框架组件支持使用 style属性来控制组件的样式style:静态的样式统一写到 class 中。style 接收动态的样式,在运行时会进行解析,要尽量避免将静态的样式写进 style 中,以免影响渲染速度。渲染结果:view style=”color:pink”/view —内联样式绑定WXSS选择器WXSS目前支持的选择器如下所示开发工具设置(1)上传代码时自动补全小程序要求兼容到iOS8以下版本,需要开启样式自动补全,在“设置”—“项目设置”—勾选“上传代码时样式自动补全”。(2)不校验合法域名设置完毕后,在微信开发者工具中,就可以随意访问了。此时便可以使用 http://localhost:12345/这种既不带 https的安全链接地址。总结定义在 app.wxss 中的样式为全局样式,作用于每一个页面。在 page 的 wxss 文件中定义的样式为局部样式,只作用在对应的页面,并会覆盖 app.wxss 中相同的选择器。

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信小程序(WXSS样式文件)
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏