uniapp微信小程序手机号一键登录获取手机号，获取openid

网上翻了很多都是app版本的，不适用于小程序

复制代码

<!-- 微信授权登录全程代码实现 -->
<template>
  <view>
    <view>
      <!-- isloding是用来记录当前用户是否是第一次授权使用的 -->
      <view>
        <view class="header">
          <image src="/static/logo.png"></image>
        </view>
        <view class="content">
          <view>申请获取以下权限</view>
          <text>获得你的公开信息(昵称，头像、地区等)</text>
        </view>
        <button
          @click="login"
          @getphonenumber="getPhone"
          open-type="getPhoneNumber"
        >
          手机号授权登录
        </button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      code: "",
      openid: "",
    };
  },
  methods: {
    // 获取手机号
    getPhone(e) {
      console.log(e);
      uniCloud
        .callFunction({
          name: "login",
          data: {
            code: e.detail.code,
          },
        })
        .then((res) => {
          console.log(res, "ressssssss");
          // 在这里就可以获取到手机号还有token了
        });
    },
    // 获取code
    login() {
      let that = this;
      wx.login({
        success(res) {
          console.log(res, "code---");
          // that.code = res.code;
          let appid = "你的appid";
          let secret = "你的secret ";
          let url =
            "https://api.weixin.qq.com/sns/jscode2session?appid=" +
            appid +
            "&secret=" +
            secret +
            "&js_code=" +
            res.code;
          uni.request({
            url: url, // 请求路径
            success: (result) => {
              console.log(result, "openid00000000000");
              that.openid = result.data.openid;
            },
          });
        },
      });
    },
  },
};
</script>

<style>
.header {
  margin: 90rpx 0 90rpx 50rpx;
  border-bottom: 1px solid #ccc;
  text-align: center;
  width: 650rpx;
  height: 300rpx;
  line-height: 450rpx;
}

.header image {
  width: 200rpx;
  height: 200rpx;
}

.content {
  margin-left: 50rpx;
  margin-bottom: 90rpx;
}

.content text {
  display: block;
  color: #9d9d9d;
  margin-top: 40rpx;
}

.bottom {
  border-radius: 80rpx;
  margin: 70rpx 50rpx;
  font-size: 35rpx;
}
</style>

因为我用的是云函数所以如下云函数js是这样的（记得上传部署）

复制代码

// 云函数
exports.main = async function (event,context) {// 获取token
    const appid = '你的appid'
	const secret = '你的secret '
	const res = await uniCloud.httpclient.request('https://api.weixin.qq.com/cgi-bin/token', {
		method: 'GET',
		data: {
			grant_type: 'client_credential',
			appid: appid,
			secret: secret,
		},
		dataType: 'json',
		header: {
			'content-type': 'application/json'
		}
	})
	// 获取用户手机号
	let ress = {}
	if (res && res.data.access_token) {
		ress = await uniCloud.httpclient.request(
			'https://api.weixin.qq.com/wxa/business/getuserphonenumber?access_token=' + res.data
				.access_token, {
			method: 'post',
			data: {
				code: event.code,
			},
			dataType: 'json',
			contentType: 'json', // 指定以application/json发送data内的数据

		})
	}
	
	// 执行入库等操作，正常情况下不要把完整手机号返回给前端
	return {
		code: event.code,
		message: res.data.access_token,
		data: ress.data,
		
	}
}