微信小程--手机号授权一键登录

js 复制代码

<template>
  <view class="container">
    <!-- <image class="img" 
      src="https://jetour-self-prod.oss-cn-hangzhou.aliyuncs.com/public/jetour-mini/images/car.png"
      mode="widthFix"></image> -->
			<image class="img" :src="backgroundLogo" mode="widthFix"></image>
			<image class="img2" :src="logo" mode="widthFix"></image>
		
			<image class="img3" :src="carLogo" mode="widthFix"></image>
    <view class="btn-mask">

			<view class="btns" @click="clicklogin" v-show="!isAgreed">
        <button class="openBtn" >一键登录</button>
      </view>
      <view class="btns" v-show="isAgreed">
        <button class="openBtn" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" >一键登录</button>
      </view>
      
      <view class="checkbox-container">
        <checkbox-group @change="handleCheckboxChange">
          <label>
            <checkbox value="agree" :checked="isAgreed" class="myCheckbox" />
            我已阅读并同意
            <text class="link" @click.stop="navigateToPrivacyPolicy(1)">《用户服务协议》</text>
            <text class="link" @click.stop="navigateToPrivacyPolicy(2)">《隐私协议》</text>
          </label>
        </checkbox-group>
      </view>
    </view>
  </view>
</template>

<script>
  import dayJs from 'dayjs'
  import {
    getWxCode,
    getWxUserTel,
    getWxUserInfo,
    createWxUserClue
  } from '../../../api/clue.js'
  export default {
    onLoad(option) {
      this.qrCodeId = option.scene
      console.log(this.qrCodeId)
      this.getLoginCode()
    },
    data() {
      return {
				webviewStyles: {
					progress: {
						color: '#FF3333'
					}
				},
				backgroundLogo: require('../../static/img/liveStoreCode/backgroundLogo.png'),
				carLogo: require('../../static/img/liveStoreCode/carLogo.png'),
				logo: require('../../static/img/liveStoreCode/logo.png'),
        isAgreed: false,
        login_code: null,
        sessionKey: null,
        openId: null,
        rawData: null,
        userInfo: {},
        signature: null,
        userTel: null,
        qrCodeId: null,
        showWx: false
      };
    },
    methods: {
      close() {
        this.showWx = false
      },
			handleCheckboxChange(){
				this.isAgreed = !this.isAgreed
			},
      // 跳转到隐私协议页面
      navigateToPrivacyPolicy(type) {
        let goUrl = ''
        if(type == 1){
          goUrl='/pages/protocol/useProtocol'
        }
        if(type == 2){
					goUrl='/pages/protocol/concealProtocol'
				}
				uni.navigateTo({
					url: goUrl
				});
       
      },
      getLoginCode() {
        const that = this
        uni.login({
          success: function(res) {
						console.log(res, 'login')
            // 获取code    
            that.login_code = res.code;
            uni.getUserInfo({
              withCredentials: true,
              success(data) {
								console.log(data,'data');
                console.log(JSON.stringify(data));
                that.rawData = data.rawData
                that.userInfo = data.userInfo
                that.signature = data.signature
                that.getCurUserWxCode()
              }
            })

          }
        });
      },
			clicklogin(){
				console.log(this.isAgreed,'this.isAgreed');
				if(!this.isAgreed){
					wx.showToast({
						title: '请先同意捷途用户服务协议',
						icon: 'none'
					});
          return false
				}
			},
			// 获取用户手机号
      getPhoneNumber(e) {
				
        console.log(e.detail,'e.detail') // 判断用户是否允许获取手机号
        const params = {
          encryptedData: e.detail.encryptedData,
          iv: e.detail.iv,
          sessionKey: this.sessionKey,
          openId: this.openid,
          signature: this.signature,
          rawData: this.rawData
        }
        if (e.detail.errMsg == "getPhoneNumber:ok") { // 用户允许或去手机号
          getWxUserTel(params).then(res => {
            this.userTel = res.data.data.phoneNumber
						// 判断从外面过来的type 然后判断是进 活码页面还是领取优惠卷页面
						uni.navigateTo({
							url: `/pages/webView/webView?url=` + encodeURIComponent('https://blog.csdn.net/qq_48701993/article/details/134713613')
						})
            // this.submitClue()
          })
          // this.getCurUserInfo(params)
        }
      },
      getCurUserInfo(params) {
        getWxUserInfo(params)
      },
      getCurUserWxCode() {
        const that = this
        const params = {
          code: this.login_code
        }
        getWxCode(params).then((res) => {
          const data = res.data.data
          that.sessionKey = data.sessionKey
        })
      },
      submitClue() {
        const {
          nickName,
          gender
        } = this.userInfo
				// 跳h5页面 并且携带参数
        // const params = {
        //   qrCodeId: this.qrCodeId,
        //   name: nickName,
        //   phone: this.userTel,
        //   sex: gender,
        //   weChat: '',
        //   authorizationTime: dayJs().format('YYYY-MM-DD HH:mm:ss')
        // }
        // console.log('提交表单' + JSON.stringify(params))
        // createWxUserClue(params).then(res => {
        //   this.showWx = true
        // })
      }
    }
  }
