Skip to content

Latest commit

 

History

History
98 lines (54 loc) · 2.96 KB

小程序.md

File metadata and controls

98 lines (54 loc) · 2.96 KB

小程序


一、小程序简介

1、什么是小程序

  • 微信小程序,简称小程序。英文为 Mini Program 。是一种不需要下载安装就可以使用的应用。
  • 张小龙对其定义是无需安装,用完即走,实际上是需要安装的,只不过小程序的体积特别小,下载速度很快,用户感觉不到下载的过程。
  • 小程序刚发布的时候要求压缩包的体积不能大于 1M ,否则无法通过,在 2017 年 4 月做了改进,由原来的 1M 提升到 2M
  • 在 2017 年 1 月 9 日 0 点,万众瞩目的微信第一批小程序正式低调上线。

2、小程序可以做什么

  • 同 App 进行互补,提供类似 App 的功能,但是比 App 使用方便简洁
  • 通过扫一扫或者在微信中搜索即可下载
  • 用户使用频率不高,但是又不得不用的功能
  • 开发门槛低,成本低

3、小程序必备知识

1)、物理像素

  • 屏幕分辨率
  • 设备能控制显示的最小单元,可以把物理像素看成是对应的像素点

2)、设备独立像素

设备独立像素(也叫密度无关像素),可以认为是计算机坐标系统中的一个点,这个点代表一个可以由程序使用并控制的虚拟像素,然后由相关系统转换为物理像素。

3)、dpr & DPI & PPI

  • dpr:设备像素比, 物理像素/设备独立像素 = dpr ,一般以 iphone6 的 dpr 为准。dpr = 2
  • PPI:一英寸显示屏上的像素点个数
  • DPI:最早指的是打印机在单位面积上打印的墨点数,墨点越多越清晰。

4)、移动端适配方案

1、viewport 适配

① 为什么做 viewport 适配?

  • 手机厂商在生产手机的时候大部分手机默认页面宽度为 980px
  • 手机实际视口宽度都要小于 980px ,如: iphone6 为 375px
  • 适配需求就变成了需要将 980 的页面完全显示在手机屏幕上且没有滚动条

② 实现方案

<meta name="viewport" content="width=device-width,initial-scale=1.0">

2、rem 适配

① 为什么做 rem 适配?

  • 机型太多,不同的机型屏幕大小不一样
  • 适配需求就变成了一套设计稿的内容在不同的机型上呈现的效果一致,根据屏幕大小不同的变化,页面中的内容也相应的变化。

二、小程序特点

1、特点概述

  • 没有 DOM
  • 组件化开发,具备特定功能效果的代码集合
  • 体积小,单个压缩包体积不能大于 2M,否则无法上线
  • 小程序四个重要的文件:
    • *.js
    • *.wxml view结构 html
    • *.wxss view样式 css
    • *.json view数据 json 文件

2、小程序适配方案:rpx

rpx:responsive pixel 响应式像素单位

  • 小程序适配单位: rpx
  • 规定任何屏幕下宽度为 750rpx
  • 小程序会根据屏幕的宽度不同自动计算 rpx 值的大小
  • Iphone6 下:1rpx= 1物理像素 = 0.5px