小程序开发（二）-页面样式

项目根目录下创建 app.wxss 文件，文件定义的样式规则适用于所有页面。采用css定义样式。

网站建设哪家好，找创新互联！专注于网页设计、网站建设、微信开发、小程序开发、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了定海免费建站欢迎大家使用！

小程序官方推荐使用flex布局。pages/home目录下新建home.wxss文件，文件的样式只适用于当前页面。

rpx是小程序为适应不同宽度的手机而发明的长度单位，所有手机宽度都为750rpx。

weui是腾讯官方维护的UI框架，我们可以直接拿来用。

将weui库中dist目录下的app.wxss拷贝到我们项目中的 app.wxss 中，在wxml文件中直接使用定义好的规则, 如 weui-btn 。

图片使用 image 标签。默认宽度为屏幕宽度。

图片轮播使用 swiper 标签。

二、支付宝小程序前端样式的设计.acss样式详解

在视频中已经说过了，小程序的设计思想和原生app的设计思想颇为相似，基本的应用单元为页面。当然对于一个页面来说每一个元素的放置位置在哪儿以及显示成什么样子这个是由 样式来决定的 。我们知道在web开发中样式是在css文件中规定的，叫做层叠样式表 (Cascading Style Sheets)。其实在APP中样式的约束也是使用css，在支付宝小程序中也是使用css不过文件的后缀是.acss而且对css3进行了扩充而已。

那么在支付宝小程序中的.acss和微信小程序中的.wxcss没有什么两样。 上边已经说了.acss其实包含了css3那么它还有一些新的特性是css3中不具备的，让我们一一看看

第一次看到这个东西也能猜到他是干什么用的。在css中我们知道规定大小一般使用像素(px)这个单位。比如显示生活中我们说房子128㎡那这儿的单位是平方米，在开发中需要更加精准的大小就是px像素。像素就非常精细了因为在我们显示屏幕中像素是最小的显示单元。这个道理如果不懂的话就找个LED屏幕仔细看，LED屏幕上一个一个的发光二极管可以想象为像素。

我们知道手机屏幕有大有小，就拿iPhone来说，iPhone 6 plus比iPhone 5要大。那么就说明plus的像素比5要多。对比：

加入有一个160px宽度的红色矩形在这两种手机中的位置如下：

rpx（responsive pixel）可以根据屏幕宽度进行自适应。如何自适应呢？看下边的分析：

看下图：

在模块化开发中我们有时候不得不在页面中使用其他的第三方库的样式，而第三方库的样式是保存在第三方包中的，我们不可能全部复制到我们的.acss文件中，那最好的办法就是导入了。在样式表中导入其他外联样式表。

当然仍旧支持内联样式和class属性制定样式类，如

选择器和css3的保持一致。一般有class=”test”类选择器和id=”test”的id选择器。当然在支付宝小程序的样式中特殊的地方就是：

※ .a- 或者 .am-为前缀的选择器已经被系统占用所以不要使用；

※ 不能使用属性选择器，例如,以下写法不被支持：

我之前说过小程序开发的应用单元为页面。其实我们在.axml中写的页面并不包含页面容器，就相当于我们做一个页面但是body标签不用写那如果我们要改变整个页面的背景怎么办呢?其实有一个固定的选择器。例如：

可以通过 page 元素选择器来设置页面容器的样式，比如页面背景色:

在你想改变页面容器的页面中定义该样式也可以，全局定义也可以，例如我想将test这个页面的页面容器背景设置为蓝色，就可以再pages目录下的test目录下找到test.acss在其中定义page的样式

下节是视图层讲解，如果有任何问题可以再下方给我留言或者发邮件到 weiyongqiang@weiyongqiang.com 我在收到邮件后会回复。

关于微信小程序css样式中calc属性不生效问题的解决方案

问题：在微信小程序中使用height:calc(xx - xx)设置元素高度无效

