Uni-App - 实战《悦读》之微信小程序端登录

1、在uniapp中配置小程序appid

打开 manifest.json ,找到微信小程序配置,填写 appid 重启应用;
// 您需要注册成为微信小程序开发者才能获取 appid

2、视图添加登录按钮

<template>
    <view>
        <!-- #ifdef MP-WEIXIN -->
        <button type="primary" open-type="getUserInfo" @getuserinfo="getUserInfo">使用微信登录</button>
        <!-- #endif -->
    </view>
</template>

3、js 核心代码

<script>
var _self, pageOptions, session_key, openid;
export default {
    data() {
        return {
            
        };
    },
    
    methods:{
        // #ifdef MP-WEIXIN
        getUserInfo : (info) => {
            info = info.mp.detail.userInfo;
            //userInfo {"nickName":"深海","gender":1,...avatarUrl":"https://7tdPvkPaJlkaLFFbLAffGVApluZdanLkDVplNlAhq1EJA/132"}
            // 与服务器交互将数据提交到服务端数据库
            uni.request({
                url: _self.apiServer+'member&m=login',
                method: 'POST',
                header: {'content-type' : "application/x-www-form-urlencoded"},
                data: {
                    openid : openid,
                    name   : info.nickName,
                    face   : info.avatarUrl,
                },
                success: res => {
                    console.log(res);
                    res = res.data;
                    // 登录成功 记录会员信息到本地
                    if(res.status == 'ok'){
                        uni.showToast({title:"登录成功"});
                        uni.setStorageSync('SUID' , res.data.u_id + '');
                        uni.setStorageSync('SRAND', res.data.u_random + '');
						uni.setStorageSync('SNAME', res.data.u_name + '');
                        uni.setStorageSync('SFACE', res.data.u_face + '');
                        // 跳转
                        if(pageOptions.backtype == 1){
                            uni.redirectTo({url:pageOptions.backpage});
                        }else{
                            uni.switchTab({url:pageOptions.backpage});
                        }
                    }else{
                        uni.showToast({title:res.data});
                    }
                },
                fail: (e) => {
                    console.log(JSON.stringify(e));
                }
            });
            
        },
        // #endif
    },
    onLoad:function(options){
        _self = this;
        pageOptions = options;
        // #ifdef MP-WEIXIN
        // 调用 微信 login 获取 code
        uni.login({
            success: (res) => {
                uni.request({
                    url:_self.apiServer+'member&m=codeToSession&code='+res.code,
                    success: (sessions) => {
                        // sessions.date 数据格式
                        // expires_in:7200
                        // openid:"oS6of0V0rdp9nY_BuvCnQUasOHYc"
                        // session_key:"87sE2oDD8lc+aDJj0tB6+g=="
                        // 获取 unionId
                        session_key = sessions.data.session_key;
                        openid      = sessions.data.openid;
                    },
                });
            }
        });
        // #endif
        //app 端微信登录
        // 手册位置 https://uniapp.dcloud.io/api/plugins/login?id=getuserinfo
        // #ifdef APP-PLUS
        uni.login({
            success: (res) => {
                // res 对象格式
                //{"code":"***",
                //"authResult":{
                    //"openid":"***",
                    //"scope":"snsapi_userinfo",
                    //"refresh_token":"**",
                    //"code":"****",
                    //"unionid":"***",
                    //"access_token":"***",
                    //"expires_in":7200
                //},
                //"errMsg":"login:ok"}
                uni.getUserInfo({
                    success: (info) => {
                        // info 对象格式
                        // {"errMsg":"getUserInfo:ok",
                        // "rawData":"...
                        // "userInfo":{
                            //"openId":"***",
                            //"nickName":"***",
                            //"gender":1,
                            // "city":"Xi'an",
                            // "province":"Shaanxi",
                            // "country":"China",
                            // "avatarUrl":"头像",
                            // "unionId":"oU5Yyt_agt547zWyA0v0eLfFPqxo"
                        //},"signature":""}
                        // 与服务器交互将数据提交到服务端数据库
                        uni.request({
                            url: _self.apiServer+'member&m=login',
                            method: 'POST',
                            header: {'content-type' : "application/x-www-form-urlencoded"},
                            data: {
                                openid : info.userInfo.openId,
                                name   : info.userInfo.nickName,
                                face   : info.userInfo.avatarUrl,
                            },
                            success: res => {
                                console.log(JSON.stringify(res));
                                res = res.data;
                                // 登录成功 记录会员信息到本地
                                if(res.status == 'ok'){
                                    uni.showToast({title:"登录成功"});
                                    uni.setStorageSync('SUID' , res.data.u_id + '');
                                    uni.setStorageSync('SRAND', res.data.u_random + '');
						                        uni.setStorageSync('SNAME', res.data.u_name + '');
                                    uni.setStorageSync('SFACE', res.data.u_face + '');
                                    // 跳转
                                    if(options.backtype == 1){
                                        uni.redirectTo({url:options.backpage});
                                    }else{
                                        uni.switchTab({url:options.backpage});
                                    }
                                }else{
                                    uni.showToast({title:res.data});
                                }
                            },
                            fail: (e) => {
                                console.log(JSON.stringify(e));
                            }
                        });
                    },
                    fail: () => {
                        uni.showToast({title:"微信登录授权失败"});
                    }
                })
            },
            fail: () => {
                uni.showToast({title:"微信登录授权失败"});
                uni.hideLoading();
            }
        })
        // #endif
    }
}
</script>
<style></style>

php 后端代码

<?php
namespace hsC;
class member{
    public function index(){
        
    }
    
    public function login(){
        
        //调用模型完成用户登录及注册
        $memberModel = new \hsModel\member();
        $memberModel->login();
        
    }
    
    public function codeToSession(){
        if(empty($_GET['code'])){exit(jsonCode('error', 'code error'));}
        $url =  "https://api.weixin.qq.com/sns/jscode2session?appid=".HS_APPID.
        "&secret=".HS_SECRET."&js_code=".$_GET['code']."&grant_type=authorization_code";
        $curl = new \hsTool\curl();
        $res = $curl->get($url);
        echo $res;
    }
}

猜你喜欢

转载自blog.csdn.net/Dream_Weave/article/details/87879154