uniapp微信小程序WebApi_openid、phone接口获取代码详解

 更新时间:2024年10月28日 08:39:17   作者:焚 城  
本文主要记录了微信小程序接口调用的过程,首先查看uniapp文档和微信API文档,获取openid和phone,然后通过uniapp实现获取openid和电话号码,但遇到了合法域名屏蔽的问题,最后通过将微信访问迁移到后台解决,需要的朋友可以参考下

前言

今天发现小程序数据接口访问不到了,查询是因为小程序禁用合法域名https://api.weixin.qq.com,索性就干脆做一次详细的微信接口调用记录。
不得不说,好久没用可,微信这API改动真的大。闲话不说了,开干

一、查文档

首先肯定是查API

uniapp文档:https://uniapp.dcloud.net.cn/api/plugins/login.html

这是啥也不给啊,gerUserInfo弃用了,查微信API吧

微信API文档:https://developers.weixin.qq.com/miniprogram/dev/OpenApiDoc/

查看后,就这两个接口能使。获取openid、phone,openid可以做用户唯一识别,phone先保存起来吧

二、定流程

1、打开小程序-- > 2、获取openid-->
3、openid 绑user(游客) --->4、获取phone--->
5、openid、phone绑定user(注册)--->6、下次访问 openid直接读取用户

好了思路有了,就开始写实现,主要的就获取openid、phone

三、uniapp实现

         getOpenid() {
				// #ifdef H5
				this.wxid="o9zUn7SMr5hI47oAGeMqU-pzExxx";
				this.GetToken();//我的后台业务
				// #endif
				
				// #ifdef MP-WEIXIN
				  //获取code
					uni.login({
						provider: 'weixin',
						success: (res) => {
							console.log(res.code) //获取code
							const code = res.code
							//获取成功后
							uni.request({
								url: `https://api.weixin.qq.com/sns/jscode2session?appid=${this.appid}&secret=${this.secret}&js_code=$[code]&grant_type=authorization_code`,
								success: (res) => {
									//获取session_key和openid,此处关联后端进行业务处理
									this.wxid = res.data.openid;
									this.GetToken();//我的后台业务
								},
								fail: (res) => {
									console.log(res.data)
								}
							})
						},
						fail: (res) => {
							console.log(res.data)
						}
					});
				// #endif
			}

获取openid 很成功,然后再获取电话

open-type=“getPhoneNumber” @getphonenumber=“getPhoneNumber”

不管啥标签,这句是触发 小程序接口的关键。

        getPhoneNumber(e) {
				//console.log(e);
				if(e.errMsg!="getPhoneNumber:ok")return;
				const mycode=e.code;
				uni.request({
						url: `https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=${this.appid}&secret=${this.secret}`,
						success: (res) => {
							console.log(res.data);
							var accessToken = res.data.access_token;
							uni.request({
								url: "https://api.weixin.qq.com/wxa/business/getuserphonenumber?access_token=" +
									accessToken,
								method: 'POST',
								data: {
									code:mycode
								},
								success: (res) => {
									console.log("用户手机号获取");
									console.log(res);
								    //写入缓存
									this.user.moblie=res.data.phone_info.purePhoneNumber;
									this.user.name=this.user.name.replace("游客","用户");
									this.$assist.zset('user', this.user);
									this.AddUser();
								}
							})
						}
					})
			}

运行很成功,上传。

四、合法域名屏蔽

我以为这就完事了,很明显我还是太年轻了

问题是,真机测试、微信开发者工具都成功,但线上访问不到数据

一翻排查,原来是我屏蔽了测试的:合法域名检测

当我把这个选中的勾勾取消了,bug终于呈现在俺的眼前

我看了下,开发者工具启动,这勾子默认启动,你这就有点不合适了₍₍ ( ‾᷄ ᗣ‾᷅ )̧ ₎₎

#¥%……&*()——,天下居然有这种事,自己家说自己的API地址不合法???

行吧,你是爸爸,咱把HTTP访问写后端就是

五、微信访问迁移到后台

1、创建用于json解析的model

using System.ComponentModel.DataAnnotations;

