微信小程序登录(微信小程序从0搭建)_微信小程序 登录

1. 微信小程序登录

我们在day01整体介绍养老项目的时候说过，养老项目分为两端，分别是管理后台和小程序端（家人端），我们day01和day02开发的功能都属于管理端，今天我们先开发一部分小程序端的功能。

我们要开发的第一个功能是预约功能，如果有客户对养老院比较感兴趣，也可以在小程序端发起预约参观，不过在发起预约的时候，我们需要获得到客户的手机号，需要用户登录后才能预约，所以在做预约功能之前，我们先来完成微信登录的功能。

1.1. 需求分析

原型PRD地址：Untitled Document

假如用户现在想要预约参观养老院，假如点击了参观预约按钮，则需要先登录后才能操作，效果如下

弹出弹窗，提示使用”微信快速登录”，用户可以选择使用微信登录，并授权获取用户的手机号

1.2. 小程序端环境搭建

1) 基础环境说明

在资料文件夹中找到”养老-小程序”的压缩包，解压到一个没有中文和空格的目录，在资料文件夹中找到”微信开发者工具安装包”安装到本地，也可以直接到官网下载，地址：微信开发者工具（稳定版 Stable Build）下载地址与更新日志 | 微信开放文档

安装成功以后，可以点击”+”号，找到刚才解压的小程序代码的目录：

所以，现在大家需要每人注册一个微信小程序的测试号

2) 微信小程序测试申请

1. 申请小程序测试号
   打开手机微信，扫描二维码，申请小程序测试号微信公众平台

   

2. 扫码登录
   注册成功以后，打开以下页面进行扫码登录微信公众平台

   

扫码之后，在手机中选择小程序测试号

1. 修改小程序环境的APPID（不正确再修改）
   使用微信开发者工具打开项目在小程序代码
   然后打开 -->详情-->修改APPID,改为自己申请的测试号APPID

   

1.3. 实现思路分析

我们的主要实现思路可以根据微信小程序开放者平台给提供的实现思路，链接和流程如下：

微信小程序登录，官方文档：

小程序登录 | 微信开放文档

登录流程图

注意点：

• 前端在小程序中集成微信相关依赖，当用户请求登录的同时，调用wx.login() 获取 临时登录凭证code ，并回传到开发者服务器。

• 开发者服务器可以根据用户标识来生成自定义登录态，用于后续业务逻辑中前后端交互时识别用户身份。

• • 自定义登录态：后台服务器验证用户成功后，使用JWT生成一个token返回给前端，前端负责把token存储到小程序端的storage中，以后，从小程序中发起其他请求的时候，携带该token到后台验证

    

当前业务具体实现流程：

1.4. 表结构设计

从小程序端登录的用户主要有两类，第一类是参观预约的用户，第二类是，老人的家人（子女），方便查看老人信息、给老人下单、查看账单、查看合同等服务。

如果是老人的家人，需要跟入住的老人进行绑定，方便后期的更多服务，所以，在小程序端登录的用户，我们需要保存下来，保存到一张表中（客户表）

基于我们刚才的分析，在用户表中需要出现的字段有：

主键、手机号、名称、头像、微信OpenID（个人微信唯一ID）、性别

然后再加上必要的字段：

创建时间、更新时间、创建人、更新人、备注

如果还不太合适，可以进行手动修复，最终的sql如下：

CREATE TABLE "member" (
  "id" bigint NOT NULL AUTO_INCREMENT COMMENT '主键',
  "phone" varchar(20) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL COMMENT '手机号',
  "name" varchar(100) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci DEFAULT NULL COMMENT '名称',
  "avatar" varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci DEFAULT NULL COMMENT '头像',
  "open_id" varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci DEFAULT NULL COMMENT 'OpenID',
  "gender" int DEFAULT NULL COMMENT '性别(0:男，1:女)',
  "create_time" timestamp NULL DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',
  "update_time" timestamp NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '更新时间',
  "create_by" bigint DEFAULT NULL COMMENT '创建人',
  "update_by" bigint DEFAULT NULL COMMENT '更新人',
  "remark" varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci DEFAULT NULL COMMENT '备注',
  PRIMARY KEY ("id") USING BTREE
) ENGINE=InnoDB AUTO_INCREMENT=4 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci ROW_FORMAT=DYNAMIC;

根据以上表结构，对应的实体类，如下：

package com.zzyl.entity;
 
import com.zzyl.base.BaseEntity;
import lombok.AllArgsConstructor;
import lombok.Builder;
import lombok.Data;
import lombok.NoArgsConstructor;
 
 
@Data
@AllArgsConstructor
@NoArgsConstructor
@Builder
public class Member extends BaseEntity {
 
    /**
     * 手机号
     */
    private String phone;
 
    /**
     * 名称
     */
    private String name;
 
    /**
     * 头像
     */
    private String avatar;
 
    /**
     * OpenID
     */
    private String openId;
 
    /**
     * 性别
     */
    private int gender;
 
}

1.5. 接口设计

这个接口跟我们平时开发的接口略有不同，这个需要参考微信开发者平台提供的流程来开发。

目前，小程序的代码已经开发完了，我们需要在后台提供接口就可以了

• 接口路径（已固定）：/customer/user/login

• 请求方式（已固定）：POST

• 请求参数：（已固定）

{
  "code": "0e36jkGa1ercRF0Fu4Ia1V3fPD06jkGW", //临时登录凭证code
  "nickName": "微信用户",
  "phoneCode": "13fe315872a4fb9ed3deee1e5909d5af60dfce7911013436fddcfe13f55ecad3"
}