排查原因:calc属性设置height或width时，要求父容器有明确的对应属性设置，当父容器没有设置时，calc计算无法完成。因为我想设置高度的元素没有父容器，所以calc失效。

解决办法：1.给该元素添加设置明确高度的父容器。2.直接通过page{height:100%;}解决。

小程序开发-基础-html+css

rem由来 ：font size of the root element，那么rem是个单位，单位大小由它第一代老祖宗的 font-size 的大小决定。现在前端码农们为了能在各个屏幕上看到一个健康的网页在默默的牺牲着自己的健康，因为不仅要知道rem是个单位，更重要的是要知道怎么能在不同分辨率下呈现的页面都很NB。

事故造成原因：

1.px单位在PC上很流行，在手机屏幕上一看，MLGB的，同样的12px却小的跟蚂蚁似的。

2.好不容易在iPhone4上调的正常了，换个菊花牌手机，MBD不堪入目了。

3.知道了rem的用法，但是html的font-size到底是多少才合适啊啊啊，妈蛋~。

好了，那么现在来解决这些问题。

在解决之前，麻烦各位大婶要了解一些你可能不想了解的东东（警告：不了解这些就不能知道真相哟~）：

1. 物理像素(physical pixel)

我们看到的每个屏幕都是由一颗颗我们肉眼难以看到的小颗粒（物理像素）组成的。

2.逻辑像素

是计算机坐标系统中的一个点，这个点代表一个可以由程序使用的虚拟像素(比如说CSS像素)。

3.设备的像素比(device pixel ratio)简称DPR

它的数值体现了物理像素和逻辑像素之间的关系，用公式可以计算出该设备的DPR的大小：

DPR= 物理像素 / 逻辑像素

那么了解了上面这些概念，就可以知道，为什么css在pc上写着font-size=12px;但是换到手机上却变小了？因为DPR啊啊啊，大哥~。

没错，我们在电脑屏幕上的DPR是1，但是手机却不同，可能是它可能是2，也可能是3。获取设备DPR的方法还是有的：

1.在JavaScript中，通过window.devicePixelRatio来获取

2.在css中，可以通过-webkit-device-pixel-ratio，-webkit-min-device-pixel-ratio和 -webkit-max-device-pixel-ratio进行媒体查询，对不同DPR的设备，做一些样式适配(这里只针对webkit内核的浏览器和webview)。

本人也在网上看了不少动态设置rem的文章，下面把几个常用的列举出来：

一，用媒体查询来设置html的font-size：

@mediascreen and (min-width:320px) {html{font-size:14px;}} @mediascreen and (min-width:360px) {html{font-size:16px;}} @mediascreen and (min-width:400px) {html{font-size:18px;}} @mediascreen and (min-width:440px) {html{font-size:20px;}} @mediascreen and (min-width:480px) {html{font-size:22px;}} @mediascreen and (min-width:640px) {html{font-size:28px;}}

二、利用js来动态设置

!(function(doc, win){vardocEle = doc.documentElement,        evt ="onorientationchange"inwindow?"orientationchange":"resize",        fn =function(){varwidth = docEle.clientWidth;            width (docEle.style.fontSize =20* (width /320) +"px");        };        win.addEventListener(evt, fn,false);    doc.addEventListener("DOMContentLoaded", fn,false); }(document,window));

我要说的是最后一种，也是我认为目前比较好的实现方法：

利用js计算当前设备的DPR，动态设置在html标签上，并动态设置html的font-size，利用css的选择器根据DPR来设置不同DPR下的字体大小（这个方法很不错哦~）

