微信小程序入门教程:小白必看系列第三篇

更新:10-29 神话故事 我要投稿 纠错 投诉

大家好,今天小编来为大家解答以下的问题,关于微信小程序入门教程:小白必看系列第三篇,这个很多人还不知道,现在让我们一起来看看吧!

问题来了?既然如此,我们为什么要写这篇文章呢?

只有一个答案,这会让你更快地“容易理解”。改变你的想法。下面的文章会对官方文档进行一段类似的解释。

为了适应广大前端开发者,WXSS有CSS

大部分特点。同时,为了更适合开发微信小程序,WXSS对CSS进行了扩展和修改。与CSS相比,WXSS扩展的功能包括:尺寸单位和样式导入。

补充:下面我们会讲扩展功能。既然文档说WXSS具有CSS的大部分功能,那么有什么区别呢?

1.没有身体

是的,小程序的每个页面都没有body属性,但是可以通过wxss中设置页面来影响整个页面的样式,比如下面的代码

页{

背景:#F8F8F8

}等等。当然,你也可以在页面的xxx.json中设置backgroundColor属性来影响页面下拉时出现的空白区域的颜色。一般来说,当你的页面有下拉刷新和上拉加载功能时,往往需要设置backgroundColor属性。

2、无父子关系

在使用css的时候,我们经常会保持样式的层次关系和html联系人的层次关系一致。例如,你的html代码有以下代码

我们习惯这样写css

.box .content strong {}这样写的好处是,strong风格不会影响其他地方的strong。

但是小程序不支持这种父子层级关系。只能一一设置,见下面小程序代码

对于上面的视图,对应的wxss应该怎么写呢?看下面的代码

//正确的。盒子{}

.box-txt {}

//错误的

.box .box-txt {}你明白吗?

3. 尺寸变化

在CSS中,我们有很多测量尺寸的单位,比如px、em等,当然这些在小程序中仍然可以使用,只不过小程序给自己添加了另一个单位,那就是

rpx

小程序作为移动应用,需要适配不同规格的设备,兼容越来越大的手机(

对了,我还是喜欢iPhone 5的尺寸,一只手就能控制,躺在床上看电影也不会撞到头。

)。

所以rpx最重要的特点就是可以根据屏幕宽度进行自适应。它指定屏幕宽度为750rpx。例如,在iPhone6上,屏幕宽度为375px,共有750个物理像素,则750rpx=375px=750个物理像素,1rpx=0.5px=1个物理像素。

你明白吗?官方提供了一个表格,非常容易理解,如下图所示。

这个转换比较简单,这里就不解释了。如果实在不明白,可以留言。

4. 样式导入

小程序的wxss支持样式的导入。这个功能还是蛮有用的,尤其是当我们使用其他一些库的时候,可以直接导入第三方的wxss文件,非常令人愉悦。

使用方法也很简单,看下面的代码。

@import "common.wxss";

.middle-p {

内边距:15px;

}5.内联样式

和css一样,wxss支持两种样式,class和style,但是使用上还是有区别的。一句话简介:“如果你的style中有动态内容,就写到style里,剩下的放到class文件里。”

例如,这段代码

style中写入过多的样式带来的问题是,小程序渲染视图时,还必须解析对应的样式布局等,这势必会对性能造成一些影响。

6. 选择器

另外,wxss基本上支持css中的所有选择器,比如类、ID、组件等,看看下面的官方图

而且,你可以愉快地使用高级CSS属性,例如wxss中的last-child。

7. 全局样式和局部样式

原则上,小程序中的一个wxss负责一个wxml视图文件,但应用程序总有一些共同的属性,所以小程序为应用程序本身提供了一个wxss,即app.wxss。当然,你不需要手动引入,它会自动加载到每个视图中,所以记住这一点。

一点总结

关于wxss对css支持什么,微信官方还没有提供相应的文档。更多细节还得慢慢挖掘。毕竟腾讯不是百度,会把文档写得这么好。

相关阅读:

小贝微信小程序小白系列教程第二部分-入门

小贝微信小程序小白系列教程第一部分——Hello World

本文作者:米色个人站长@米色兄弟

原文地址:小北微信小程序- 小白教程系列- 风格(WXSS) - 新手教程- 小程序社区- 微信小程序- 微信小程序开发社区- 小程序开发论坛- 微信小程序联盟

用户评论

┲﹊怅惘。

终于等到第三篇了!太期待我的项目能顺利上手。

    有5位网友表示赞同!

灬一抹丶苍白

微信小程序越来越香了,想学习做点东西试试

    有18位网友表示赞同!

*巴黎铁塔

之前看过前两篇的视频,感觉讲解蛮清晰的!

    有19位网友表示赞同!

墨城烟柳

希望这篇文章讲讲开发一些实用功能,比如数据存储和用户管理什么的

    有7位网友表示赞同!

米兰

我还想学习怎么在小程序里做动画效果呢!

    有8位网友表示赞同!

不识爱人心

小北老师真牛,一直分享着实用的资料,感谢!

    有5位网友表示赞同!

雁過藍天

期待了解更多关于微信小程序的开发技巧!

    有6位网友表示赞同!

余温散尽ぺ

小白系列教程是不是后面还有很多篇?

    有20位网友表示赞同!

浮殇年华

学习新东西感觉很兴奋,就是担心自己学不会

    有6位网友表示赞同!

念旧情i

我已经开始计划我的第一个小程序项目了!

    有12位网友表示赞同!

那伤。眞美

希望这篇文章能帮我解决之前遇到的问题

    有14位网友表示赞同!

执笔画眉

微信小程序真的很方便啊,可以做很多事情

    有5位网友表示赞同!

煮酒

有没有分享一些好的小程序案例给大家参考?

    有16位网友表示赞同!

矜暮

想要自己开发一款有趣的微信小程序,感觉很新奇!

    有10位网友表示赞同!

青山暮雪

学习的进度要保持一致性,不能断开才能学好

    有15位网友表示赞同!

你瞒我瞒

相信自己能够掌握小北老师的教程

    有10位网友表示赞同!

我就是这样一个人

希望能从这篇文章中获得提升!

    有9位网友表示赞同!

玩味

微信小程序发展的未来可期!

    有14位网友表示赞同!

残花为谁悲丶

加油学习,总有一天我会成为一名优秀的开发者!

    有15位网友表示赞同!

有恃无恐

感谢知识的分享,让我能不断学习和进步!

    有6位网友表示赞同!

【微信小程序入门教程:小白必看系列第三篇】相关文章:

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

2.米颠拜石

3.王羲之临池学书

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

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

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

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

8.郑板桥轶事十则

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

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

上一篇:选购顶级手表指南:揭秘黑冰糖高仿手表的购买途径—精选6大购物平台 下一篇:长投学堂:探索个人成长,成就卓越人生