小程序开发

小程序是一种轻量级应用,具有开发门槛低、成本低的特点。它不支持DOM,采用组件化的方式,主要文件包括.js、.wxml、.wxss和.json。理解事件机制、组件化和数据绑定是开发关键。文章介绍了Flex布局在小程序中的应用以及移动端适配方案,包括物理像素、设备独立像素、dpr的概念,并提供了小程序的适配策略,如基于iPhone6的物理像素进行换算。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

小程序刚发布的时候要求压缩包的体积不能大于1M,否则无法通过,2017年进行了改进,由原来的1M提升到2M。小程序对app进行互补,比app操作更加简洁的轻应用,开发门槛低,成本低。

  1. 小程序没有DOM对象,一切基于组件化
  2. 小程序的四个重要的文件
    1. *.js
    2. *.wxml ---> view结构 ----> html
    3. *.wxss ---> view样式 -----> css
    4. *. json ----> view 数据 -----> json文件
  3. 储备知识
    1. 理解事件机制
    2. 理解组件化
    3. 理解数据绑定
    4. Flex布局
    5. 移动端适配方案
  4. 学习vue后开发小程序非常方便
  5. Flex布局简介

    1) Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。

    2) 任何一个容器都可以指定为Flex布局。3) display: ‘flex’

  6. flex属性

    1) flex-direction:

    row(默认值):主轴为水平方向,起点在左端。

    row-reverse:主轴为水平方向,起点在右端。

    column:主轴为垂直方向,起点在上沿。

    column-reverse:主轴为垂直方向,起点在下沿。

  7. 学习网站:Flex 布局语法教程 | 菜鸟教程

  8. 移动端适配

    4.3.1 物理像素

    1) 屏幕的分辨率

    2) 设备能控制显示的最小单元,可以把物理像素看成是对应的像素点

    4.3.2 设备独立像素 & css像素

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

    4.3.3 dpr比 & DPI & PPI

    1) dpr: 设备像素比,物理像素/设备独立像素 = dpr, 一般以Iphon6的dpr为准 dpr = 2

    2) PPI: 一英寸显示屏上的像素点个数

    3) DPI:最早指的是打印机在单位面积上打印的墨点数,墨点越多越清晰

  9. 小程序的适配方案

    Iphon6: 1rpx = 1物理像素 = 0.5px

    微信官方提供的换算方式:1)以iPhone6的物理像素个数为标准: 750;2)1rpx = 目标设备宽度 / 750 * px;3)注意此时底层已经做了viewport适配的处理,即实现了理想视

重要点描述:

 

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值