namespace WebApi.Models
{
    /// <summary>
    /// 微信jscode2session接口 返回对象
    /// </summary>
    public class OpenidApiRes
    {
        /// <summary>
        /// 其中 [Required] 表示非空判断
        /// </summary>
        [Required]
        public string ? session_key { get; set; }
        [Required]
        public string? openid { get; set; }
    }
    /// <summary>
    /// 微信client_credential接口 返回对象
    /// </summary>
    public class AccessApiRes
    {
        /// <summary>
        /// 其中 [Required] 表示非空判断
        /// </summary>
        [Required]
        public string? access_token { get; set; }
    }
    /// <summary>
    /// 微信getuserphonenumber接口 返回对象
    /// </summary>
    public class MoblieApiRes
    {
        /// <summary>
        /// 其中 [Required] 表示非空判断
        /// </summary>
        [Required]
        public int ? errcode { get; set; }
        [Required]
        public string? errmsg { get; set; }
        [Required]
        public phone_info? phone_info { get; set; }
    }
    /// <summary>
    /// public class MoblieApiRes 子集
    /// </summary>
    public class phone_info
    {
        /// <summary>
        /// 其中 [Required] 表示非空判断
        /// </summary>
        [Required]
        public string? phoneNumber { get; set; }
        [Required]
        public string? purePhoneNumber { get; set; }
        
    }
}

2、网上随便找个httphelper,

/// <summary>    
/// 向指定URL发送文本数据    
/// </summary>    
/// <param name="url">网址</param>    
/// <param name="postData">urlencode编码的文本数据</param>    
/// <returns></returns>    
public string Post(string url, string postData)
{
    byte[] data = encoding.GetBytes(postData);
    return Post(url, data);
}
/// <summary>    
/// 向指定URL发送字节数据    
/// </summary>    
/// <param name="url">网址</param>    
/// <param name="postData">发送的字节数组</param>    
/// <returns></returns>    
public string Post(string url, byte[] postData)
{
    HttpWebRequest request = CreateRequest(url, "POST");
    request.ContentType = "application/x-www-form-urlencoded";
    request.ContentLength = postData.Length;
    request.KeepAlive = true;
    PostData(request, postData);
    respHtml = encoding.GetString(GetData(request));
    return respHtml;
}

注:这里的post ,就是下面的requestwx,改了个名

3、写访问

A、获取openid

//--uniapp---
           getOpenid() {
				// #ifdef MP-WEIXIN
					uni.login({
						provider: 'weixin',
						success: (res) => {
							console.log(res.code) //获取code
							const code = res.code
							this.GetToken(code);//把code传到后端
						},
						fail: (res) => {
							console.log(res.data)
						}
					});
				// #endif
			}
//--webapi----
string appid = MySet.WXConfig.Appid;
string secret= MySet.WXConfig.Secret;
string apiurl = $"https://api.weixin.qq.com/sns/jscode2session?appid={appid}&secret={secret}&js_code={info.code}&grant_type=authorization_code";
string resdata = AppApi.requestwx(apiurl, "");
OpenidApiRes res = JsonConverter.DeserializeObject<OpenidApiRes>(resdata);
if (res.openid == null) return BadRequest("");
string wxid = res.openid??"";

B、获取手机号

//---uniapp----
         getPhoneNumber(e) {
				//console.log(e);
				if(e.errMsg!="getPhoneNumber:ok")return;
				this.user.pwd=e.code;//懒得建字段,凑个塞吧
				AddUser();
}
//--webapi----
string appid = MySet.WXConfig.Appid;
string secret = MySet.WXConfig.Secret;
string code = info.pwd??"";
//1、获取access_token
string apiurl = $"https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid={appid}&secret={secret}";
string resdata = AppApi.requestwx(apiurl, "");
AccessApiRes res = JsonConverter.DeserializeObject<AccessApiRes>(resdata);
if (res.access_token == null) return BadRequest("");
string access_token = res.access_token ?? "";

//2、获取userphonenumber
apiurl = $"https://api.weixin.qq.com/wxa/business/getuserphonenumber?access_token={access_token}";
string data = "{\"code\":\"" + code + "\"}";
resdata = AppApi.requestwx(apiurl, data);
MoblieApiRes res2 = JsonConverter.DeserializeObject<MoblieApiRes>(resdata);
if (res2.errcode != 0) return BadRequest("");
string phone = res2.phone_info.phoneNumber ?? "";

上传 测试,解决了。 

对了,手机号获取,是收费了,不过好在送了1000次。用着先把,不够再充点。

六、加一个用户昵称、头像

<input class="input" type="nickname" v-model="nickname" placeholder="请输入昵称" placeholder-style="color: #AAAAAA;">

<button class="button"open-type="chooseAvatar" @chooseavatar="chooseAvatarEvent"/>