!function(win, lib){vartimer,        doc    = win.document,        docElem = doc.documentElement,        vpMeta  = doc.querySelector('meta[name="viewport"]'),        flexMeta = doc.querySelector('meta[name="flexible"]'),        dpr  =0,        scale =0,        flexible = lib.flexible || (lib.flexible = {});// 设置了 viewport metaif(vpMeta) {console.warn("将根据已有的meta标签来设置缩放比例");varinitial = vpMeta.getAttribute("content").match(/initial\-scale=([\d\.]+)/);if(initial) {            scale =parseFloat(initial[1]);// 已设置的 initialScaledpr =parseInt(1/ scale);// 设备像素比 devicePixelRatio}    }// 设置了 flexible Metaelseif(flexMeta) {varflexMetaContent = flexMeta.getAttribute("content");if(flexMetaContent) {varinitial = flexMetaContent.match(/initial\-dpr=([\d\.]+)/),                maximum = flexMetaContent.match(/maximum\-dpr=([\d\.]+)/);if(initial) {                dpr =parseFloat(initial[1]);                scale =parseFloat((1/ dpr).toFixed(2));            }if(maximum) {                dpr =parseFloat(maximum[1]);                scale =parseFloat((1/ dpr).toFixed(2));            }        }    }// viewport 或 flexible// meta 均未设置if(!dpr !scale) {// QST// 这里的 第一句有什么用 ?// 和 Android 有毛关系 ?varu = (win.navigator.appVersion.match(/android/gi), win.navigator.appVersion.match(/iphone/gi)),            _dpr = win.devicePixelRatio;// 所以这里似乎是将所有 Android 设备都设置为 1 了dpr = u ? ( (_dpr =3 (!dpr || dpr =3))                        ?3: (_dpr =2 (!dpr || dpr =2))                            ?2:1)                :1;        scale =1/ dpr;    }    docElem.setAttribute("data-dpr", dpr);// 插入 viewport metaif(!vpMeta) {        vpMeta = doc.createElement("meta");                vpMeta.setAttribute("name","viewport");        vpMeta.setAttribute("content","initial-scale="+ scale +", maximum-scale="+ scale +", minimum-scale="+ scale +", user-scalable=no");if(docElem.firstElementChild) {            docElem.firstElementChild.appendChild(vpMeta)        }else{vardiv = doc.createElement("div");            div.appendChild(vpMeta);            doc.write(div.innerHTML);        }    }functionsetFontSize(){varwinWidth = docElem.getBoundingClientRect().width;if(winWidth / dpr 540) {            (winWidth =540* dpr);        }// 根节点 fontSize 根据宽度决定varbaseSize = winWidth /10;        docElem.style.fontSize = baseSize +"px";        flexible.rem = win.rem = baseSize;    }// 调整窗口时重置win.addEventListener("resize",function(){        clearTimeout(timer);        timer = setTimeout(setFontSize,300);    },false);// 这一段是我自己加的// orientationchange 时也需要重算下吧win.addEventListener("orientationchange",function(){        clearTimeout(timer);        timer = setTimeout(setFontSize,300);    },false);// pageshow// keyword: 倒退 缓存相关win.addEventListener("pageshow",function(e){if(e.persisted) {            clearTimeout(timer);            timer = setTimeout(setFontSize,300);        }    },false);// 设置基准字体if("complete"=== doc.readyState) {        doc.body.style.fontSize =12* dpr +"px";    }else{        doc.addEventListener("DOMContentLoaded",function(){            doc.body.style.fontSize =12* dpr +"px";        },false);    }      setFontSize();    flexible.dpr = win.dpr = dpr;    flexible.refreshRem = setFontSize;    flexible.rem2px =function(d){varc =parseFloat(d) *this.rem;if("string"==typeofd d.match(/rem$/)) {            c +="px";        }returnc;    };    flexible.px2rem =function(d){varc =parseFloat(d) /this.rem;if("string"==typeofd d.match(/px$/)) {            c +="rem";        }returnc;    }}(window,window.lib || (window.lib = {}));

忘了说了，手机淘宝很多页面用的就是这种方法来适配终端的。

小程序如何使用css3动画

1、利用样式实现小程序动画(用法和css用法相识)

wxml 文件

image class="aniamtion" src="../../images/page4.jfif" style="width:200rpx;height:200rpx;  position:  relative;"/image

wxss文件

.aniamtion {

animation: mymove 5s infinite;

/* //infinite属性是表示无限循环的意思，没有这个属性的话动画只执行一次。 */

}

@keyframes mymove {

from {

/* left: 0px; */

/* transform: rotate(7deg) skew(50deg) translate(30rpx,30rpx); */

transform: rotate3d(100,200,300,0deg);

}

to {

/* left: 200px; */

/* transform: rotate(7deg) skew(5deg) translate(100rpx,100rpx); */

transform: rotate3d(200,300,400,360deg);

}

}

2、 用小程序的API来实现动画

用wx.createAnimation(object) 来创建一个动画 --返回一个animation对象

创建一个动画实例 animation。

onReady: function () {

this.animation = wx.createAnimation({

duration:1000,

timingFunction:'linear',

delay:100,

transformOrigin:"left top 0"

})

},

调用实例的方法来描述动画。

Animation.step() 表示一组动画的完成，可以在一组动画中调用任意多个动画方法，一组动画中的所有动画会同时开始，一组动画完成后才会进行下一组动画

rotate(){

this.animation.rotate(150).step() //对动画进行简单的描述

this.setData({

     animation:this.animation.export()

})

},

最后通过动画实例的 export 方法导出动画数据传递给组件的 animation 属性。

this.animation.export() 导出动画队列。export 方法每次调用后会清掉之前的动画操作

rotate(){

this.animation.rotate(150).step() //对动画进行简单的描述

this.setData({ // 在setData({}) 导出动画数据数据给组件

     animation:this.animation.export()

})

},

完整的wxml

view class="container"

view animation="{{animation}}" class="view"

将做动画的块

/view

/view

button type="default" size="mini" bindtap="rotate"

旋转

/button

完整的wxjs

Page({

data: {

animation:''

},

onReady: function () {

this.animation = wx.createAnimation({

duration:1000,

timingFunction:'linear',

delay:100,

transformOrigin:"left top 0"

})

},

rotate(){

this.animation.rotate(150).step().translate(100).step()

this.setData({

animation:this.animation.export()

})

}

})

3、用选择器来绑定组件来来实现组件的动画（小程序2.9.0 的库可用，版本不够会报this.animate不是一个方法）

textpages/index7/index7.wxml/text

view id="container" style="height: 100px; width: 100px; background-color: blue;"

container

/view

view class="block" style="height: 100px; width: 100px;background-color: #ccc;"

block

/view

用选择器选择相应的组件进行相应的动画

进行关键帧的处理

onLoad: function () {

this.animate('#container', [

{ opacity: 1.0, rotate: 0, backgroundColor: '#FF0000' },

{ opacity: 0.5, rotate: 45, backgroundColor: '#00FF00' },

{ opacity: 1.0, rotate: 90, backgroundColor: '#FF0000' },

], 5000)

this.animate('.block', [

{ scale: [1, 1], rotate: 0, ease: 'ease-out' },

{ scale: [1.5, 1.5], rotate: 45, ease: 'ease-in'},

{ scale: [2, 2], rotate: 90 },

], 5000)

},

}

4、用第三方的库 animation.css

需要做的有

从下载css动画文件

把 .css 文件 改名成 .wxss文件（可进行相应的需改，毕竟小程序的大小限制摆在那里）

把它引入到你的app.wxss文件中

@import “动画文件的相对目录”

在用的时候把他和你的样式绑定

view class="swing" style="height: 100px; width: 100px;background-color: #ccc;"

block

/view

// 给类名为swing 的文件绑定swing 的动画

.swing{

animation: swing 5s infinite;

}

网站栏目：小程序css样式,小程序格式
当前路径：http://ybzwz.com/article/phsdep.html