</script>

<style lang="scss">
  .img {
    width: 100vw;
    height: 100vh;
    display: block;
  }
	.img2{
		position: absolute;
		width: 80px;
		height: 80px;
		top: 60px;
		margin-left: calc(50vw - 40px);
	}
	.title{
		font-size: 18px;
		display: flex;
		justify-content: center;
		position: absolute;
		width: 100%;
		top: 150px;
	}
	.img3{
		position: absolute;
		width: 350px;
		height: 222px;
		top: 200px;
		margin-left: calc(50vw - 175px);
	}

  .btn-mask {
    // background-color: rgba(0, 0, 0, 0.2);
    // background-image: url('https://jetour-self-prod.oss-cn-hangzhou.aliyuncs.com/public/jetour-mini/images/car.png');
    // background-size: contain;
    // background-repeat: no-repeat;
    // background-position: bottom;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 20;
    top: 0;
    left: 0;

    // .checkbox-container{
    //  position: absolute;
    //  bottom: 80rpx;
    // }
  }

  .myCheckbox{
    
    ::v-deep .uni-checkbox-input{
      width: 16px;
      height: 16px;
      margin-right: 8px;
    }
  }
   .checkbox-container{
      display: flex;
      width: 94%;
      align-items: center;
      justify-content: center;
      line-height: 25px;
      font-size: 14px;
      color: #666;
      position: absolute;
      left: 5%;
      bottom: 5%;
      font-size: 12px;
    }

    .link {
      color: #007aff;
      // margin: 0 5px;
    }

  .container {
    width: 100vw;
    height: 100vh;
  }

  .btns {
    width: 80%;
    position: absolute;
    left: 10%;
    top: 70%;
    // margin-left: -15%;
    border-radius: 80px;
    display: flex;
    justify-content: flex-start;

    button {
      width: 100%;
      height: 80rpx;
      line-height: 80rpx;

      &:after {
        display: none;
      }

      &.openBtn {
        // background: #00A198;
        background-color: #165DFF;
        color: #fff;
        // border: 1px solid #fff;
      }
    }
  }

  .txt-content {
    text-align: center;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 90%;
    margin: 70px auto;

    text {
      color: #3D3D3D;
      font-size: 30rpx;
    }

    image {
      width: 80rpx;
      height: 80rpx;
      border-radius: 20rpx;
      margin-right: 20rpx;
    }
  }

  .jetour-wx {
    background-color: rgba(0, 0, 0, 0.4);
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 30;
    top: 0;
    left: 0;

    .jetour-wx-content {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
      width: 400rpx;
      height: auto;
      background: #fff;
      color: #000;
      border-radius: 10px;
      padding: 20px 0;
      display: flex;
      flex-direction: column;

      image {
        width: 360rpx;
        height: 360rpx;
        margin: 0 auto;
      }

      .colse {
        position: absolute;
        right: 10px;
        top: 0px;
        background: none;
        outline: none;
        border: none;
        font-size: 12px;
        padding: 0;

        &:after {
          border: none;
        }
      }
    }

  }
</style>

要点getLoginCode uni.login 以后获取微信code 拿到code 然后走后端接口换信息具体看代码

https://developers.weixin.qq.com/miniprogram/dev/OpenApiDoc/user-login/code2Session.html

js 复制代码

小程序自己的组件
https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/getPhoneNumber.html#%E8%BF%94%E5%9B%9E%E5%8F%82%E6%95%B0%E8%AF%B4%E6%98%8E

<view class="btns" v-show="isAgreed">
        <button class="openBtn" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" >一键登录</button>
      </view>