微信小程序开发 [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个设备像素,如下图(《一篇真正教会你开发移动端页面的文章(一)》):
微信小程序开发 [06] 一些补充的知识点

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

所以你可以理解为,就手机设备而言,CSS的px是个“固定”的单位长度,而这个长度在iPhone6则是375px*667px:
微信小程序开发 [06] 一些补充的知识点
 
好了,现在我们回过头来再看微信中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指的是事件捕获的组件。
微信小程序开发 [06] 一些补充的知识点
 

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 即可。
微信小程序开发 [06] 一些补充的知识点
 

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)

上一篇:结对作业--基于GUI的四则运算生成器


下一篇:Java常用调试技巧(转)