微信小程序开发 [06] 一些补充的知识点

0、写在前面的话

前几章的内容串联起来，基本上已经能写比较基础的小程序页面逻辑了，当然，wxml和wxss的我并没有写，因为前端我也并不擅长。这个章节，准备随便叨叨，然后补充一些之前没有提到的基础知识，这部分我会从我慕课网的学习笔记上搬过来，不过说实话，慕课网的笔记不能导出，还是很麻烦的，笔记记录的体验还行，但是查阅的体验可实在不怎么样。

1、rpx

在HTML中我们常用的是px这个单位，而在微信小程序中，官方提供了rpx单位，也是用得最多的单位，因为可以自适应屏幕，先看下官方的解释吧：

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

上面的概念就要稍微展开一些来谈了，我们先来说说什么是px，它其实有两个方面的概念：

• 设备像素点px
• CSS像素点px

设备像素点px，我们可以理解为说的是一个点，可是，谁能描述说一个“点”具体有多大多长？但是我们可以知道的是，同等面积，点越小，数量越多，画面就越清晰。这里的同等面积，就是指pt（印刷行业的常用单位，等于1/72英寸），一个pt中容纳多少个px，则称之为Reader，即pt/px的值，一般人类肉眼的极限是2~3。而所谓分辨率，就是指可以铺多少个设备像素点（当然这个点的大小各个设备定义不同），iPhone6的分辨率是750*1334，可以算出，其1个pt中铺了750/375=2个点。

而我们在Web中也有用的px这个单位，这里则不是指所谓设备像素点，而是指CSS像素点px，同时要知道的是，并不完全CSS中的1px≠设备中的1px，CSS的px在不同设备是不同的，也就是说，“当你给元素设置了 width: 200px 时，这个元素的宽度跨越了200个CSS像素。但是它并不一定跨越200个设备像素”，拿苹果的视网膜屏幕来举例，它的像素密度是普通屏幕的2倍，所以当我们设置 width: 200px; 时，200个CSS像素跨越了400个设备像素，如下图（《一篇真正教会你开发移动端页面的文章(一)》）：

那么问题来了，一个CSS像素px到底有多长？它是一个相对单位，说起来就复杂了，抛出一个链接《像素（px）到底是个什么单位》，按参考文章中的总结，px是一个相对单位，而且在特定设备上总是一个近似值（原则是尽量接近参考像素）。

所以你可以理解为，就手机设备而言，CSS的px是个“固定”的单位长度，而这个长度在iPhone6则是375px*667px：

 

好了，现在我们回过头来再看微信中rpx的定义：

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

那么现在你可以理解了，微信规定了屏幕宽为750rpx，那么假设你设置一个字体为75rpx，那么它会占手机屏幕宽度的75/750=10%，不管手机是iPhone6还是iPhone4，始终是尺寸的10%了。这也是为什么文档中建议开发微信小程序时设计师用 iPhone6 作为视觉稿的标准了，因为iPhone6正好是375px，分辨率是750*1334，正好和750rpx相同，从视觉稿到页面设计，不必再去额外转换。

当然，在微信小程序中并不是所有都适合使用rpx，比如部分文字，在iPhone6上使用rpx作为单位，换作iPhone4小屏幕，可能字体就缩小到无法看清了。不同场合下，根据需要使用rpx或px。

2、wxss的引入

之前在讲到模板部分的时候，模板引入了，实际上模板对应的wxss也是可以独立开进行单独引入的。使用 @import 语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束，如下例：

/** common.wxss **/
.small-p {
  padding:5px;
}

4

 

1

/** common.wxss **/ 

2

.small-p {

3

  padding:5px;

4

}

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

 

1

/** app.wxss **/

2

@import "common.wxss";

3

.middle-p {

4

  padding:15px;

5

}

3、关于Page下的json

app.json可以配置全局属性(整个应用程序，包括window)，某个页面下的json只能配置当前页面的配置（仅window）；所以单独页面的时候配置时不需要写window。

4、利用事件冒泡精简绑定代码

合理利用事件的冒泡，可以精简事件绑定的代码，如swiper中各个item的点击事件，可以统一绑定只在swiper上绑定一个事件即可，因为冒泡所以会被触发，但是要注意的是数据传递的问题，target和currentTarget的区别：taget指的是当前点击的组件，例如swiper里的image，而currentTarget指的是事件捕获的组件。

 

5、方法体，页面等变量参数的传递

往往可以考虑在Page的data中，或者App的全局变量，设置是小程序的缓存中，考虑变量属性的中转。

6、template注意事项

template模板中的事件，是无法在对应的template目录下的js文件中的，并不会生效。事件的对应函数，应该在调用模板的page中的js去写。

template传入的数据data，可以采用组合的方式，详见官方文档。

不要在template上写class来控制样式，template只是一个占位符，实际上解析的时候就没了。

7、星星评分的启发

在豆瓣的页面中，我们可以看到星星评分的样式，实现的方式有点启发：把评分转换成5个数字的数组，如1表示有星，0表示无星（如5星是[1,1,1,1,1]，三星则是[1,1,1,0,0]），循环即可通过三元运算符进行控制星星图片输出来实现。

8、页面编写的思路

先里后外，模板嵌套，先静后动，豆瓣 API，先结构后样式

9、设置页面背景颜色

json文件里面配置的background-color是最底层的，就是下拉刷新露出来的那部分背景。要设置我们常用的底层背景色，则设置page组件的 background-color 即可。

 

10、scroll-view和下拉刷新

下拉刷新则通过在 xxx.json 中配置实现，页面包含scroll-view则下拉刷新会“失效”，因为滑动会只滑动scroll-view组件而不是页面，所以无法触发onPullDownRefresh事件。想共存的方法就是将scroll-view替换为view，改用onReachBottom监听页面上滑到底。

11、undefined等数据为空的错误

做数据绑定时，最好给对象初始值（即使是空值），主要是数据请求的方式是异步的，可能因为执行的先后顺序而读取不到对象，继而报错。

12、scroll-view滚动展示图片

对于scroll-view中横向滚动展示图片，最好加上css white-space:nowrap（不换行）

13、css3新特性：模糊滤镜

filters主要运动在图片上以实现特效，如模糊则为 -webkit-filter:blur(20px)