广州十大网站建设,怎么做网站的301,seo云优化平台,设计说明怎么写200字1. 背景介绍#xff1a;
在我们开发微信小程序时#xff0c;登录时#xff0c;需要获取用户手机号作为唯一标识#xff0c;下面我介绍一下获取手机号的教程。
本篇文章介绍后端获取方法#xff1a;
前端工作
后端工作 前端
新建Page页面#xff0c;在xxx.wxml中加入…1. 背景介绍
在我们开发微信小程序时登录时需要获取用户手机号作为唯一标识下面我介绍一下获取手机号的教程。
本篇文章介绍后端获取方法
前端工作
后端工作 前端
新建Page页面在xxx.wxml中加入下方代码
!--index.wxml--
navigation-bar titleWeixin back{{false}} colorblack background#FFF/navigation-bar
scroll-view classscrollarea scroll-y typelistview classcontainerbutton open-typegetPhoneNumber bindgetphonenumbergetPhoneNumber获取手机号/buttonview{{phone}}/view
/view
/scroll-view
css
/**index.wxss**/
page {height: 100vh;display: flex;flex-direction: column;
}
.scrollarea {flex: 1;overflow-y: hidden;
}说明 上方按钮组件用于获取用户的手机号码信息。在按钮上设置了open-type属性为getPhoneNumber表示点击按钮时会获取用户的手机号码。同时使用bindgetphonenumber属性绑定了一个名为getPhoneNumber的事件当用户点击按钮并成功获取到手机号码时会触发这个事件 我们在xxx.js编写以下代码
Page({data: {phone:0},getPhoneNumber: function (e) {var that this// 一定是getPhoneNumber里面的codeconst code e.detail.codewx.login({success: res {if (res.code) {wx.getUserInfo({success: res1 {wx.request({url: https://你的后端接口/getPhoneNumber,method: POST,data: {code: code,encryptedData: res1.encryptedData,iv: res1.iv},success: res {that.setData({phone: res.data.phoneNumber})}})}})} else {console.log(获取失败 res.errMsg)}}})}
})说明 代码中首先定义了一个data属性其中phone初始值为0。 然后定义了一个getPhoneNumber函数该函数会在用户点击授权获取手机号按钮时触发。 函数中首先获取到用户点击授权按钮后返回的code然后调用wx.login接口获取用户的登录凭证。 接着调用wx.getUserInfo接口获取用户的基本信息其中包括加密后的手机号数据encryptedData和偏移向量iv。 最后通过wx.request发起一个POST请求将code、encryptedData和iv作为参数传递给后端接口后端进行解密操作并返回用户的手机号。 成功获取手机号后将手机号设置到data属性中的phone字段中用于在页面中显示用户的手机号码。 后端
后端我们拿c#去实现,其他语言实现方式都一样可供参考。
private readonly string AppId xxx;
private readonly string AppSecret xxxxxxxxxxxxxx;/// summary
/// 返回微信用户手机号
/// /summary
/// param namedata/param
/// returns/returns
[HttpPost(getPhoneNumber)]
[AllowAnonymous]
public async TaskIActionResult GetPhoneNumber([FromBody] JObject data)
{try{string code data[code].ToString();var phoneNumber getuserphonenumber(code).Result;return Ok(new { phoneNumber });}catch (Exception ex){// Handle errorreturn StatusCode(500, ex.Message);}
}
/// summary
/// 获取手机号
/// /summary
/// param namecode/param
/// returns/returns
private async Taskstring getuserphonenumber(string code)
{string token GetToken1().Result;string url $https://api.weixin.qq.com/wxa/business/getuserphonenumber?access_token token;JObject a new JObject();a.Add(code, code);using (HttpClient client new HttpClient()){var response await client.PostAsync(url, new StringContent(a.ToString()));var content await response.Content.ReadAsStringAsync();// 解析JSON字符串JObject jsonObject JObject.Parse(content);// 获取phoneNumber字段的值string phoneNumber jsonObject.SelectToken(phone_info.phoneNumber).ToString();return phoneNumber;}
}
/// summary
/// 调用api获取access_token
/// /summary
/// returns/returns
private async Taskstring GetToken1()
{string url $https://api.weixin.qq.com/cgi-bin/token?grant_typeclient_credentialappid{AppId}secret{AppSecret};using (HttpClient client new HttpClient()){var response await client.GetAsync(url);var content await response.Content.ReadAsStringAsync();dynamic result JObject.Parse(content);string sessionKey result.access_token;return sessionKey;}
}说明
我们后端方法GetPhoneNumber里面的code用于调用下方获取手机号接口 https://api.weixin.qq.com/wxa/business/getuserphonenumber?access_token 点我查看怎么获取access_token 请求参包括code和access_token调用此接口
官方地址: 点我查看接口文档 获取access_token接口如下
说明
需要小程序的两个参数AppId和AppSecret后端代码中可以看到 https://api.weixin.qq.com/cgi-bin/token?grant_typeclient_credentialappid{AppId}secret{AppSecret} 官方文档: 点我查看接口文档 运行效果演示
