Uniapp实现小程序获取用户微信信息功能_uniapp开发微信小程序如何获取微信的朋友列表

Uniapp实现小程序获取用户微信信息功能

实现后发现其实这个功能实现起来非常简单，但是，在实现这个功能的过程中真的好多坑啊，可能是我菜吧。

1.获取uniapp的appid和微信小程序的appid,然后在HBuilder X的manifest.json文件中填上

虽然按我的理解，这两个AppID即使被直接看到，但是你在两个开发管理平台没有加入项目的话，也是不能直接用的，但是，为了安全起见我还是打了马赛克，毕竟作为菜鸟的我还有很多不懂的。
PS：申请微信的AppID的时候，一定要注意区分微信公众平台和微信开发平台不是一个东西,并且,一定点要进小程序地方再申请。打开的首页不是下面这个页面的先别着急申请，不然会浪费一个机会的！（泪的教训）

2.在需要的地方加上一个获取信息按钮 （重点） ，代码如下

<button open-type="getUserInfo" @tap="getUserProfile" size="mini"> 获取头像昵称 </button>
1

• 第一个坑：这边采用getUserProfile API来获取是因为，从2021.4.13日起，微信将原本获取用户的API接口由getUserInfo变更为了getUserProfile（从原来的开发者可以直接获取用户信息变成了开发者只能获取匿名的用户信息，只有用户点击“允许”之后才能获取到真实信息），就是因为这个卡了好久。
• 还有一个坑就是：HBuilder X是基于vue的uni-app开发的，vue的事件都是@、v-on开头的，而小程序的事件都是bind开头的，所以直接使用官网提供的bindtap事件，会出错！！！（VM290 WAService.js:2 Component "pages/index/index" does not have a method "getUserProfile" to handle event "tap".）需要改成 @tap。

3.在方法methods中加上getUserProfile（）的具体实现

getUserProfile(e) {
				// 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认
				// 开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
				wx.getUserProfile({
					desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
					success: (res) => {
						console.log(res);
						console.log(res.userInfo.avatarUrl);//获取用户微信头像
						console.log(res.userInfo.nickName);//获取用户微信名
					}
				})
			},
1
2
3
4
5
6
7
8
9
10
11
12

然后运行到微信开发者工具就可以实现了，超级感动。

• 点击按钮后会出现授权窗口
  

• 点击允许后就能打印出微信信息了