uniapp 右上角登录_使用 UniApp 实现小程序的微信登录功能

1.微信登录思路：

在main.js 中封装公共函数，用于判断用户是否登录

在main.js 中分定义全局变量，用于存储接口地址

如果没有登录、则跳转至登录页面

进入登录页面

通过 wx.login 获取用户的 code

通过 code 获取用户的 SessionKey、OpenId 等信息【本应后台接口、但是此处使用js发送请求】

通过 openId 调用后台 Api 获取用户的信息

获取成功，则说明已经授权过了,直接登录成功

获取失败，则说明没有授权过，需要授权之后才能进行登录

用户点击页面微信登录按钮【 】

获取用户数据，然后调用后台接口写入数据库

2.在 applets/main.js 中添加如下

// 封装全局登录函数

// backpage, backtype 2个参数分别代表：

// backpage : 登录后返回的页面

// backtype : 打开页面的类型[1 : redirectTo 2 : switchTab]

Vue.prototype.checkLogin = function( backpage, backtype ){

// 同步获取本地数据(uid、随机码、用户名、头像)

var user_id = uni.getStorageSync('user_id');

var user_nu = uni.getStorageSync('user_nu');

var user_nm = uni.getStorageSync('user_nm');

var user_fa = uni.getStorageSync('user_fa');

if( user_id == '' || user_nu == '' || user_fa == ''){

// 使用重定向的方式跳转至登录页面

uni.redirectTo({url:'../login/login?backpage='+backpage+'&backtype='+backtype});

return false;

}

// 登录成功、已经登录返回数组 [用户 id, 用户随机码, 用户昵称, 用户表情]

return [user_id, user_nu, user_nm, user_fa];

}

// 定义一个全局的请求地址

Vue.prototype.apiServer = 'http://0608.cc/'

3.在 pages/login/login.vue 中添加如下

申请获取以下权限

获得你的公开信息(昵称，头像、地区等)

授权登录

export default {

data() {

return {

appid: '*************',

secret: '*************************',

code: '',

sessionKey: '',

openId: '',

userInfo: {

avatarUrl: '',

city: '',

country: '',

gender: 1,

language: '',

nickName: ''

},

pageOption: {}

};

},

methods: {

// 第一授权获取用户信息 ===》按钮触发

wxGetUserInfo() {

let _self = this;

// 1.获取用户的信息

uni.getUserInfo({

provider: 'weixin',

success: ( infoRes ) => {