uniapp实现微信网站应用二维码扫码登陆

在开放平台申请网页应用我就不在这里写了

 这里使用的是官方的第二种方法：内嵌二维码

样式：

<div class="login-list" v-if="phoneStatus">
                    <div>
                        <span>登录/注册</span>
                        <i @click="close"></i>
                    </div>
                    <ul>
                        <h4>关注后即可登录</h4>
                        <p>扫码即注册，登录更便捷</p>
                        <li>
                            <i><img src="/static/wx.png">微信扫码登录</i>
                            <div id="login_container">
                                <!-- <img src="/static/login-ewm.png"> -->
                            </div>
                        </li>
                    </ul>
                    <b>
                        <!--         <checkbox value="" />
                        <span>已阅读并同意</span>
                        <a>《用户协议》</a> -->
                    </b>
                </div>

 

直接放uniapp中js代码：

getPCwxcode() {
                // 设置微信二维码函数
                const sscript = document.createElement('script')
                script.type = 'text/javascript'
                script.src = 'https://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js'
                const uniwxe = document.body.appendChild(script)
                const url = 'http://xx.xxxxxx.cn/#/'; //放自己网页应用中填写的域名
                uniwxe.onload = () => {
                    const obj = new WxLogin({
                        id: 'login_container', // 需要显示的容器id
                        appid: 'wx0000000000', // appid wx*******
                        scope: 'snsapi_login', // 网页默认即可
                        redirect_uri: encodeURIComponent(url),
                        state: Math.ceil(Math.random() * 1000), // 可设置为简单的随机数加session用来校验
                        style: 'black', // 提供"black"、"white"可选。二维码的样式
                        // href: "http://xx.xxxxxx.cn/wxlogin.css"  一看就能明白样式需要转码
                        href:"data:text/css;base64,LmltcG93ZXJCb3ggLnFyY29kZSB7d2lkdGg6IDIwMHB4O30NCi5pbXBvd2VyQm94IC50aXRsZSB7ZGlzcGxheTogbm9uZTt9DQouaW1wb3dlckJveCAuaW5mbyB7d2lkdGg6IDIwMHB4O30NCi5zdGF0dXNfaWNvbiB7ZGlzcGxheTpub25lfQ0KLmltcG93ZXJCb3ggLnN0YXR1cyB7dGV4dC1hbGlnbjogY2VudGVyO30="//data-url
                        
                    })
                }
            },

1：调用上面的代码，返回二维码，请求回来二维码放到指定的id上，

2：用户扫码确认后，用户扫码之后回重定向到自己填写的redirect_uri中，code就在域名后面，拿到code请求自己后端的接口，后面的工作就交给后端了，返回用户信息或者token就结束了

后端：放一段代码做参考(PHP)

//    PC 网站扫码

    public function loginPc($code)
    {
        $token_url = 'https://api.weixin.qq.com/sns/oauth2/access_token?appid=' . $this->wx_config['kf_appid'] . '&secret=' . $this->wx_config['kf_appseceret'] . '&code=' . $code . '&grant_type=authorization_code';
        //获取token，获取access_token
        $token = json_decode(curlGet($token_url), true);

        if (!isset($token['refresh_token'])) {
            $this->error('错误,请重新尝试');
        }

        $access_token_url = 'https://api.weixin.qq.com/sns/oauth2/refresh_token?appid=' . $this->wx_config['kf_appid'] . '&grant_type=refresh_token&refresh_token=' . $token['refresh_token'];
        //获取access_token ，获取微信的个人信息
        $access_token = json_decode(curlGet($access_token_url), true);

        $user_info_url = 'https://api.weixin.qq.com/sns/userinfo?access_token=' . $access_token['access_token'] . '&openid=' . $access_token['openid'] . '&lang=zh_CN';
        //获取用户信息
        $userinfo = json_decode(curlGet($user_info_url), true);

        if (empty($userinfo)) {
            $this->error('授权错误,请重试');
        }


        $openid = $userinfo['openid'];

        $userid = (new User())
            ->where('openid', $openid)->value('id');

        if (!$userid) {
            $inarr = [
                'group_id' => 1,
                'username' => $userinfo['nickname'],
                "openid" => $userinfo['openid'],
                "unionid" => $userinfo['unionid'],
                'nickname' => $userinfo['nickname'],
                "avatar"  =>  $userinfo['headimgurl'],
                'password' => md5("23423ddf" . mt_rand(1, 1333)),
                'salt' => mt_rand(1, 1000),
                'jointime' => time(),
                'status' => 'normal',
            ];
            $user_id = (new User())->insertGetId($inarr);
            $this->auth->direct($user_id);
        } else {
            $this->auth->direct($userid);
        }
        $this->success('success', $this->auth->getUserinfo());
    }