目录
后续 补充 (☆)
前言
因为要完成微信登录功能,这有两种选择,第一种就是使用微信号,昵称去登录;第二种就是使用手机号登录
前提
要使用手机号登录的前提就是首先,你的appid是企业注册的,其次就是,要让管理微信公众平台appid的管理员把你的微信号添加到项目成员 ,
由于业务的需求,我这边目前只能选择使用 手机号登录,查看官方文档
可知要使用 getPhoneNumber
但前提是要 获取 code
我们现在postman里面发送请求,看看结果
postman 第一步
网址
https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET
appid: 跟
AppSecret(小程序密钥) 就不需要给大家介绍了吧 |
下面这张图,相信大家看着也会 ,然后点击 send 获取到token
上面既然能获取到token了,那下面我们就获取手机号
网址
https://api.weixin.qq.com/wxa/business/getuserphonenumber?access_token=ACCESS_TOKEN
这里的code的获取就是
<button class="login-btn" open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber">一键登录</button>
// 上面定义一个button事件,官网说,获取手机号只能通过定义button事件
// 在methods中定义
onGetPhoneNumber(e) {
if (e.detail.errMsg == "getPhoneNumber:fail user deny") { //用户决绝授权
//拒绝授权后弹出一些提示
} else { //允许授权
console.log(e);
}
}
e打印出来的结果就是:
效果图
总结
只要使用公司注册,认证好的 appid 以及把自己的微信加入 项目成员,加入成功后吗,还有让管理员开始获取手机的设置,就可以了,就这么简单
添加
代码 后续 看 后续补充代码
<button class="login-btn" open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber">
一键登录
</button>
export default {
methods:{
// 手机号
async onGetPhoneNumber(e) {
console.log(e, '打印手机号信息');
if (e.detail.errMsg == "getPhoneNumber:ok") {
this.errMsg = e.detail.errMsg
const {
data: {
obj,
resCode
}
} = await uni.$http.post('/uniapp/member/wechatLogin', {
code: e.detail.code
})
console.log('手机号的token:', resCode, obj.memberToken, '手机号');
// this.updateToken(obj.memberToken) 存token
if ('00100000' !== resCode) return uni.$showMsg()
}
}
}
}
后续 补充
完整代码
js文件 因为后续 支付 需要使用到 code 因此封装了一个方法
function code() {
let codePay = new Promise((resolve, reject) => {
uni.login({
provider: 'weixin',
success: res => {
resolve(res.code)
},
fail: (err) => {
reject(err)
}
})
})
return codePay
}
module.exports = {
code
}
<template>
<view>
<button class="login-btn" open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber">
一键登录
</button>
</view>
</template>
<script>
import {
code
} from '@/common/userInfo.js'
export default {
name: "my-login",
data() {
return {
code: '',
errMsg: '',
appid: '',
};
},
async mounted() {
this.code = await code().then(data => {
return data
})
console.log(this.code, '一进来就获取code');
},
methods: {
// 手机号
async onGetPhoneNumber(e) {
let accountInfo = uni.getAccountInfoSync();
this.appid = accountInfo.miniProgram.appId; // 小程序 appId
console.log(this.appid);
if (e.detail.errMsg == "getPhoneNumber:ok") {
this.errMsg = e.detail.errMsg
const {
data: {
obj,
resCode
}
} = await uni.$http.post('/uniapp/member/wechatLogin', {
code: e.detail.code,
appId: this.appid,
openIdCode: this.code
})
console.log('wechatLogin 一键手机号登录 手机号的token:', resCode);
// this.updateToken(obj.memberToken)
if ('00100000' !== resCode) return uni.$showMsg('登录失败')
}
}
}
}
</script>
<style lang="scss" scoped>
// background-color: #030917;
.login-btn {
position: fixed;
bottom: 10%;
width: 510rpx;
margin: 0 118rpx 0 122rpx;
background-color: #427cb2;
color: #fff;
}
</style>