简年14: 来写点微信小程序吧:D) ---- 分析小程序WXSS

开篇语

开篇语已经在热身阶段说过了,所以就不重复了。有兴趣的读者移步
来写点微信小程序吧:D) ~~~(热身阶段)
以及前面借鉴小程序开发官方文档的简易教程写的总纲
来写点微信小程序吧:D) ~~~狂奔阶段
还有分析小程序的目录结构与配置的内容
来写点微信小程序吧:D) ~ ~ ~ 分析小程序目录结构与配置
以及分析小程序的逻辑层的内容:
来写点微信小程序吧:D) ---- 分析小程序逻辑层内容
来写点微信小程序吧:D) ---- 分析小程序视图层内容
来写点微信小程序吧:D) ---- 分析小程序视图层内容


好吧,我承认这是上一节视图层的剩余内容,昨晚没办法了,实在很困,所以直接去睡了!今晚补上。

上一张学长的图片镇楼,下面直接上开发过程笔记。

张小龙学长

正文

一、WXSS(WeiXin Style Sheets)是一套样式语言,用于描述 WXML 的组件样式。

WXSS 用来决定 WXML 的组件应该怎么显示。(意思很简单,就是告诉浏览器,这个地方的这个东西长啥样,比如字体多大?背景颜色是啥?是纯粹的样式文件。就好比是装修的师傅,不管你的房子结构布局如何,反正给你粉刷一遍,然后让你的房子大变样,但是没有改变任何你的原有格局)

为了适应广大的前端开发者, WXSS 具有 CSS 大部分特性。 同时为了更适合开发微信小程序,对 CSS 进行了扩充以及修改。(我觉得WXSS就是CSS的儿子)

与 CSS 相比扩展的特性有:

尺寸单位     样式导入

1. 尺寸单位

rpx(responsive pixel): 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素。

就是说,不管你的屏幕多大,都是750个rpx,这是一种绝对的大小,至于具体的每个rpx有多大,那就要根据你的手机具体尺寸来算,这样一个好处就是,我可以直接的指定一个部件出现在哪个位置,而不用管你的手机是什么样子,确保了最好的视觉体验,至于1rpx=?px 那就要按照你的手机实际尺寸来算了。汇算标准如下:

以iPhone为标准的的尺寸单位

2. 样式导入

使用@import语句可以导入外联样式表,@import后跟需要导入的外联样式表的相对路径,用;表示语句结束。

示例代码:

/** common.wxss **/
.small-p {
  padding:5px;
}
/** app.wxss **/
@import "common.wxss";
.middle-p {
  padding:15px;
}

在wxss文件中定义了样式,那么如何使得各自有各自的用处呢?导入之后又何处安放每一个样式呢?下面就是选择器登场了!

选择器
举个栗子,这是在wxss里面定义
这就是在wxml中用到了,然后的话,用的是class的选择器
话不多说,看效果图

结束语

小程序算是假期的一个调剂吧,不然可能就真的天天看小说,然后逛逛B站了。刚刚跟某个XX说:“如果没有你,我的效率会高很多;但是,如果没有你,动力又会下降很多。恩。综合来说,应该还是有比较好,所以。。。。阿西吧,还是要蟹蟹Somebody 的,至于是谁,默念就好。。”。这两天看计算机三级,要哭了。为什么我看的书跟考试的题目不一样?这他么还是我那个过了四级的同学给我的书。。算了,开学再去想这些事情,明天开始解读Js代码,以及写几个Swift的程序,然后还要入一下机器学习的坑,还有Python打算做个小项目,事情贼鸡儿多,但是怎么就这么充实呢?初八还有个同学聚会。。

洪荒之力已经按耐不住了!

另外安利几位大神的作品(直接给大神简书的链接):

微信小程序—豆瓣电影APP
微信小程序之知乎日报
微信小程序——一个简单的音乐播放器
微信小程序-从零开始制作一个跑步微信小程序

个人宣言

知识传递力量,技术无国界,文化改变生活!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,214评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,307评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,543评论 0 341
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,221评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,224评论 5 371
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,007评论 1 284
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,313评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,956评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,441评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,925评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,018评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,685评论 4 322
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,234评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,240评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,464评论 1 261
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,467评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,762评论 2 345

推荐阅读更多精彩内容