前言
公号 关注👉程序员王天 持续分享前端技术
大家好,我是王天,做uniapp三年了,这一路踩坑无数,但也收获满满。尤其是微信小程序,花了我不少心思。
今天分享的是,在使用uniapp开发中,积累的一些微信业务组件,希望能帮助到大家。
背景
uniapp很多小程序组件库、功能丰富,可以帮我们快速做开发。但是呢,这些组件库,缺了点儿跟微信业务直接相关的、比如怎么在微信里收钱、怎么让用户登录,还有怎么发订阅消息给他们。这些业务功能,组件库里都没有现成的。
所以啊,我自己动手,开发了一套微信业务组件合集,起了名字叫【uboxui】,专门解决这些问题。这样大家在做微信小程序的时候,就能更方便、更快捷地搞定这些业务上的事儿了。
功能合集
以下内容重点讲解实现思路,完整代码文末下载哈,项目已发布线上,扫码可查看。
因包含支付需要企业认证花300才能上线,无奈先下线了,等王天小程序有营收了 再认证😫
微信小程序登录
运行效果
项目行效果如下,完整代码在文末
小程序登录本质是获取用户openid,流程可大致分为4部分,其中前端需要做如下:
前端负责部分
- 调用 wx.login API 获取 code 。
- 将 code 发送给后端。
- 接收后端返回的登录态标识(如 token)。
- 将登录态标识存储在本地。
- 在后续请求中携带登录态标识进行身份验证。
- 维护登录态,如检查登录态是否过期并重新发起登录请求。
小程序完整登录流程
1、前端发起登录请求
- 用户点击登录按钮。
- 前端调用微信小程序的 wx.login API 获取临时的登录凭证 code 。
- 前端将 code 发送给后端。
2、后端处理登录凭证
- 后端接收到前端发送的 code 。
- 后端使用 code 向微信服务器请求 session_key 和 openid 。
- 微信服务器返回 session_key 和 openid 给后端。
- 后端将 openid 作为用户的唯一标识,与自身的用户系统关联或创建新用户。
- (可选)后端生成自定义的登录态标识(如 token),并返回给前端。
3、前端存储登录态标识
- 前端接收到后端返回的登录态标识(如 token)。
- 前端将登录态标识存储在本地(如使用 wx.setStorageSync )。
- 在后续的请求中,前端携带登录态标识(如放在请求头中)进行身份验证。
4、前端维护登录态
- 在用户每次使用小程序时,前端检查本地是否存储了有效的登录态标识。
- 如果登录态标识过期或不存在,前端重复步骤 1 重新发起登录请求。
获取微信昵称、头像
运行效果
项目行效果如下,完整代码在文末
获取微信用户头像昵称,需要用到微信开放能力
头像选择
头像获取需要配置 button组件的 open-type设置为 chooseAvatar,当用户选择需要使用的头像之后,可以通过 bindchooseavatar 事件回调获取到头像信息的临时路径
昵称获取
获取用户昵称,需要将 input组件type类型设置nickname,用户输入内容时,会在键盘上方展示昵称
一键获取手机号
运行效果
项目行效果如下,完整代码在文末
开发步骤:
前置条件!认证小程序账号才有获取手机号能力
- 设置项目 appid
- Button 配置开放能力 为getnumbetphone
- 点击button,获取code口令
- 调用微信开放api解码手机号
注意!微信开放api为服务端接口,需要后端服务调用,熟悉node的前端小伙伴也可以搭建一个本地node做测试,我这里用的uniapp的云开发免环境配置比较方便。
微信支付基本流程
运行效果
项目行效果如下,完整代码在文末
环境配置
- 1、微信公众平台(小程序、公众号主体必须是企业认证)
- 2、开通微信商户平台 (收款平台),关联小程序appid
支付步骤
- ⚠[前置条件]——必须先微信登录,获取用户openid
- ① 生成支付参数;以服务端方式调用微信api生成支付参数
- ② 拉起微信支付弹框;前端接收到支付参数,调用微信支付
- ③ 监听支付状态、success / error
微信订阅消息推送
本项目微信订阅后端是通过云函数,建议根据自身项目切换后端服务。
运行效果
项目行效果如下,完整代码在文末
步骤
- 开通订阅消息、选择模板
- 使用uniclound 订阅消息插件,推送消息
- 前端先订阅
- 后端云函数安装 订阅消息插件+token统一管理模块
注意!测试阶段将 微信ip白名单关闭,否则无法推送
项目源码
小程序插件已经发布到uniapp插件市场,有兴趣的朋友可以下载了解下哈
👉uboxui 一个功能丰富的小程序业务插件库 - DCloud 插件市场
如有帮助,欢迎点赞支持哈,对项目感兴趣,添加王天微信哈 wangtian3111