前端项目配置

Appearance

小程序 ​

小程序特点 ​

  1. 体积小，压缩包的体积不能大于 2M
  2. 没有 DOM 对象
  3. 基于组件化开发
  4. 小程序环境不同于浏览器环境
    1. 浏览器环境中全局对象： window
    2. 小程序环境中全局对象：wx
    3. 小程序环境中没有 window 对象

小程序适配 ​

  1. 小程序适配单位： rpx(responsive px) 响应式单位
  2. 小程序中规定所有的机型中页面宽度都是 750rpx
  3. iphone6: 1 物理像素 = 0.5px = 1rpx || 1px = 2rpx
  4. 小程序底层已经做了 viewport 适配

小程序相关语法 ​

  1. 数据绑定
    1. 单项数据流: Model 指向 view
    2. 修改状态数据： this.setData() 同步行为
    3. 页面中的数据均来自于 data 中，使用 data 中的数据的时候记住使用表达式{
  2. 事件绑定
    1. 事件分类： 冒泡事件 || 非冒泡事件
    2. 绑定的方式： bind + 事件名 || catch + 事件名
  3. 路由跳转
    1. wx.navigateTo() || wx.redirectTo()
  4. 本地存储
    1. 语法：
      1. wx.setStorage() || wx.setStorageSync()
      2. wx.getStorage() || wx.getStorageSync()
    2. 注意点
      1. 单个 key 上限是 1M
      2. 整体上限是 10M
  5. 全局传参 app.js 中可定义全局参数 globalData

向事件对象传参 ​

  1. 语法
    1. id=value
    2. data-key=value
  2. 获取
    1. id: event.target.id || event.currentTarget.id
    2. data-key: event.target.dataset.key || event.currentTarget.dataset.key
  3. 使用场景
    1. id：通常需要向 event 对象传递单一且唯一的标识
    2. data-key: 需要向 event 对象传递多个标识数据

小程序获取用户唯一标识（openId） ​

  1. 客户端先通过 wx.login获取 code
  2. wx.request()发送 code 给服务器
  3. 服务器端发送请求携带参数(code, appSecret（开发密钥）, appId)给微信服务器获取 openId
  4. 微信返回 openId 给服务器后，服务器进行加密再返回给前端
  5. 前端进行本地储存，下次发送请求时携带参数

小程序支付流程 ​

  1. 用户在小程序客服端下单(包含用户及商品信息)
  2. 小程序客户端发送下单支付请求给商家服务器
  3. 商家服务器同微信服务器对接获取唯一标识 openID
  4. 商家服务器根据 openId 生成商户订单(包含商户信息)
  5. 商家服务器发送请求调用统一下单 API 获取预支付订单信息
  6. 商家对预支付信息签名加密后返回给小程序客户端
  7. 用户确认支付（鉴权调起支付）
  8. 微信服务器返回支付结果给小程序客户端
  9. 微信服务器推送支付结果给商家服务器端

小程序相关问题 ​

  1. Iphone6 的 dpr 为多少？Iphone6Plus 比 Iphone6 显示图像清晰吗？ 视网膜屏幕是分辨率超过人眼识别极限的高分辨率屏幕，Iphone4 的 dpr = 2; 人类肉眼分 辨的极限
  2. 生命周期函数实际测试和官网描述有差
  3. wx.setStorage()，单个 key 允许存储的最大数据长度为 1MB，所有数据存储上限为 10MB
  4. 性能优化 一个页面一次只有一个 video 标签，其余的使用 image 代替
  5. 请求相关 小程序为了安全起见只支持 Https 请求 wx.request 最大并发限制 10 个
  6. 如何使用组件 先创建组件，在对应的 json 文件下设置 component: true 到使用组件页面的 json 文件中，注册组件填写相应的路径
  7. 使用 npm 包 下载后，勾选使用 npm 模块，再构建 npm，会将 node_modules 中的包打 包到 miniprogram_npm 中
  8. 分包相关 分包后可解决 2M 限制，并且能分包加载内容，提高性能 分包后单个包的体积不能大于 2M，所有包的体积不能大于 16M
  9. 常规分包 加载小程序的时候先加载主包，当需要访问分包的页面时候才加载分包内 容分包的页面可以访问主包的文件，数据，图片等资源
  10. 独立分包 独立分包可单独访问分包的内容，不需要下载主 包独立分包不能依赖主包或者其他包的内容 通常某些页面和当前小程序的其他页面关联不大的时候可进行独立分包，如：临时加 的广告页 || 活动页
  11. 分包预下载

在加载当前包的时候可以设置预下载其他的包缩短用户等待时间，提高用户体验

  1. 开发相关

setData 行为始终是同步的 H5 中实现滑块功能，推荐大家使用：better-scroll

移动端 ​

移动端基础知识 ​

  • 1 英寸(inch) = 2.54 厘米(cm)
  • IPhone 6 的屏幕分辨率为 750 * 1334 设备独立像素为 375 * 667
  • 物理像素：由屏幕制造商决定，屏幕生产后无法修改
  • css 像素：单位是 px，它是为 Web 开发者创造的
  • 设备独立像素的出现，使得即使在【高清屏】下，也可以让元素有正常的尺寸，让代码不受到设备的影响，它是设备厂商根据屏幕特性设置的，无法更改。 1个位图像素对应 1 个物理像素，图片才能得到完美清晰的展示
  • pc 端视口：默认宽度和浏览器窗口的宽度一致，也被称为初始包含块document.documentElement.clientWidth
  • 移动端事件
    • 触发事件
      • touchstart 元素上触摸开始时触发
      • touchmove 元素上触摸移动时触发
      • touchend 手指从元素上离开时触发
      • touchcancel 触摸被打断时触发
    • 执行顺序
      • touchstart
      • touchend
      • click，浏览器在 click 后会等待约 300ms 去判断用户是否有双击行为，如果 300ms 内没有再一次 click，那么就判定这是一次单击行为
    • 点击穿透 -(touch 事件结束后会默认触发元素的 click 事件)
      • 阻止默认行为
      • 使背后元素不具备 click 特性，用 touchXxxx 代替 click
      • 让背后的元素暂时失去 click 事件，300 毫秒左右再复原，属性 pointer-events:none;
      • 让隐藏的元素延迟 300 毫秒左右再隐藏

移动端面试题 ​

  • 移动端视口:
    • 布局视口：一般是 980px 左右，布局视口经过压缩后，横向的宽度用 css 像素表达就不再是 375px 了，而是 980px
    • 视觉视口：用户可见的区域，它的绝对宽度永远和设备屏幕一样宽
    • 理想视口：布局视口宽度 与 屏幕等宽（设备独立像素），靠 meta 标签实现
  • 移动端适配
    • viewport 适配
      • 方法：拿到设计稿之后，设置布局视口宽度为设计稿宽度，然后直接按照设计稿给宽高进行布局即可。

      一般适用于：计图稿宽度 < 375

    • rem 适配
      • 百度
        1. 设置完美视口
        2. 通过 js 设置根字体大小 = ( 当前设备横向独立像素值 *100) / 设计稿宽度
        3. 编写样式时，直接以 rem 为单位，值为：设计值 / 100
        4. 增加 JS 代码进行实时适配
      • 淘宝 唯品会
        1. 设置完美视口
        2. 通过 js 设置根字体大小 = 当前设备横向独立像素值 / 10
        3. 编写样式时，直接以 rem 为单位，值为：设计值 / (设计稿宽度 / 10)
        4. 增加 JS 代码进行实时适配
    • vw 适配
      • vw 和 vh 是两个相对单位

      1vw = 等于布局视口宽度的 1% 1vh = 等于布局视口高度的 1%

  • 1px 物理像素边框
    • 媒体查询
    css
        @media screen and (-webkit-min-device-pixel-ratio:2){ 
        #demo{
            border: 0.5px solid black;
        }
    }
    或
    @media screen and (-webkit-min-device-pixel-ratio:2){
        #demo2::after{
            transform:scaleY(0.5);
        }
    }
    • 修改可视窗口
      1. rem 页面布局
      2. 元素的边框设置为 1px
      3. 通过 viewport 中的 initial-scale 将布局视口扩大 n 倍，这样页面元素就比原来缩小了 n 倍
      javascript
          var viewport = document.querySelector('meta[name=viewport]')
    var scale = 1 / window.devicePixelRatio
    viewport.setAttribute('content', 'width=device-width,initial-scale=' +scale);
      1. 重新设置根元素字体
        javascript
        var fontSize = parseInt(document.documentElement.style.fontSize);
document.documentElement.style.fontSize = fontSize * window.devicePixelRatio + 'px'

Released under the MIT License.

Copyright © 2019-present