开箱即用!uniapp微信开发合集,登录/支付/订阅消息,一键获取手机号/头像/昵称

2,435 阅读5分钟

前言

公号 关注👉程序员王天 持续分享前端技术

大家好,我是王天,做uniapp三年了,这一路踩坑无数,但也收获满满。尤其是微信小程序,花了我不少心思。

今天分享的是,在使用uniapp开发中,积累的一些微信业务组件,希望能帮助到大家。

背景

uniapp很多小程序组件库、功能丰富,可以帮我们快速做开发。但是呢,这些组件库,缺了点儿跟微信业务直接相关的、比如怎么在微信里收钱、怎么让用户登录,还有怎么发订阅消息给他们。这些业务功能,组件库里都没有现成的。

所以啊,我自己动手,开发了一套微信业务组件合集,起了名字叫【uboxui】,专门解决这些问题。这样大家在做微信小程序的时候,就能更方便、更快捷地搞定这些业务上的事儿了。

功能合集

以下内容重点讲解实现思路,完整代码文末下载哈,项目已发布线上,扫码可查看

因包含支付需要企业认证花300才能上线,无奈先下线了,等王天小程序有营收了 再认证😫

微信小程序登录

openid.jpg

运行效果

项目行效果如下,完整代码在文末 image.png

小程序登录本质是获取用户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 重新发起登录请求。

获取微信昵称、头像

运行效果

项目行效果如下,完整代码在文末 image.png 获取微信用户头像昵称,需要用到微信开放能力

头像选择

头像获取需要配置 button组件的 open-type设置为 chooseAvatar,当用户选择需要使用的头像之后,可以通过 bindchooseavatar 事件回调获取到头像信息的临时路径

昵称获取

获取用户昵称,需要将 input组件type类型设置nickname,用户输入内容时,会在键盘上方展示昵称

一键获取手机号

phone.jpg

运行效果

项目行效果如下,完整代码在文末 image.png

开发步骤:

前置条件!认证小程序账号才有获取手机号能力

  1. 设置项目 appid
  2. Button 配置开放能力 为getnumbetphone
  3. 点击button,获取code口令
  4. 调用微信开放api解码手机号

注意!微信开放api为服务端接口,需要后端服务调用,熟悉node的前端小伙伴也可以搭建一个本地node做测试,我这里用的uniapp的云开发免环境配置比较方便。

微信支付基本流程

运行效果

项目行效果如下,完整代码在文末 image.png

环境配置

  • 1、微信公众平台(小程序、公众号主体必须是企业认证)
  • 2、开通微信商户平台 (收款平台),关联小程序appid

支付步骤

  • ⚠[前置条件]——必须先微信登录,获取用户openid
  • ① 生成支付参数;以服务端方式调用微信api生成支付参数
  • ② 拉起微信支付弹框;前端接收到支付参数,调用微信支付
  • ③ 监听支付状态、success / error

微信订阅消息推送

本项目微信订阅后端是通过云函数,建议根据自身项目切换后端服务。

运行效果

项目行效果如下,完整代码在文末 image.png

步骤

  1. 开通订阅消息、选择模板
  2. 使用uniclound 订阅消息插件,推送消息
  3. 前端先订阅
  4. 后端云函数安装 订阅消息插件+token统一管理模块

注意!测试阶段将 微信ip白名单关闭,否则无法推送

项目源码

小程序插件已经发布到uniapp插件市场,有兴趣的朋友可以下载了解下哈

👉uboxui 一个功能丰富的小程序业务插件库 - DCloud 插件市场

如有帮助,欢迎点赞支持哈,对项目感兴趣,添加王天微信哈 wangtian3111