微信小程序开发笔记

基本概念

显示相关

  • dip

设备独立像素(density-independent pixel, dip)也叫逻辑分辨率,是一种可以被程序所控制的虚拟像素,在Web开发中对应CSS像素。

  • pp

物理像素(physical pixel, PP)也叫设备像素,由设备的屏幕决定,其实就是屏幕中控制显示的最小单位。例如,华为荣耀V20的屏幕显示分辨率2310*1080即为物理像素。

  • dpr

设备像素比(device pixel ratio,dpr)计算公式如下:

$$dpr=物理像素/设备独立像素$$

这条公式成立的前提是,缩放比Scale为1,原因下面讲到缩放的时候就会知道。根据这种关系,如果设备像素大于设备独立像素(DPR大于1的设备,我们常说的高清屏或者视网膜Retina屏),就会出现一个设备独立像素对应多个设备像素的情况。

在JavaScript中,可以通过window.devicePixelRatio获取到当前设备的dpr,但遗憾的是并不是所有的都支持。

通过访问mydevice,可获得各类显示屏的dpr、dpi等参数信息。 例如,通过访问该网站可知华为荣耀V20的dpr为3。

  • rpx

微信小程序对于rem的一种应用规定,官方规定屏幕宽度为20rem,规定屏幕宽为750rpx,因此微信中1rem=750/20rpx,iphone6下,1px=1rpx=0.5pt,使用rpx作为单位,微信小程序会自动在不同的分辨率下进行转换,而使用px为单位不会转换,iphone6p下1px=0.6rpx;

  • rem

在移动端做适配通常用rem作为单位,rem是根据html的fontsize去动态计算实际px;

  • pt

pt是逻辑分辨率,pt的大小和屏幕尺寸有关系,简单可以理解为长度和视觉单位;1个pt可以有1个px,也可以有2个,3个或更多的px,但人的视网膜极限为2倍@2x,增加再多也不会让屏幕看起来更加好了,比如iphone6,2个px构成一个pt,ip6以物理像素750*1334这视觉稿进行设计;

自定义组件

参考链接

  1. px、rpx、rem、pt、dpr学习笔记,by puxiaotaoc.
  2. 不要再问我移动适配的问题了,by 写Bug.
  3. 微信小程序日期时间选择器以及组件封装,by 大专栏.
  4. 微信小程序template模板与component组件的区别及使用方法,by 小破孩呦.
  5. 小程序app.js中onLaunch和主页的onLoad方法问题,by Feebas.
  6. 微信小程序分享参数传递(微信小程序获取分享path参数),by longlongValue.
  7. 微信小程序(四):通过list列表跳转详情页,by 扎哈的信徒.
  8. 2.2 WXML 模板,by 微信开放社区.
  9. 微信小程序-表单验证(WxValidate使用),by chibimarukochan.
  10. JS数组的深浅拷贝,by 蜗牛-.
  11. js正则校验数字和字母字符串,by hacker_LeeFei.
  12. 微信小程序onLaunch异步,首页 onLoad 先执行 ?,by juejing.
  13. 解决微信小程序 app onLaunch异步请求,在没有请求执行完就加载首页了的问题,by admin.
  14. 微信小程序canvas尺寸设置,by 楠倏之语.
  15. WeUI组件库快速上手,by weixin.