小程序app.json配置
看一下，页面里面多个地方的字体设置是一样的。那么就可以提取出来，放在全局的应用样式表里面，也就是app.wxss里面。
总结知识点1、可以把共同的样式提取到全局样式里，也就是app.wxss里面定义就可以了。然后那些每个网页不同的样式，再在各个网页里分别设置。比如把字体都是微软雅黑，很多共用的，写在app.wxss里面，但是个体特殊的，比如字体大小，写在各个不同网页的样式表里面。
接下来给“开启小程序之旅”设置按钮效果，给它的view一个class=“moto-container”，对应wxss里设置边框，border：1px solid #405f80 width：200rpx height：80rpx。调整文本位置，圆角矩形border-radius：5px。文本居中：text-align：center（垂直居中的话，让，让文本的line-height为容器的高度，这里是80rpx） 然后设置边线的颜色#405f80。 再把三个元素拉开，设置相应的margin-top就可以了。
这里注意一下，text是行内元素，行内元素与块级元素的区别之一就是 对于行内元素来说margin只有margin-left和margin-right有效，padding只有padding-left和padding-right有效。设置了display:inline-block; 行内元素就可以设置margin，padding了
所以这个margin-top 是在text外包围的view标签上设置的。
接着把容器的背景色设置为#b3d4db。
解惑：为什么文本的行高等于容器高度，就可以垂直居中？
“行高”顾名思意指一行文字的高度。具体来说是指两行文字间基线之间的距离。基线实在英文字母中用到的一个概念，我们刚学英语的时使用的那个英语本子每行有四条线，其中底部第二条线就是基线，是a,c,z,x等字母的底边线。下图的红色线即为基线。
字母或者汉字，是写在中线和基线之间的，也就是一行的中部位置。所谓行高，就是两行的基线的距离。其实等于一行所占的高度。不仅包括四线三格的高度，还有就是两行之间的间距。也就是说，这一行所占的高度等于容器的高度的时候，一行正好填充满容器。
用p元素输出一行文本后：
①line-height(行高)=font-size(字符大小)+word-spasing(上下行间距)
例如：行高设置为100px时，若字符大小为30px，那上下行间距就分别为35px；
重点是：字符上行间距和下行间距的大小是相同的。
②如果你知道height是块级元素的属性，没行内元素什么事，那你对你的问题就不难理解：
试想，一个100px高的div，它的上下padding都设置为35px；中间的content就是30px，此时，它的height(高)=content(内容大小)+padding(上下填充值)。
③结合以①②中的两个等式：当设置line-height等于height时，字符大小就是内容大小，而上下相同的行间距就相当于上下相同的padding。故，div中的内容居中=p元素的字符(撑满容器)居中。
“如果此时我把行高调为60px，那么文字中心点距上或者距下各为30px，那不仍然是垂直居中吗？”
你想想，你说的“垂直居中”是相对什么居中？相对于上一行的文本和下一行的文本垂直居中？确实是这样，但这不是相对包围他们的容器。
知识点2、关于垂直水平居中。比如按钮中：外面的view：设置按钮（小程序通过view设置）高为80rpx，那么它包含的text标签就要设置为行高line-height为80rpx，文字就垂直居中了。外面的view设置text-align设置为center，里面text文本就水平居中了。
把容器的背景色设置为#b3d4db之后，并没有全屏显示。
因为container没有设置高宽，所以它只能适应内部元素来显示宽和高。因此不是全屏显示的蓝色。一种方案，给它设置高度，对应iphone6应该是1334rpx。就可以了。但是有个问题，容器高度固定，如果容器的内容很多呢？超出这个高度呢？尤其是动态的内容，有滚动条，不断往下滑。会导致滑到下面之后，超过设定的背景色。设置100%呢？也是不可以的，还是根据内部高度自适应，抛弃。
知识点3、关于背景色
如果把container直接设置为蓝色，它会根据内容的高度调整背景高度。如果把container设置为高100%，依然是根据包裹的内容高度调整。如果是把container高度设置为1334rpx，可以完美的适合iphone6的全屏幕高，但是这样高度就定死了，如果内容可以滚动的， 那么就出问题了，滚出了1334px，剩下的背景就是空白的了。
如果在调试窗口，查看查看wxml的时候时，可以看到，container实际上被page标签包裹。所以在window.wxss中把page背景设置为#b3d4db,height:100%就不会有问题了。
接着又会出现另一个问题，头部会有一条黑色，是用来设置导航栏的。
如图在window第一个属性可以设置导航栏的背景颜色。所以在app.json中设置window相关参数就可以了。也就是吧navigationBarBackgroundColor 设置为#b3d4db 。
注意区别啊，pages的背景，可不是在app.json里面设置的。在app.wxss里面设置就好了。
关键点4、text的两个知识点：一、选择复制：就是前面说的，只有text标签里面的文字，常能长按复制。二、嵌套text：如果<text>第一句，第二句<text>里面第一句和第二句样式不一样，我们可以这么干：<text> <text style = "color:red">一句话的前半句<text >一句话的后半句<text> 。这样情况下，全部内容为外部的text样式，但是里面的会有自己专属的样式。当然也可以让两句话分别在一个text标签中，也是没有问题的。三、转移字符：另外如果text里面有\n 不是直接显示，而是换行哦。
网友评论