【实战系列】30分钟开发微信小程序登录&注册&绑定功能

今天分享的就是前几天我们预告的微信商城小程序实战项目分享系列，项目最终完成后将拥有一套较为完整的微信商城系统项目源码，为后续三开、项目复制等能够提供很好的支持。

另外需要说明的是该系列不会事无巨细的将100%的代码都分享清楚，但是提供源码下载和问题交流，有其他需要了解的可以也评论、留言私信交流~

本次分享的主要是基于wxapp-mall+BuildAdmin进行微信小程序登录、注册和绑定功能开发，其他功能模块后续陆续择重分享~

项目架构介绍

经过个人考虑这次项目主要使用前期分享的开源项目直接搭建：

开源项目wxapp-mall
开源项目BuildAdmin

这两个项目均是可以免费商用的，如果还有不了解的，可以点击下方项目介绍查看~ 【链接】

juejin.cn/post/752867...

juejin.cn/post/752422...

功能实现流程

整体架构

小程序登录

具体业务流程就不做过多介绍了，上述流程图已经比较清楚了，核心就是拿着微信授权信息去自己服务器做校验，然后生成必要的登录信息给到小程序端使用，而这里的授权信息就是微信登录拿到的code以及微信账户的openId。

小程序端实现

小程序端主要使用wx.login接口获取微信官方授权code码，然后用code去和服务端交互。小程序涉及代码：pages/component/user/ 请求微信code代码：

javascript 复制代码

  goUserCenter(){
    if(!this.data.isLogin){
      // 未登录
      wx.showLoading({
        title: '登录中...',
      })
      const that = this
      // 调用微信登录接口
      wx.login({
        success: (res) => {
          // 请求成功后不论结果如何，先隐藏加载弹窗
          wx.hideLoading()
          console.log("res.code = " , res.code)
        },
      })
    }else{
      // 如果已经登录了，可以跳转到个人中心去
    }
  }

使用code完成登录代码：

javascript 复制代码

// 发送 res.code 到后台换取 openId, sessionKey, unionId
const url =  constants.URL_LOGIN + constants.API_SUFFIX;
console.log(url);
wx.request({
url: url,
method: 'POST',
data: {
  "code" : res.code
},
success:(res) => {
  // 请求登录接口成功
  console.log('请求登录接口成功');
},fail(err){
  // 请求登录接口失败
  console.log('请求登录接口失败err=' + JSON.stringify(err))
}
})

服务端API实现

服务端在BuildAdmin框架基础上新建MiniUser.php类来对应小程序的用户操作，基于框架的一些现有接口，做登录功能开发。

因为微信账户的唯一标识是openid，所以我们在实现最终登录的时候，需要拿到微信的openid去和数据库做交互校验，因此还会涉及到微信登录的服务端接口jscode2session。

小程序登录接口文档地址：developers.weixin.qq.com/miniprogram...

php端调用接口实现登录的代码如下：

php 复制代码

/**
* wx小程序快速登录接口
* 
* 利用微信账号授权完成快速登录
*
* @return void
*/
public function fastLogin(){
if (!$this->request->isPost()) $this->error(__('Request error'));

// 获取微信用户code，用于交换openid，
$code = $this->request->post('code', '');
if(empty($code)){
    $this->customResponse("code不能为空", 3001);
    return;
}

self::exchangeData($code);
}

/**
 * 使用微信code获取openid
 *
 * @param [type] $code
 * @return void
 */
private function exchangeData($code){
    // 读取小程序相关配置信息
    $mini  = Config::get('mini');
    $appid = $mini['app_id'];
    $secret = $mini['app_secret'];
    $url = "https://api.weixin.qq.com/sns/jscode2session?appid=". $appid ."&secret=".     $secret ."&js_code=". $code ."&grant_type=authorization_code";

    // 使用 Guzzle 发起 GET 请求
    $client = new Client();
    try{
        $response = $client->get($url);
        $body = $response->getBody()->getContents();

        // 检查响应是否为空
        if (empty($body)) {
            $this->customResponse('微信信息获取失败~');
            return;
        }

        $data = json_decode($body, true);
        self::handleWX($data);
        
    } catch (\GuzzleHttp\Exception\RequestException $e) {
        // 处理请求异常
        $this -> customResponse("请求异常：" . $e->getMessage());
    } catch (\Exception $e) {
        // 处理其他异常
        $this -> customResponse("服务异常：" . $e->getMessage());
    }
}

/**
 * 检测用户是否已经注册存在
 */
private function checkUser($openid): bool
{
    $cond = [
        'wx_open_id'    => $openid,
        'status'        => 'enable',
    ];
    
    $user = User::where($cond)->find();
    if(!$user){
        // 用户不存在，则注册
        // 这里可以根据你想要的规则，生成默认的随机用户名啥的，但是需要注意的是一些非空字段
        // 针对非空字段可以考虑采取生成随机默认内容/改变数据字段非空属性去完成注册
        $register = $this->auth->register("yinian", '123456', "18888888889", "193@qq.com", wxopenid : $openid);
        return $register;
    }
    
    $this->auth->setModle($user);
    return $this->auth->loginSuccessful();
}

注：由于BuildAdmin框架用户表字段并未设计微信相关字段，所以这里我重新修改了表设计，增加了wx_open_id字段，用于存储和绑定微信账户和平台账户，从而实现快速登录功能。

小程序注册

这里的注册就直接使用微信账号快速登录注册了，如果是用户名密码注册，框架原本就自带了，这里不做过多说明，有兴趣的可以去看app\api\common\library\Auth.php类中register相关实现。实在不清楚的，欢迎留言、私信交流~

微信账号快速注册主要就是生成默认的平台账户信息+记录当前微信账户openid的一个过程，具体代码如下：

php 复制代码

// 直接使用BuildAdmin框架自带的register方法注册
$this->auth->register("yinian", '123456', "18888888889", "193@qq.com", wxopenid : $openid);

// 但是由于框架本身不支持openid注册，所以这里做了一个小扩展
// 给register方法新增一个openid的参数，并为其设置默认值，这样不影响其他调用
public function register(string $username, string $password = '', string $mobile = '', string $email = '', int $group = 1, array $extend = [], string $wxopenid = ""): bool
{

    // 保持上部分源码
    $data = [
        'group_id'        => $group,
        'nickname'        => $nickname,
        'join_ip'         => $ip,
        'join_time'       => $time,
        'last_login_ip'   => $ip,
        'last_login_time' => $time,
        'wx_open_id'      => $wxopenid, // 这里新增openid字段数据写入
        'status'          => 'enable', // 状态:enable=启用,disable=禁用,使用 string 存储可以自定义其他状态
    ];
   // 保持下部分代码不变
}

根据以上操作，注册功能就实现了，是不是很快很简单，这就是二开的方便之处~