小程序相关总结

1.怎样理解小程序的尺寸单位rpx?

2. 小程序是什么？

3.微信小程序的优缺点？

4. 小程序的生命周期是什么？生命周期都有哪些？以及生命周期执行顺序？

5.微信小程序登录流程

6.微信小程序支付流程

一、怎样理解小程序的尺寸单位rpx?

rpx 是可以根据屏幕宽度进行自适应的，是响应式单位
不管手机屏幕宽度是多少，都会把这个宽度分成750份，其中的一份就是1rpx
如在iPhone 6上，屏幕宽度为375px,然后分成750份，即 375px = 750rpx, 1px = 2rpx　
我们开发时都是以750的基准，即750px = 750 rpx ,1px = 1rpx。也就是设计稿是多少px我们直接设置成多少rpx

二、小程序是什么？

小程序是一种无需安装即可使用的轻量级的应用程序

三、小程序的优缺点

优点：

近原生体验，体验比H5好
即用即走，零门槛访问，节省用户存储空间以及下载时间
开发成本低，一次开发即可覆盖IOS/Android 系统
借助微信社交链传播

缺点：

只能在微信平台
体积受限（主包上线2M,分包后总上限 20M）
本地存储仅仅10M

四、小程序的生命周期是什么？生命周期都有哪些？

　　小程序的生命周期指：小程序从启动到销毁的完整过程，包含应用、页面、组件三个层级的生命周期函数，具体如下

应用级（全局）生命周期（通过 App() 注册）
- onLaunch(options)
  - 小程序初始化完成时触发（仅执行1次）　
  - options 包含启动参数
  - 常用操作：获取用户信息、读取本地缓存、初始化云开发环境等等
- onShow(options)
  - 小程序启动、或者从后台 -> 前台时触发　　
  - 常用操作：刷新数据、检测登录状态、统计用户行为
- onHide()
  - 小程序从前台 -> 后台时触发
  - 常用操作：保存数据、暂停定时器、关闭连接　　
- onError(msg)　　
  - 小程序发生脚本错误或 API 调用报错时触发
  - 常用操作：错误日志上报、友好提示
- onPageNoFound(res)
  - 小程序打开不存在的页面时触发　　
  - 常用操作：跳转到首页或错误页　　　　　　
页面级生命周期（通过Page()注册）
- onLoad(query)
  - 页面首次加载时触发，一个页面只会调用一次
  - query接收页面路由参数　　
  - 常用操作：获取页面参数、请求数据、初始化页面状态等等
- onShow()
  - 页面显示/ 切入前台时触发（如：返回该页面）　
  - 常用操作：刷新页面数据、启动动画
- onReady()
  - 页面初次渲染完成时触发（执行1次）
  - 可操作DOM 或启动动画　　
  - 常用操作：获取DOM节点信息、初始化第三方组件
- onHide()　
  - 页面隐藏/切入后台时触发（如：跳转到其他页面）
  - 常用操作：暂停动画、保存页面状态等
- onUnload()
  - 页面卸载销毁时触发（如：调用wx.redirectTo 关闭当前页面）　
  - 常用操作：清理定时器、释放资源等
- onPullDownRefresh()
  - 用户下拉页面时触发
  - 常用操作：刷新页面数据
- onReachBottom()
  - 页面滚动到底部时触发
  - 常用操作：加载更多数据
- onShareAppMessage()
  - 用户点击右上角分享时触发
  - 常用操作：自定义分享内容　　　　　　　　　　　　　　　
- onRouteDone()
  - 路由动画完成时触发。（如：wx.navigateTo 页面推入后或 wx.navigateBack 页面完全恢复时触发）　　　　　　　　　
组件生命周期（通过Component()注册）
- created
  - 组件实例创建完成时触发，不可操作DOM　　
- attached
  - 组件实例进入页面节点树时触发（类似onLoad）　　
- ready
  - 组件初次渲染完成时触发（类似onReady）
- move
  - 组件实例被移动到节点树另一个位置时触发　　　　　　
- detached　
  - 组件实例被从页面节点树移除时触发
- error
  - 每当组件方法抛出错误时触发

　　小程序生命周期执行顺序遵循应用级 -> 页面级 -> 组件级的层级递进关系

App 生命周期

冷启动（首次打开或销毁后重启）

onLaunch -> onShow

热启动（后台切前台，未销毁）
- onShow　　
切后台
- onHide

Page页面级生命周期
- 首次加载： onLoad -> onShow -> onReady　　
- 跳转：
  - wx.navigateTo:
    - 原页面：onHide
    - 新页面触发：onLoad -> onShow -> onReady
  - wx.redirectTo
    - 原页面触发： onUnload
    - 新页面触发：onLoad -> onShow -> onReady
  - wx.navigateBack
    - 原页面触发： onUnload
    - 新页面触发： onShow　　
  - wx.switchTab
    - 原页面触发：onHide
    - 新页面触发： onShow　
Component 组件生命周期　
- 组件加载流程： created -> attached -> ready
- 组件销毁触发：detached

　综上：冷启动触发的生命周期如下：

- 首先触发 App 应用级的: onLaunch -> onShow
- 接下来触发页面级的周期函数：首页onLoad -> 首页onShow -> 首页onReady
- 跳转二级页面时触发周期函数依次如下：首页 onHide -> 二级页 onLoad -> 二级页onShow -> 二级页 onReady
- 用户再次返回首页时：二级页 onUnload -> 首页 onShow

五、微信小程序登录流程

1.调用 wx.login()获取到微信登录凭证code（临时的，有效期5分钟）

2. 把code 发送给后端（自己公司的后端）

wx.login({
   success: (res) =>{
        if(res.code) {
              sendCodeToServer(res.code) // 发送code给后端
        }
    } 
})

3. 后端携带 code + appid + appsecret 信息请求微信接口，微信会返回openid(用户唯一id)　、seesion_key(会话密钥)
4. 后端会根据 openid 和自己业务用户id进行绑定，然后生成自己业务的token (如 JWT)返回给前端

5.前端拿到token后存储起来

wx.setStorageSync('token',data.access_token)

6. 后续请求时，会带上token，后端校验有效性

六、微信小程序支付流程

首先（把 orderId、微信appid等信息传给后端）调用后端接口获取支付配置信息，

然后拉起微信小程序支付，通过wx.requestPayment()并将配置参数传入

wx.requestPayment({
  // 时间戳
  timeStamp: '',
  // 随机字符串
  nonceStr: '',
  // 统一下单接口返回的 prepay_id 参数值
  package: '',
  // 签名类型
  signType: '',
  // 签名
  paySign: '',
  // 调用成功回调
  success () {},
  // 失败回调
  fail () {}
})

用户支付完成（成功/失败）的结果，会回调对应的回调函数（success/fail）

七、

八、

九、

posted @ 2025-06-12 11:17 yangkangkang 阅读(36) 评论(0) 收藏举报

刷新页面返回顶部

yangkangkang

小程序相关总结

公告