流程：登录注册功能,通过uni.getUserProfile获取wxcode,通过wxcode传给后端获取openid,sessionkey,unionid。
通过<u-button type="success" open-type="getPhoneNumber" @getphonenumber="decryptPhoneNumber">一键登录</u-button>,
传到后端这些参数:
'session_key': $this.openidData.sessionKey,
'encryptedData': e.detail.encryptedData,
'iv': e.detail.iv
获取手机号,
再将手机号，unionid，openid传到后端进行登录
<template><view class="page"><!-- 自定义头部 navbar --><u-navbar back-icon-name="arrow-left" title=" " :custom-back="navbarBack":background="{ backgroundColor: 'rgba(0,0,0,0)' }" :border-bottom="false":is-back="pageStatus != 'home'"></u-navbar><!-- logo --><view class="logo-wrap" v-if="pageStatus == 'home' || pageStatus == 'getWxRole'"><image class="logo"src="xxxxxxxxxxxxxx/static/login/login_logo.png"></image><view class="app-name">欢迎登录</view><view class="app-title">弘云艺术中心</view></view><!-- 默认登录页面显示 --><view style="width: 100%;" v-if="pageStatus == 'home'"><view class="text-area" @click="loginByWx">手机号快捷登录</view></view><!-- 微信授权登录，获取用户信息 --><view style="width: 100%;" v-if="pageStatus == 'getWxRole'"><view class="info">为提供优质服务,需要获取你的以下信息 :</view><view class="public"><view class="public-dot"></view><view class="public-text">你的公开信息(头像、昵称等)</view></view><view class="text-enter" @click="getWxLoginRole">授权进入</view></view><!-- 微信登录小程序，再授权获取用户信息之后 --><view class="loginWx" v-if="pageStatus == 'loginByWx'"><view class="title">欢迎使用 弘云艺术中心</view><view class="desc">立即登录享受优质服务</view><view class="avatar"><image mode="aspectFill" :src="wxLoginUserInfo.userInfo.avatarUrl"></image></view><u-button type="success" open-type="getPhoneNumber" @getphonenumber="decryptPhoneNumber">一键登录</u-button></view><!-- 协议勾选 --><view class="agree" v-if="pageStatus == 'home' || pageStatus == 'getWxRole' "><view class="agree_img" @click="changeAgreeFlag" v-show="!agree_flag"><image src="xxxxxxxxxxx/static/mine/check.png"></image></view><view class="agree_img" @click="changeAgreeFlag" v-show="agree_flag"><image src="xxxxxxxxxxxxxxxxx/static/operate/checked.png"></image></view><view class="agree_text">登录代表您已同意<span>《用户服务协议》《隐私权政策》</span></view></view></view>
</template><script>import FunUniappTheme from '@/theme.scss';export default {data() {return {pageStatus: 'home',agree_flag: false,wxLoginUserInfo: {},openId: '',userInfo: {},openidData: {}};},onShow() {},onLoad(ops) {if (ops && ops.interceptcard && ops.interceptcard === "true") {uni.showToast({title: '购买商品,请先登录注册。',icon: 'none',duration: 4000,});}if (ops && ops.goods_id_detail) {console.log(ops.goods_id_detail, '二维码商品详情')uni.setStorageSync('goods_id_detail', ops.goods_id_detail)}console.log(FunUniappTheme);},onReady() {},methods: {changeAgreeFlag() {this.agree_flag = !this.agree_flag;},loginByWx() {if (!this.agree_flag) {uni.showToast({icon: 'none',title: '请先阅读并勾选协议'});return;}this.getUserInfoByWx(() => {this.getWxCode(code => {let $this = this;console.log('执行了吗', code)uni.request({url: "xxxxxxxxxxxxxx/mobile/index.php?m=user&c=indexapi&a=oauth2",method: 'POST',header: {'Content-Type': 'application/x-www-form-urlencoded'},data: {'wxcode': code,'parent_unionid': uni.getStorageSync('unionid')},success(res) {$this.openidData = res.data.data;console.log(res.data.data, 9999, $this.openidData);uni.setStorageSync('OPEN_ID', res.data.data.openid)}});});});},navbarBack() {if (this.pageStatus == 'getWxRole' || this.pageStatus == 'loginByWx' ) {this.pageStatus = 'home';} else if (this.pageStatus == 'forgetPwd' || this.pageStatus == 'resetPwd') {this.pageStatus = 'loginByPwd';} else if (this.pageStatus == 'loginByPwd') {this.pageStatus = 'loginByCode';}},getWxLoginRole() {if (!this.agree_flag) {uni.showToast({icon: 'none',title: '请先阅读并勾选协议'});return;}this.getUserInfoByWx(() => {this.getWxCode(code => {let $this = this;console.log('执行了吗', code)uni.request({url: "xxxxxxxxxxxxxxx/mobile/index.php?m=user&c=indexapi&a=oauth2",method: 'POST',header: {'Content-Type': 'application/x-www-form-urlencoded'},data: {'wxcode': code,'parent_unionid': uni.getStorageSync('unionid')},success(res) {$this.openidData = res.data.data;console.log(res.data.data, 9999, $this.openidData);uni.setStorageSync('OPEN_ID', res.data.data.openid)}});});});},userinfo() {uni.request({url: "xxxxxxxxxxxxxindex.php?m=user&c=indexapi&a=userinfo",method: 'POST',header: {'Content-Type': 'application/x-www-form-urlencoded'},data: {'open_id': uni.getStorageSync('OPEN_ID')},success(res) {console.log(res.data.data, '个人中心222');uni.setStorageSync('USER_ID', res.data.data.info.user_id)uni.setStorageSync('user_rank', res.data.data.info.user_rank)if (uni.getStorageSync('goods_id_detail')) {uni.reLaunch({url: '/pages-mall/pages/goods/detail?goods_id_detail=' + uni.getStorageSync('goods_id_detail')});} else {uni.reLaunch({url: '/pages/home/index'});}}});},getWxCode(callBack) {uni.login({provider: 'weixin',onlyAuthorize: true,success: loginRes => {console.log(loginRes, '获取信息')callBack(loginRes.code);},fail(e) {}});},getOpenId(code, callBack) {this.$u.api.getOpenId(code).then(res => {callBack(res);});},getUserInfoByWx(callBack) {let $this = this;uni.getUserProfile({desc: '获取你的昵称、头像',success: function(data) {console.log(data, '用户信息')uni.setStorageSync({key: 'APP_WX_USERINFO',data: data});$this.wxLoginUserInfo = data;$this.pageStatus = 'loginByWx';callBack();},fail: function(error) {}});},decryptPhoneNumber(e) {let $this = this;console.log(e.detail, 9898)uni.request({url: "xxxxxxxxxxxxxxx/index.php?m=user&c=indexapi&a=decryptwechatdata",method: 'POST',header: {'Content-Type': 'application/x-www-form-urlencoded'},data: {'session_key': $this.openidData.sessionKey,'encryptedData': e.detail.encryptedData,'iv': e.detail.iv},success(res) {console.log(res.data, '手机号');uni.request({url: "xxxxxxxxxxxxxxxxxxxxxx/index.php?m=oauth&c=indexapi&a=bind_register",method: 'POST',header: {'Content-Type': 'application/x-www-form-urlencoded'},data: {'mobile': res.data.data.phoneNumber,'unionid': $this.openidData.unionid,'openid': $this.openidData.openid},success(res) {console.log(res.data, '登录成功');if (res.data.code === 0) {$this.userinfo()uni.setStorageSync('IS_LOGIN', true);uni.setStorageSync('fh_type',0)console.log(uni.getStorageSync('IS_LOGIN'), '成功了？', uni.getStorageSync('USER_ID'))}}});}});},loginByOpenId() {const openid = uni.getStorageSync('OPEN_ID');this.$u.api.loginByOpenId(openid).then(res => {this.userInfo = res;});},}};
</script><style lang="scss" scoped>.page {padding: 0 40rpx;background-color: $app-theme-bg-color;}.logo-wrap {display: flex;padding-top: 100rpx;padding-bottom: 52rpx;flex-wrap: wrap;.logo {height: 168rpx;width: 166rpx;margin-left: 76rpx;margin-top: 50rpx;}.app-name {width: 100%;padding-top: 80rpx;margin-left: 78rpx;font-size: 38rpx;font-weight: 600;color: #333333;line-height: 52rpx;}.app-title {width: 100%;padding-top: 16rpx;margin-left: 78rpx;font-size: 38rpx;font-weight: 600;color: #333333;line-height: 52rpx;}}.text-area {width: 100%;height: 96rpx;background: #19be6b;font-weight: 400;border-radius: 56rpx;color: $app-theme-text-white-color;line-height: 16px;font-size: 32rpx;text-align: center;line-height: 96rpx;}.info {font-size: 28rpx;font-weight: 400;color: $app-theme-text-black-color;line-height: 28rpx;margin-top: 180rpx;}.public {display: flex;align-items: center;margin-top: 30rpx;.public-dot {width: 6rpx;height: 6rpx;background: #999999;margin-right: 10rpx;}.public-text {font-size: 24rpx;font-weight: 400;color: #8f92a1;line-height: 24rpx;}}.text-enter {width: 100%;margin-top: 50rpx;height: 96rpx;background: $app-theme-color;font-weight: 400;border-radius: 56rpx;color: #ffffff;line-height: 16px;font-size: 32rpx;text-align: center;line-height: 96rpx;}.head {margin-top: 70rpx;width: 100%;display: flex;justify-content: space-between;}.back {width: 40rpx;height: 40rpx;}.agree {position: fixed;left: 50%;transform: translate(-50%, 0);bottom: 66rpx;width: 100vw;display: flex;align-items: center;justify-content: center;}.agree_img image {width: 32rpx;height: 32rpx;display: flex;align-items: center;}.agree_text {margin-left: 8rpx;font-size: 24rpx;font-weight: 400;color: #8f92a1;line-height: 24rpx;display: flex;align-items: center;span {color: $app-theme-color;}}.loginWx {width: 100%;padding-top: 64rpx;.title {text-align: left;font-size: 22px;font-family: PingFang-SC-Regular, PingFang-SC;font-weight: 400;color: #171717;line-height: 30px;margin-bottom: 12rpx;}.desc {text-align: left;font-size: 14px;font-family: PingFang-SC-Regular, PingFang-SC;font-weight: 400;color: #8f92a1;line-height: 14px;}.avatar {width: 160rpx;height: 160rpx;overflow: hidden;border-radius: 50%;display: flex;align-items: center;justify-content: center;margin: 128rpx auto 160rpx auto;image {width: 100%;height: 100%;}}}
</style>
