uniapp微信开发合集，登录-支付-订阅消息

#背景

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

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

#功能合集

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

#微信小程序登录

#运行效果

项目行效果如下，完整代码在文末

小程序登录本质是获取用户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，用户输入内容时，会在键盘上方展示昵称

#一键获取手机号

#运行效果

项目行效果如下，完整代码在文末

#开发步骤：

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

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

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

#微信支付基本流程

#运行效果

项目行效果如下，完整代码在文末

#环境配置

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

#支付步骤

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

#微信订阅消息推送

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

#运行效果

项目行效果如下，完整代码在文末

#步骤

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

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

#项目源码

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

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