微信公众号开发

网页授权登录

1. 把 Login.php 放到 /extend/library/wechat/ 目录下

2. 需要实现如下接口

• jumpLogin 跳转登录
• login 网页code授权
• getUser 获取用户信息

// 跳转登录
public function jumpLogin() {
    $appid = env('WEIXIN.APPID');
    $appsenret = env('WEIXIN.APPSENRET');

    $h5 = new Login($appid, $appsenret);
    $url = $h5->buildAuthorizeUrl('snsapi_userinfo', url('/api/user/login', [], false, true)->build()); // thinkphp8 
    // 授权地址示例: http://192.168.10.67:5173/api/user/login

    return redirect($url); // 重定向
}

// 通过openid登录
public function login(string $code)
{
    $appid = env('WEIXIN.APPID');
    $appsenret = env('WEIXIN.APPSENRET');

    $h5 = new \library\wechat\Login($appid, $appsenret);
    list($access_token, $openid) = $h5->code2accessToken($code);
    $wxuser = $h5->getUserInfo($access_token, $openid);

    $user = UserModel::where('openid', $openid)->find();
    if (!$user) { // 不存在, 创建新用户
        $user = new UserModel();
        $user->setAttr('openid', $openid);
        $user->setAttr('nickname', $wxuser['nickname']);
        $user->setAttr('avatar', $wxuser['headimgurl']);
        $user->save();
    }

    session('uid', $user->id);
}


// 获取用户信息
public function getUser()
{
    // 此处通过 session 获取用户id 查询用户信息返回
}

建议写一个 Base.php 的基类, 所有控制器继承它。如果在基类初始化时无法获取 session 则返回特殊业务代码， 用于前端判断并跳转授权

• BaseController.php 👈🏻 一个简单的基类样例示例

3. 前端部分

// 程序入口, 如uniapp的 onLaunch
getUser()
    .then((res) => {
        if (res.code == 4008) { // 用户未登录
            window.location.href = '/api/user/jumpLogin' // 跳转授权登录
        }
    })

建议有条件的把 if (res.code == 4008) { window.location.href = '/api/user/jumpLogin' } 这段逻辑放到请求库响应拦截器中，更优雅一点~

分享卡片

转发朋友, 转发朋友圈

这里的教程以 thinkPHP 为例, 其他框架自行灵活更改变动

1. 把 Sign.php 放到 /extend/library/wechat/ 目录下
2. 写一个签名接口，代码如下

    $appid = env('WEIXIN.APPID'); // 你的公众号 appid
    $appsenret = env('WEIXIN.APPSENRET'); // 你的公众号 appsenret

    $sign = new Sign($appid, $appsenret);
    $data = $sign->signtrue('https://jzx****xhd.ioi.plus/h5/'); // 被分享的网址,  可以从前端传过来  或者写死,  亦或者从 $_SERVER['HTTP_REFERER'] 获得请求接口的页面地址
    $data['title'] = '金钻习酒习酒美食商家评选活动'; // 分享标题
    $data['desc'] = '本次美食商家评选活动旨在推动餐饮行业的进步，挖掘优质、干净的餐饮商家并提升其品牌知名度，同时为广大消费者提供一个分享美食、发现美食的平台。'; // 分享描述
    $data['imgUrl'] = 'https://jzxjm****xhd.ioi.plus/static/share.jpg'; // 分享图片
    return resp_success($data, 'OK'); // 响应

3. 前端引入 jssdk 并配置分享信息

import wx from 'weixin-js-sdk' // 此处需要安装 jssdk 包: npm install weixin-js-sdk -S

// 签名
sign()
    .then((data) => {
        const { appid, timestamp, noncestr, signature } = data
        
        wx.config({
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: appid, // 必填，公众号的唯一标识
            timestamp:timestamp, // 必填，生成签名的时间戳
            nonceStr: noncestr, // 必填，生成签名的随机串
            signature: signature,// 必填，签名
            jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData'] // 必填，需要使用的JS接口列表
        });

        wx.ready(function () {   //需在用户可能点击分享按钮前就先调用
            wx.updateAppMessageShareData({
                title: data.title, // 分享标题
                desc: data.desc, // 分享描述
                link: data.link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                imgUrl: data.imgUrl, // 分享图标
            })
            wx.updateTimelineShareData({
                title: data.title, // 分享标题
                link: data.link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                imgUrl: data.imgUrl, // 分享图标
            })
        });
    })

参考 Uniapp使用示例

每个页面可单独配置，不一定要全部一样写死

4. 制作链接二维码, 微信扫描打开分享即可看到卡片样式

直接打开链接分享是不生效的!