以上三个参数，都是前端开发人员调用wx.login()方法返回的数据

• code：临时登录凭证code
• nickName：微信用户昵称（现在微信统一返回为：微信用户）
• phoneCode：详细用户信息code，后台根据此code可以获取用户手机号

• 响应示例（已固定）

{
  "code": 200,
  "msg": "操作成功",
  "data": {
    "token": "eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiLlpb3mn7_lvIDoirE4OTE1IiwiZXhwIjoxNDY1MjI3MTMyOCwidXNlcmlkIjoxfQ.nB6ElZbUywh-yiHDNMJS8WqUpcLWCszVdvAMfySFxIM",
    "nickName": "好柿开花8915"
  },
  "operationTime": null
}

1.6. 功能实现

1.6.1. 登录功能开发

1) 接口定义

/**
 * <p>
 * 用户管理
 */
@Slf4j
@Api(tags = "客户管理")
@RestController
@RequestMapping("/customer/user")
public class CustomerUserController {
 
    @PostMapping("/login")
    @ApiOperation("微信小程序登录")
    @ApiImplicitParams(
            @ApiImplicitParam(name = "userLoginRequestDto", value = "用户登录信息")
    )
    public ResponseResult<LoginVo> login(@RequestBody UserLoginRequestDto userLoginRequestDto){
        
        return null;
    }
 
}

接收参数类型UserLoginRequestDto

package com.zzyl.dto;
 
import io.swagger.annotations.ApiModelProperty;
import lombok.Data;
 
/**
 * C端用户登录
 */
@Data
public class UserLoginRequestDto {
 
    @ApiModelProperty("昵称")
    private String nickName;
 
    @ApiModelProperty("登录临时凭证")
    private String code;
 
    @ApiModelProperty("手机号临时凭证")
    private String phoneCode;
}

返回类型：LoginVo

@Data
@ApiModel(value = "登录对象")
public class LoginVo {
 
    @ApiModelProperty(value = "JWT token")
    private String token;
 
    @ApiModelProperty(value = "昵称")
    private String nickName;
}

2) mapper编写

在整个登录的过程中，会涉及到用户的新增、更新、查询，所以我们需要定义三个方法，代码如下：

 
package com.zzyl.mapper;
 
import com.zzyl.entity.Member;
import org.apache.ibatis.annotations.Mapper;
 
/**
 * 会员Mapper接口
 */
@Mapper
public interface MemberMapper {
 
    /**
     * 新增一条数据，返回受影响的行数
     *
     * @param member 用户对象
     * @return 新增数据的条数
     */
    int save(Member member);
 
    /**
     * 根据主键id更新数据，更新时对参数是否为空做校验
     *
     * @param member 用户对象
     * @return 更新数据的条数
     */
    void update(Member member);
 
    /**
     * 根据openId查询数据
     *
     * @param openId 微信唯一标识符
     * @return 用户数据
     */
    Member getByOpenId(String openId);
 
}
 
 

MemberMapper.xml映射文件：

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
<mapper namespace="com.zzyl.mapper.MemberMapper">
    <resultMap id="BaseResultMap" type="com.zzyl.entity.Member">
        <id column="id" property="id"/>
        <result column="phone" property="phone"/>
        <result column="name" property="name"/>
        <result column="avatar" property="avatar"/>
        <result column="open_id" property="openId"/>
        <result column="gender" property="gender"/>
        <result column="create_by" property="createBy"/>
        <result column="update_by" property="updateBy"/>
        <result column="remark" property="remark"/>
        <result column="create_time" property="createTime"/>
        <result column="update_time" property="updateTime"/>
    </resultMap>
 
    <sql id="Base_Column_List">
        id, phone, name, avatar, open_id, gender, create_by, update_by,create_time
    </sql>
 
    <!-- 新增一条数据 -->
    <insert id="save" parameterType="com.zzyl.entity.Member" useGeneratedKeys="true" keyProperty="id">
        INSERT INTO member (phone, name, avatar, open_id, gender, create_time, update_time, create_by, update_by, remark)
        VALUES (#{phone}, #{name}, #{avatar}, #{openId}, #{gender}, #{createTime}, #{updateTime}, #{createBy}, #{updateBy}, #{remark})
    </insert>
 
    <!-- 根据主键id更新数据，更新时对参数是否为空做校验 -->
    <update id="update" parameterType="com.zzyl.entity.Member" useGeneratedKeys="true" keyProperty="id">
        UPDATE member
        <set>
            <if test="phone != null and phone.trim() ne ''">phone = #{phone},</if>
            <if test="name != null and name.trim() ne ''">name = #{name},</if>
            <if test="avatar != null and avatar.trim() ne ''">avatar = #{avatar},</if>
            <if test="openId != null and openId.trim() ne ''">open_id = #{openId},</if>
            <if test="gender != null">gender = #{gender},</if>
            <if test="updateTime != null">update_time = #{updateTime},</if>
            <if test="updateBy != null">update_by = #{updateBy},</if>
            <if test="remark != null and remark.trim() ne ''">remark = #{remark},</if>
        </set>
        WHERE id = #{id}
    </update>
 
    <!-- 根据open_id查询数据 -->
    <select id="getByOpenId" resultMap="BaseResultMap" parameterType="java.lang.String">
        SELECT <include refid="Base_Column_List"/>
        FROM member
        WHERE open_id = #{openId}
    </select>
 
</mapper>

可借助ChatGPT完成Mapper文件的生成，查看记录：【wpsshop】