Web-Notes

Appearance

移动端和小程序 ​

点击穿透现象及解决办法 ​

  • 现象：点击穿透的现象比如说点击mask上的关闭按钮，mask消失后发现触发了按钮下面元素的点击事件或者是跳转到另一个页面
  • 解决方案：只用touch事件，touchstart、touchend、tap轻触事件；第二种方式是只用click事件，因为单击会有300ms的延迟，但是页面内任何一个自定义交互都将增加300ms延迟；第三种方式是tap后延迟350ms再隐藏mask，但是体验感差了一点

页面适配 ​

  • 流式布局，使用百分比布局，非固定像素
  • 使用vw和vh
  • rem单位配合flexible.js使用
  • media
  • media + vw vh

小程序页面生命周期 ​

  • 应用级别：Page()中触发
    • onLaunch：小程序启启动时
    • onShow：小程序前台运行时
    • onHide：小程序后台运行时
    • onError：执行错误时
    • onPageNotFount：冷启动（如扫码）打开小程序的页面不存在时
  • 页面级别：
    • onLoad：页面加载时触发。一个页面只会调用一次，可以在onLoad的参数中获取打开当前页面路径的参数
    • onShow：页面显示/切入前台时触发（返回、tabBar切换、前台运行）
    • onReady：页面初次渲染完毕，相当于vue的mounted。一个页面只会调用一次，代表页面已经准备妥当，可以可视图层进行交互
    • onHide：页面隐藏/切入后台时触发（跳转、tabBar切换、后台运行）
    • onUnload：页面卸载时触发。如redirectTo 或 navigateBack 到其他页面时

上拉加载和下拉刷新 ​

上拉加载 ​

  1. 使用 scroll-view 组件，该组件中有一个 @scrolltolower 事件，表示滚动到底部/右边，触发 scrolltolower 事件，可以在事件中进行处理
  2. onReachBottom生命周期钩子函数，页面滚动到底部的事件（不是scroll-view滚到底）

onReachBottom使用注意 可在pages.json里定义具体页面底部的触发距离onReachBottomDistance，比如设为50，那么滚动页面到距离底部50px时，就会触发onReachBottom事件。

下拉刷新 ​

在 js 中定义 onPullDownRefresh 处理函数（和onLoad等生命周期函数同级），监听该页面用户下拉刷新事件。

  • 需要在 pages.json 里，找到的当前页面的pages节点，并在 style 选项中开启 enablePullDownRefresh。
  • 当处理完数据刷新后，uni.stopPullDownRefresh 可以停止当前页面的下拉刷新

动态获取小程序胶囊高度，适配机型 ​

  • 自定义导航组件的时候，将组件结构一分为二：状态栏 + 标题栏
  • 状态栏高度可通过 wx.getSystemInfoSync().statusBarHeight 获取
  • 导航栏高度 = 胶囊按钮高度 + 状态栏到胶囊按钮间距 * 2（这个是自定义导航栏的关键，需要去计算这两块的高度）
  • 由于胶囊按钮是原生组件，为表现一致，其单位在各系统都为 px，所以我们的自定义导航栏各个高度的单位都必需是px（切记不能用rpx），才能完美适配

登录流程 ​

  • 通过 wx.login() 获取到用户的code判断用户是否授权读取用户信息，调用wx.getUserInfo 读取用户数据
  • 由于小程序后台授权域名无法授权微信的域名，所以需要自身后端调用微信服务器获取用户信息
  • 通过 wx.request() 方法请求业务方服务器，后端把 appid , appsecret 和 code 一起发送到微信服务器。 appid 和 appsecret 都是微信提供的，可以在管理员后台找到
  • 微信服务器返回了 openid 及本次登录的会话密钥 session_key
  • 后端从数据库中查找 openid ，如果没有查到记录，说明该用户没有注册，如果有记录，则继续往下走
  • session_key 是对用户数据进行加密签名的密钥。为了自身应用安全，session_key 不应该在网络上传输
  • 然后生成 session并返回给小程序
  • 小程序把 session 存到 storage 里面
  • 下次请求时，先从 storage 里面读取，然后带给服务端
  • 服务端对比 session 对应的记录，然后校验有效期

总的来说：登录流程就是调 wx.login 获取 code 传给后台服务器获取微信用户唯一标识 openid 及本次登录的会话密钥（session_key）等。拿到开发者服务器传回来的会话密钥（session_key）之后，前端要保存 wx.setStorageSync('sessionKey', 'value')。

支付流程 ​

  • 打开某小程序，点击直接下单
  • wx.login获取用户临时登录凭证code，发送到后端服务器换取openId
  • 在下单时，小程序需要将购买的商品Id，商品数量，以及用户的openId传送到服务器
  • 服务器在接收到商品Id、商品数量、openId后，生成服务期订单数据，同时经过一定的签名算法，向微信支付发送请求，获取预付单信息(prepay_id)，同时将获取的数据再次进行相应规则的签名，向小程序端响应必要的信息
  • 小程序端在获取对应的参数后，调用wx.requestPayment()发起微信支付，唤醒支付工作台，进行支付
  • 接下来的一些列操作都是由用户来操作的包括了微信支付密码，指纹等验证，确认支付之后执行鉴权调起支付
  • 鉴权调起支付：在微信后台进行鉴权，微信后台直接返回给前端支付的结果，前端收到返回数据后对支付结果进行展示
  • 推送支付结果：微信后台在给前端返回支付的结果后，也会向后台也返回一个支付结果，后台通过这个支付结果来更新订单的状态

微信登录流程 ​

  1. 调用 uni.getUserProfile 方法，获取用户信息
  2. 调用 uni.login 方法，获取微信用户登录凭证
  3. 调用后台 api 登录接口，传入获取微信用户信息进行登录
  4. 登录成功后获取 token，持久化到本地

uniapp 页面间通信 ​

  1. 利用 url 传参进行通信
  2. uni.$emit() 和 uni.$on() 进行通信
  3. EventBus 进行通信
  4. 全局变量进行通信

微信小程序页面跳转方法 ​

  • wx.navigateTo()：保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面
  • wx.redirectTo()：关闭当前页面，跳转到新的页面（类似重定向）。但是不允许跳转到 tabbar 页面
  • wx.switchTab()：跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
  • wx.navigateBack()：关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层
  • wx.reLaunch()：关闭所有页面，打开到应用内的某个页面

Released under the MIT License.

Copyright © 2022-present Fan