当拿到UI设计图时，可将界面的宽设置成750宽度，并且宽高保持纵横比,这样进行图案大小测量时，最后的数据就对应了小程序响应图标的rpx值，并且使用iphone6的测试分辨率。
尺寸单位
rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。
设备 rpx换算px (屏幕宽度/750) px换算rpx (750/屏幕宽度) iPhone5 1rpx = 0.42px 1px = 2.34rpx iPhone6 1rpx = 0.5px 1px = 2rpx iPhone6 Plus 1rpx = 0.552px 1px = 1.81rpx
建议： 开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。
注意： 在较小的屏幕上不可避免的会有一些毛刺，请在开发时尽量避免这种情况。
新建项目
初始化
格式化新页面
index的wxml,wxss,js全部删除默认内容，等待重新编写。
app.wxss清除默认样式,app.wxss是全局样式，通用的样式都写在这里。
首页头部布局
左右间隔
一般图片都离屏幕边框有一点边距，app.wxss使用padding:
这样全局container都会有间隔。
.container {
padding: 0 26px;
box-sizing: border-box;
}
点击图标转至客服聊天
难点
- 只有button有，打开客服会话的功能(open-type=contact)，如果用户在会话中点击消息卡片后返回小程序，可以从 bindcontact 回调中获得具体信息。
需要将按钮和图标融合在一起，这样就能点击图标，从而触发按钮的事件。
实践
wxml:
需要按钮盖住头像，顺序不能颠倒，否则点击不中按钮
<view class="header"> <view class="container hdCon"> <view class="kefu"> <button class="btn" open-type="contact"></button> <image class="pic" mode="heightFix" src="/images/xiaoxi.png"></image> </view> </view> </view>
wxss:
第3行需要对内部容器也要设置高度，否则图片加载不出来
.header{width: 750rpx; height:90rpx ;border:1px solid red; overflow: hidden; } .hdCon{display: flex; justify-content: space-between; align-items: center; height: 100%; padding:0 26rpx;} .hdCon ,.kefu{height:50rpx;} .hdCon .hdPic{height: 100%;} .kefu {position: relative;} .kefu .btn{ position: absolute; width: 100%; height: 100%; top: 0; left: 0; opacity: 0; }
图标条件闪烁动画
这个动画可能会出现多次，所以直接在全局的app.wxss中添加动画效果，以便复用。
app:wxss:
刚开始中间末尾，图标都是完全显示，到4/1时间点处时，图标为完全消失。
@keyframes dh{
0%,50%,100%{opacity:1;}
25%{opacity: 0;}
}接下载只需要调用动画即可：
index.wxss:
.header{width: 750rpx; height:90rpx ;border:1px solid red; overflow: hidden; }
.hdCon{display: flex; justify-content: space-between; align-items: center; height: 100%; padding:0 26rpx;}
.hdCon .logo,.kefu image{height:50rpx;}
.hdCon .hdPic{height: 100%;}
.kefu {position: relative; animation: dh 1s linear infinite; /* animation将动画与标签绑定，infinite循环播放,linear匀速*/
}
.kefu .btn{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: 0;
}轮播布局
wxml:
indicator-dots
- 添加轮播滑块点
indicator-color
- 未被选中的滑块点颜色
indicator-active-color
- 选中的滑块点颜色
autoplay
- 自动播放
circular
- 循环衔接
- interval
自动切换等待时长
<view class="banner"> <swiper indicator-dots indicator-color="rgba(255,255,255,0.5)" indicator-active-color="#fff" autoplay circular interval="4000"> <swiper-item><image src="/images/banner1.jpg"></image></swiper-item> <swiper-item><image src="/images/banner2.jpg"></image></swiper-item> <swiper-item><image src="/images/banner3.jpg"></image></swiper-item> </swiper> </view>wxss:
.banner{ width: 100%; height: 295rpx; border:1px solid green } .banner swiper{ height: 100%; width: 100; } .banner image{ width: 100%; height: 295rpx; }css样式补充
box-sizing
https://developer.mozilla.org/zh-CN/docs/Web/CSS/box-sizing
CSS 盒子模型的默认定义里，你对一个元素所设置的width与height只会应用到这个元素的内容区。如果这个元素有任何的border或padding，绘制到屏幕上时的盒子宽度和高度会加上设置的边框和内边距值。这意味着当你调整一个元素的宽度和高度时需要时刻注意到这个元素的边框和内边距。当我们实现响应式布局时，这个特点尤其烦人。
box-sizing 属性可以被用来调整这些表现:content-box是默认值。如果你设置一个元素的宽为100px，那么这个元素的内容区会有100px 宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。border-box告诉浏览器：你想要设置的边框和内边距的值是包含在width内的。也就是说，如果你将一个元素的width设为100px，那么这100px会包含它的border和padding，内容区的实际宽度是width减去(border + padding)的值。大多数情况下，这使得我们更容易地设定一个元素的宽高。padding
https://www.w3school.com.cn/cssref/pr_padding.asp
display:flex
https://zhuanlan.zhihu.com/p/24607454
display:flex 是一种布局方式。它即可以应用于容器中，也可以应用于行内元素,可以简便、完整、响应式地实现各种页面布局。
Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。
justify-content:space-between
将容器内的组件左右两端对齐
https://www.runoob.com/cssref/css3-pr-justify-content.html
align-items: center
一般和height: 100% 一起使用。
https://www.runoob.com/cssref/css3-pr-align-items.html
元素位于容器的中心。
弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
position
https://www.w3school.com.cn/css/pr_class_position.asp
@keyframes
通过 @keyframes 规则，您能够创建动画。
创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。
在动画过程中，您能够多次改变这套 CSS 样式。
以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%。
0% 是动画的开始时间，100% 动画的结束时间。
animation-direction:alternate
animation-direction 属性定义是否应该轮流反向播放动画。
如果 animation-direction 值是 "alternate"，则动画会在奇数次数（1、3、5 等等）正常播放，而在偶数次数（2、4、6 等等）向后播放。
此处评论已关闭