微信小程序开发-获取微信用户个人信息

诚信去哪了 發表於 2021-5-19 14:08:00

微信小程序开发-获取微信用户个人信息

<h1>1、背景</h1>
前段时间公司要求做微信小程序的开发，将我们现有移动端的功能在小程序上实现，由于之前是做Android开发的，对小程序其实不咋了解，但领导要求只能硬着头皮上了。
经过一段时间的摸索，能够做一些简单的功能，我们的小程序需要获取微信用户的基本信息以及电话号码，去做用户绑定，所以下面就把获取微信用户信息的过程在此记录一下，以便后面可以进行回顾。
微信小程序官方开发文档：https://developers.weixin.qq.com/miniprogram/dev/framework/
<h1>2、方法介绍</h1>
获取微信公开的用户信息通过 wx.getUserProfile(Object object)方法，其实在之前获取用户信息是通wx.getUserInfo(Object object)方法来实现的。
但微信方面对wx.getUserInfo接口做了调整，所以在此我们微信最新提供的wx.getUserProfile(Object object)方法来获取微信用户信息。
下面对 wx.getUserProfile(Object object) 的参数以及返回值进行简要说明。
<h2>2.1 参数 object </h2>
<table class=" cke_show_border">
<thead>
<tr><th>属性</th><th>类型</th><th>默认值</th><th>必填</th><th>说明</th></tr>
</thead>
<tbody>
<tr>
<td>lang</td>
<td>string</td>
<td>en</td>
<td>否</td>
<td>显示用户信息的语言</td>
</tr>
<tr>
<td>desc</td>
<td>string</td>
<td> </td>
<td>是</td>
<td>声明获取用户个人信息后的用途，不超过30个字符</td>
</tr>
<tr>
<td>success</td>
<td>function</td>
<td> </td>
<td>否</td>
<td>接口调用成功的回调函数</td>
</tr>
<tr>
<td>fail</td>
<td>function</td>
<td> </td>
<td>否</td>
<td>接口调用失败的回调函数</td>
</tr>
<tr>
<td>complete</td>
<td>function</td>
<td> </td>
<td>否</td>
<td>接口调用结束的回调函数（调用成功、失败都会执行）</td>
</tr>
</tbody>
</table>
其中 desc 是必须要填，用于说明获取用户个人信息的用途。
<h2>2.2 object.lang 的合法值</h2>
<table class=" cke_show_border">
<thead>
<tr><th>值</th><th>说明</th><th>最低版本</th></tr>
</thead>
<tbody>
<tr>
<td>en</td>
<td>英文</td>
<td> </td>
</tr>
<tr>
<td>zh_CN</td>
<td>简体中文</td>
<td> </td>
</tr>
<tr>
<td>zh_TW</td>
<td>繁体中文</td>
<td> </td>
</tr>
</tbody>
</table>
<h2>2.3 object.success 回调函数</h2>
参数
Object res
<table class=" cke_show_border">
<thead>
<tr><th>属性</th><th>类型</th><th>说明</th><th>最低版本</th></tr>
</thead>
<tbody>
<tr>
<td>userInfo</td>
<td>UserInfo</td>
<td>用户信息对象</td>
<td>2.10.4</td>
</tr>
<tr>
<td>rawData</td>
<td>string</td>
<td>不包括敏感信息的原始数据字符串，用于计算签名</td>
<td>2.10.4</td>
</tr>
<tr>
<td>signature</td>
<td>string</td>
<td>使用 sha1( rawData + sessionkey ) 得到字符串，用于校验用户信息，详见 用户数据的签名验证和加解密</td>
<td>2.10.4</td>
</tr>
<tr>
<td>encryptedData</td>
<td>string</td>
<td>包括敏感数据在内的完整用户信息的加密数据，详见 用户数据的签名验证和加解密</td>
<td>2.10.4</td>
</tr>
<tr>
<td>iv</td>
<td>string</td>
<td>加密算法的初始向量，详见 用户数据的签名验证和加解密</td>
<td>2.10.4</td>
</tr>
<tr>
<td>cloudID</td>
<td>string</td>
<td>敏感数据对应的云 ID，开通云开发的小程序才会返回，可通过云调用直接获取开放数据，详细见云调用直接获取开放数据</td>
<td>2.10.4</td>
</tr>
</tbody>
</table>
上面的方法介绍以及参数解释均来源于微信小程序官方开发文档。
<h1>3、具体使用</h1>
第一步、 新建一个小程序工程，建立一个测试页面，如下所示：
<span class="cke_widget_wrapper cke_widget_inline cke_widget_image cke_image_nocaption cke_widget_selected" data-cke-widget-wrapper="1" data-cke-filter="off" data-cke-display-name="图像" data-cke-widget-id="6"><img alt="" width="1200" height="747" class="cke_widget_element lazyload" src="https://img-blog.csdnimg.cn/20210513140100385.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA4OTIxMDk=,size_16,color_FFFFFF,t_70" data-cke-widget-data="{&quot;hasCaption&quot;:false,&quot;src&quot;:&quot;https://img-blog.csdnimg.cn/20210513140100385.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA4OTIxMDk=,size_16,color_FFFFFF,t_70&quot;,&quot;alt&quot;:&quot;&quot;,&quot;width&quot;:&quot;1200&quot;,&quot;height&quot;:&quot;747&quot;,&quot;lock&quot;:true,&quot;align&quot;:&quot;none&quot;,&quot;classes&quot;:[]}" data-cke-widget-upcasted="1" data-cke-widget-keep-attr="0" data-widget="image" data-src="https://img-blog.csdnimg.cn/20210513140100385.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA4OTIxMDk=,size_16,color_FFFFFF,t_70"><img width="15" height="15" class="cke_reset cke_widget_drag_handler lazyload" title="点击并拖拽以移动" data-cke-widget-drag-handler="1" data-src="data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==">
第二步、写代码
首先给 getuserinfo.wxml 中添加如下布局代码：
<div class="cke_widget_wrapper cke_widget_block cke_widget_codeSnippet cke_widget_selected" data-cke-widget-wrapper="1" data-cke-filter="off" data-cke-display-name="代码段" data-cke-widget-id="5">
<div class="cnblogs_code">
<pre>
<view>申请获得你的公开信息(用户昵称、头像、城市等)</view>
<button bindtap="getUserProfile">获取用户基本信息</button>
<text >获取到的用户信息：</text>
<rich-text >{{userInfoStr}}</rich-text></pre>
</div>
</div>
其次在getuserinfo.js 中添加如下实现代码：
<div class="cke_widget_wrapper cke_widget_block cke_widget_codeSnippet cke_widget_selected" data-cke-widget-wrapper="1" data-cke-filter="off" data-cke-display-name="代码段" data-cke-widget-id="4">
<div class="cnblogs_code">
<pre>// pages/getuserinfo/getuserinfo.js
Page({

/**
* 页面的初始数据
*/
data: {
userInfo:{},
userInfoStr :''
},

/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
 //查看是否授权
 wx.getSetting({
 success: function(res) {
 if (res.authSetting['scope.userInfo']) {
 console.log("用户授权了");
 } else {
 //用户没有授权
 console.log("用户没有授权");
 }
 }
 });
},

getUserProfile: function(res) {
wx.getUserProfile({
 desc: '用于微信账号与平台账号绑定', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
 success: (res)=>{
 console.log("获取到的用户信息成功: ",JSON.stringify(res));
 this.setData({
 userInfo: res,
 userInfoStr: JSON.stringify(res)
 })
 },
 fail: (res)=>{
 console.log("获取用户个人信息失败: ",res);
 //用户按了拒绝按钮
 wx.showModal({
 title: '警告',
 content: '您点击了拒绝授权，将无法进入小程序，请授权之后再进入!!!',
 showCancel: false,
 confirmText: '返回授权',
 success: function(res) {
 // 用户没有授权成功，不需要改变 isHide 的值
 if (res.confirm) {
 console.log('用户点击了“返回授权”');
 }
 }
 });
 }
})
},
})</pre>
</div>
</div>
完成之后，编译运行到真机（注意一定要运行到手机真机上，不然会报getUserProfile找不到）。
<h2>4、运行结果</h2>
运行结果如下所示：
<span class="cke_widget_wrapper cke_widget_inline cke_widget_image cke_image_nocaption cke_widget_selected" data-cke-widget-wrapper="1" data-cke-filter="off" data-cke-display-name="图像" data-cke-widget-id="3"><img alt="" width="239" height="504" class="cke_widget_element lazyload" src="https://img-blog.csdnimg.cn/20210513141240794.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA4OTIxMDk=,size_16,color_FFFFFF,t_70" data-cke-widget-data="{&quot;hasCaption&quot;:false,&quot;src&quot;:&quot;https://img-blog.csdnimg.cn/20210513141240794.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA4OTIxMDk=,size_16,color_FFFFFF,t_70&quot;,&quot;alt&quot;:&quot;&quot;,&quot;width&quot;:&quot;239&quot;,&quot;height&quot;:&quot;504&quot;,&quot;lock&quot;:true,&quot;align&quot;:&quot;none&quot;,&quot;classes&quot;:[]}" data-cke-widget-upcasted="1" data-cke-widget-keep-attr="0" data-widget="image" data-src="https://img-blog.csdnimg.cn/20210513141240794.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA4OTIxMDk=,size_16,color_FFFFFF,t_70"><img width="15" height="15" class="cke_reset cke_widget_drag_handler lazyload" title="点击并拖拽以移动" data-cke-widget-drag-handler="1" data-src="data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==">   
 点击 ”获取用户基本信息“ 按钮：
 