微信这个有点bug,就选择了昵称,返回值为空,测试注意就行。真机测试、发布后还是没问题

     // 头像选择
      chooseAvatarEvent(e) {
		this.imgtofile(e.detail.avatarUrl);
      },
     //图片链接转二进制 并上传图片到服务器
	 imgtofile(src) {
	  	const fileSystemManager = uni.getFileSystemManager();
	  	return new Promise((resolve, reject) => {
	             fileSystemManager.readFile({
	  				filePath: src, // 微信服务器 图片临时路径
	  				success: (data) => {
	  					let file = data.data;
	  					this.uploadFile(src, file).then((data) => {
	  						resolve(data);
	  					});
	  				},
	  				fail: (err) => {
	  				console.log('读取文件失败', err);
	  			}
	  		}); 
	  	});
	  },
	  //上传文件到服务器 根据项目对应修改
	   uploadFile(tempFilePath, file) {
	  	let token =  this.$assist.zget('token');
	  	return new Promise((resolve, reject) => {
	  		uni.uploadFile({
	  			url: this.$config.dataUrl+"Upload/Img",//你的 服务器地址
	  			filePath: tempFilePath,//图片地址
	  			name: 'file',
	  			formData: {
	  				file: file,//文件流
	  				biz: 'temp'
	  			},
	  			header: {
	  				Authorization: 'Bearer ' + token, //自定义请求头信息
	  			},
	  			success: (res) => {
					console.log(res);
	  				console.log(res.data);
					var datas=JSON.parse(res.data);
					this.userInfo.avatar= this.$assist.getimg(datas.data.fileUrl);
	  			},
	  			fail: (err) => {}
	  		});
	  	});
	  }

就是说 虽然可以获取到微信头像,但却是临时路径(只读),那肯定要下载并存到自己服务器上,对吧。

这两也挺好玩的,随便找个标签 open-type= 设置一下。测试一下分享自带客服吧。

总结

到此这篇关于uniapp微信小程序WebApi_openid、phone接口获取的文章就介绍到这了,更多相关uniapp小程序WebApi_openid、phone接口获取内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue3 定义使用全局变量的示例详解

    vue3 定义使用全局变量的示例详解

    全局变量(函数等)可以在任意组件内访问,可以当组件间的传值使用,这篇文章给大家介绍vue3 定义使用全局变量的示例详解,感兴趣的朋友跟随小编一起看看吧
    2023-10-10
  • Vue3报错‘defineProps‘ is not defined的解决方法

    Vue3报错‘defineProps‘ is not defined的解决方法

    最近工作中遇到vue3中使用defineProps中报错,飘红,所以这篇文章主要给大家介绍了关于Vue3报错‘defineProps‘ is not defined的解决方法,需要的朋友可以参考下
    2023-01-01
  • vue+axios实现登录拦截的实例代码

    vue+axios实现登录拦截的实例代码

    本篇文章主要介绍了vue+axios实现登录拦截的实例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-05-05
  • 基于Vue中点击组件外关闭组件的实现方法

    基于Vue中点击组件外关闭组件的实现方法

    下面小编就为大家分享一篇基于Vue中点击组件外关闭组件的实现方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • Vue源码makeMap函数深入分析

    Vue源码makeMap函数深入分析

    vue源码中的makeMap用在很多地方,主要是判断标签是原生标签还是用户自定义的组件,但是标签很多,如果每判断一次都执行一次循环,累计下来,性能损耗还是很大的,makeMap就是解决这个问题出现的
    2022-08-08
  • Vue引入高德地图并触发实现多个标点的示例详解

    Vue引入高德地图并触发实现多个标点的示例详解

    这篇文章主要介绍了Vue引入高德地图并触发实现多个标点,主要是在public下的index.html中引入地图,引入组件设置宽高100%,本文通过示例代码给大家介绍的非常详细,需要的朋友可以参考下
    2022-05-05
  • Vue脚手架的简单使用实例

    Vue脚手架的简单使用实例

    这篇文章主要介绍了Vue脚手架的简单使用实例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07
  • vue如何获取光标位置

    vue如何获取光标位置

    这篇文章主要介绍了vue获取光标位置方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-07-07
  • Vue配合Django使用方式

    Vue配合Django使用方式

    Vue.js是前端三大框架之一,以其轻巧、高性能的特性脱颖而出,Vue.js专注于构建数据驱动的Web界面,采用渐进式设计,易于上手,支持组件化开发,核心功能包括响应式数据绑定和视图组件的组合,Vue还提供了生命周期、事件绑定等多种功能,支持ES6语法
    2024-09-09
  • Vue POST请求头'Content-Type':'application/json;',data上传过程

    Vue POST请求头'Content-Type':'application/j

    这篇文章主要介绍了Vue POST请求头'Content-Type':'application/json;',data上传过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03

最新评论