微信小程序开发样式配置:wxss深入解析

更新:11-21 民间故事 我要投稿 纠错 投诉

提供全局样式和局部样式。 app.json 和page.json 的概念与之前相同。你可以将app.wxss编写为全局样式,该样式将应用于当前小程序的所有页面。本地页面样式page.wxss只会在当前页面生效。

另外,WXSS只支持部分CSS选择器

更详细的文档请参考WXSS。

https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxss.html

官方文档包含了样式导入、内联样式和选择器, 微信开发者需要看看, ****在这里分享自己开发中的觉得蛮实用的点。

自适应尺寸单位 rpx

rpx(响应像素): 可根据屏幕宽度进行适配。指定的屏幕宽度为750rpx。例如,在iPhone6上,屏幕宽度为375px,共有750个物理像素,则750rpx=375px=750个物理像素,1rpx=0.5px=1个物理像素。

rpx是微信定制的一个单位,在实际应用中非常好用,因为你可以忽略手机型号的不同。有时设置宽度为100%时,可以直接设置750rpx。

内联样式的动态转换

静态样式写好后,有时有些场景想根据不同的场景设置不同的样式。这样就可以在wxml中定义变量,在js中制定不同的样式。这在工作场景中非常实用。

伪选择器

当您刚接触样式时,很容易忽略样式的伪元素,但它们使用起来非常有趣。例如,之后、之前

以下是两个示例: 1. 将箭头放在视图后面

图片使用:after

.arrow:after {这里有个垂直居中的小技巧,就是top: 50%然后用margin-top减去一半高度,这里是-3px;

2. 在某些文本前面放置一条竖线

图片使用:之前

好了,关于微信小程序开发样式配置:wxss深入解析和的问题到这里结束啦,希望可以解决您的问题哈!

用户评论

我怕疼别碰我伤口

话说小程序里调样式还是得看 WXS 吧,方便很多。

    有13位网友表示赞同!

罪歌

wxss 的命名规范挺重要的,以后记得要跟着教程学一下。

    有7位网友表示赞同!

↘▂_倥絔

想问下WXSS 和 CSS 有什么区别啊?

    有8位网友表示赞同!

别悲哀

学习 WXSS 感觉比 HTML 直接写代码简单多了。

    有17位网友表示赞同!

眷恋

小程序开发越来越专业了,现在样式文件这么精细。

    有6位网友表示赞同!

冷青裳

看到很多开发者都用 WXSS 开发小程序样式,我也可以试试看喽。

    有9位网友表示赞同!

雪花ミ飞舞

wxss 的学习曲线挺缓的,适合新手入门小程序开发。

    有6位网友表示赞同!

哥帅但不是蟋蟀

微信公众号里有不少写 WXSS 的教程,可以跟着学学。

    有19位网友表示赞同!

oО清风挽发oО

微信小程序开发越来越流行了,掌握 WXSS 成为了必备技能。

    有18位网友表示赞同!

浮世繁华

小程序样式确实可以用 WXSS 做的更精美。

    有17位网友表示赞同!

巷口酒肆

wxss 的使用场景很广啊,几乎每一个小程序都用它来实现自定义风格。

    有10位网友表示赞同!

风中摇曳着长发

感觉微信公众号开发和小程序开发越来越像了,WXSS 是连接两者的桥梁?

    有12位网友表示赞同!

红玫瑰。

想开发一个简单的微信小程序,请问 WXSS 难学吗?

    有17位网友表示赞同!

清羽墨安

我已经开始尝试使用 WXSS 为我的小程序添加一些美观元素了。

    有16位网友表示赞同!

古巷青灯

学习 WXSS 能够更好地理解小程序的样式规则和风格设计。

    有16位网友表示赞同!

何年何念

感觉 wxss 的语法更简洁利落,上手速度快。

    有9位网友表示赞同!

怅惘

有了 WXSS,可以轻松设计出符合用户审美的精美小程序页面。

    有12位网友表示赞同!

夏以乔木

微信小程序开发的潜力很大,掌握 WXSS 就能打开更多可能性。

    有20位网友表示赞同!

【微信小程序开发样式配置:wxss深入解析】相关文章:

1.蛤蟆讨媳妇【哈尼族民间故事】

2.米颠拜石

3.王羲之临池学书

4.清代敢于创新的“浓墨宰相”——刘墉

5.“巧取豪夺”的由来--米芾逸事

6.荒唐洁癖 惜砚如身(米芾逸事)

7.拜石为兄--米芾逸事

8.郑板桥轶事十则

9.王献之被公主抢亲后的悲惨人生

10.史上真实张三丰:在棺材中竟神奇复活

上一篇:Python版 LeetCode题解与答案汇总(持续更新中) 下一篇:探索初体验:我的首度零极限心灵之旅