<span class="cke_widget_wrapper cke_widget_inline cke_widget_image cke_image_nocaption cke_widget_selected" data-cke-widget-wrapper="1" data-cke-filter="off" data-cke-display-name="图像" data-cke-widget-id="3"><span class="cke_widget_wrapper cke_widget_inline cke_widget_image cke_image_nocaption cke_widget_selected" data-cke-widget-wrapper="1" data-cke-filter="off" data-cke-display-name="图像" data-cke-widget-id="2"><img alt="" width="237" height="500" class="cke_widget_element lazyload" src="https://img-blog.csdnimg.cn/20210513141348645.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA4OTIxMDk=,size_16,color_FFFFFF,t_70" data-cke-widget-data="{&quot;hasCaption&quot;:false,&quot;src&quot;:&quot;https://img-blog.csdnimg.cn/20210513141348645.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA4OTIxMDk=,size_16,color_FFFFFF,t_70&quot;,&quot;alt&quot;:&quot;&quot;,&quot;width&quot;:&quot;237&quot;,&quot;height&quot;:&quot;500&quot;,&quot;lock&quot;:true,&quot;align&quot;:&quot;none&quot;,&quot;classes&quot;:[]}" data-cke-widget-upcasted="1" data-cke-widget-keep-attr="0" data-widget="image" data-src="https://img-blog.csdnimg.cn/20210513141348645.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA4OTIxMDk=,size_16,color_FFFFFF,t_70"><img width="15" height="15" class="cke_reset cke_widget_drag_handler lazyload" title="点击并拖拽以移动" data-cke-widget-drag-handler="1" data-src="data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==">
<span class="cke_widget_wrapper cke_widget_inline cke_widget_image cke_image_nocaption cke_widget_selected" data-cke-widget-wrapper="1" data-cke-filter="off" data-cke-display-name="图像" data-cke-widget-id="3"><span class="cke_widget_wrapper cke_widget_inline cke_widget_image cke_image_nocaption cke_widget_selected" data-cke-widget-wrapper="1" data-cke-filter="off" data-cke-display-name="图像" data-cke-widget-id="2">点击  ”允许“ 按钮：
<span class="cke_widget_wrapper cke_widget_inline cke_widget_image cke_image_nocaption cke_widget_selected" data-cke-widget-wrapper="1" data-cke-filter="off" data-cke-display-name="图像" data-cke-widget-id="3"><span class="cke_widget_wrapper cke_widget_inline cke_widget_image cke_image_nocaption cke_widget_selected" data-cke-widget-wrapper="1" data-cke-filter="off" data-cke-display-name="图像" data-cke-widget-id="2"><span class="cke_widget_wrapper cke_widget_inline cke_widget_image cke_image_nocaption cke_widget_selected" data-cke-widget-wrapper="1" data-cke-filter="off" data-cke-display-name="图像" data-cke-widget-id="1"><img alt="" width="239" height="504" class="cke_widget_element lazyload" src="https://img-blog.csdnimg.cn/20210513141609628.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA4OTIxMDk=,size_16,color_FFFFFF,t_70" data-cke-widget-data="{&quot;hasCaption&quot;:false,&quot;src&quot;:&quot;https://img-blog.csdnimg.cn/20210513141609628.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA4OTIxMDk=,size_16,color_FFFFFF,t_70&quot;,&quot;alt&quot;:&quot;&quot;,&quot;width&quot;:&quot;239&quot;,&quot;height&quot;:&quot;504&quot;,&quot;lock&quot;:true,&quot;align&quot;:&quot;none&quot;,&quot;classes&quot;:[]}" data-cke-widget-upcasted="1" data-cke-widget-keep-attr="0" data-widget="image" data-src="https://img-blog.csdnimg.cn/20210513141609628.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA4OTIxMDk=,size_16,color_FFFFFF,t_70"><img width="15" height="15" class="cke_reset cke_widget_drag_handler lazyload" title="点击并拖拽以移动" data-cke-widget-drag-handler="1" data-src="data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==">   
<span class="cke_widget_wrapper cke_widget_inline cke_widget_image cke_image_nocaption cke_widget_selected" data-cke-widget-wrapper="1" data-cke-filter="off" data-cke-display-name="图像" data-cke-widget-id="3"><span class="cke_widget_wrapper cke_widget_inline cke_widget_image cke_image_nocaption cke_widget_selected" data-cke-widget-wrapper="1" data-cke-filter="off" data-cke-display-name="图像" data-cke-widget-id="2"><span class="cke_widget_wrapper cke_widget_inline cke_widget_image cke_image_nocaption cke_widget_selected" data-cke-widget-wrapper="1" data-cke-filter="off" data-cke-display-name="图像" data-cke-widget-id="1"> 点击 ”拒绝“ 按钮
<span class="cke_widget_wrapper cke_widget_inline cke_widget_image cke_image_nocaption cke_widget_selected" data-cke-widget-wrapper="1" data-cke-filter="off" data-cke-display-name="图像" data-cke-widget-id="3"><span class="cke_widget_wrapper cke_widget_inline cke_widget_image cke_image_nocaption cke_widget_selected" data-cke-widget-wrapper="1" data-cke-filter="off" data-cke-display-name="图像" data-cke-widget-id="2"><span class="cke_widget_wrapper cke_widget_inline cke_widget_image cke_image_nocaption cke_widget_selected" data-cke-widget-wrapper="1" data-cke-filter="off" data-cke-display-name="图像" data-cke-widget-id="1">   <span class="cke_widget_wrapper cke_widget_inline cke_widget_image cke_image_nocaption cke_widget_selected" data-cke-widget-wrapper="1" data-cke-filter="off" data-cke-display-name="图像" data-cke-widget-id="0"><img alt="" width="237" height="501" class="cke_widget_element lazyload" src="https://img-blog.csdnimg.cn/20210513141730372.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA4OTIxMDk=,size_16,color_FFFFFF,t_70" data-cke-widget-data="{&quot;hasCaption&quot;:false,&quot;src&quot;:&quot;https://img-blog.csdnimg.cn/20210513141730372.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA4OTIxMDk=,size_16,color_FFFFFF,t_70&quot;,&quot;alt&quot;:&quot;&quot;,&quot;width&quot;:&quot;237&quot;,&quot;height&quot;:&quot;501&quot;,&quot;lock&quot;:true,&quot;align&quot;:&quot;none&quot;,&quot;classes&quot;:[]}" data-cke-widget-upcasted="1" data-cke-widget-keep-attr="0" data-widget="image" data-src="https://img-blog.csdnimg.cn/20210513141730372.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA4OTIxMDk=,size_16,color_FFFFFF,t_70"><img width="15" height="15" class="cke_reset cke_widget_drag_handler lazyload" title="点击并拖拽以移动" data-cke-widget-drag-handler="1" data-src="data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==">
好了到这里获取微信用户个人信息的功能基本是实现了。
如果文章对你有所帮助动动你的小手点个赞哟~
 
下一篇文章记录一下怎样获取微信手机号码。 
来源：https://www.cnblogs.com/blueVictory/p/14784853.html

頁: [1]

琼殿技术论坛's Archiver

微信小程序开发-获取微信用户个人信息