微信生态圈|如何获取用户手机号

• 确定目标
• 确定达到目标的路径
• “拼”起来
• 踩过的坑
• 代码

期望的效果【目标】：

实现

step1:检查小程序注册信息【注册主体】是否满足条件

step2:检查前端开发使用的基础类库的版本

step3:前端发小程序的button组件获取code

step4:开发者后台调用微信后台提供的 phonenumber.getPhoneNumber 接口，消费code来换取用户手机号。每个code有效期为5分钟，且只能消费一次。

你看文档已经写得很清楚了！那这个篇文章有啥用？

是的，文档把拆分的组件已经介绍清楚了。不过，文档并没有实现我们想要的功能

我们现在做的事情就跟拼乐高一样，使用微信小程序提供的组件，“拼”成我们需要的样子，把数据沉淀我们自己的系统中。

开始“拼”了：

1、小程序主体已经通过企业认证。通过

2、前端使用的基础类库是2.30.0，可以通过消费code来换手机号。通过

3、使用微信开始者工具引入button组件来获取code

截图中代码，详见文末

4、消费code换手机号

或

至此，“拼”好了

分享下踩的坑

1、【微信开发者工具】 无法拿到code

操作路径： 预览->启动电脑端自动预览->点击Button->允许

Button中绑定的事件没有被触发

解决办法： 直接在开发者工具中点击Button就可以了

2、无法调用本地localhost的服务

request 合法域名校验出错

VM14 asdebug.js:1 如若已在管理后台更新域名配置，请刷新项目配置后重新编译项目，操作路径：“详情-域名信息”

VM14 asdebug.js:1 http://127.0.0.1:8080 不在以下 request 合法域名列表中，请参考文档：https://developers.weixin.qq.com/miniprogram/dev/framework/ability/network.html

(env: Win10,mp,1.0; lib: 2.30.0)

解决办法：

本地设置-》勾选 “不校验合法域名、web-view(业务域名)、TLS版本以及HTTPS证书”

这个场景，添加127.0.0.1到域名配置是不合适的。

3、TYPEERROR: CANNOT READ PROPERTY 'SETDATA' OF UNDEFINED

解决办法：

（1）、如果函数作为对象的方法调用，THIS指向的是这个上级对象，即调用方法的对象。

（2）、如果是构造函数中的THIS，则THIS指向新创建的对象本身。

4、{"errcode":40001,"errmsg":"invalid credential, access_token is invalid or not latest rid: 63e9fd70-68d86339-6aba2916"}

解决办法：

token放缓存，每隔5分钟刷新一次

show the code:

前端：

https://gitee.com/baidumap/wx_user/blob/master/front_end/pages/index/index.wxml

https://gitee.com/baidumap/wx_user/blob/master/front_end/pages/index/index.js

后端：https://gitee.com/baidumap/wx_user/blob/master/back_end/src/main/java/com/wx/adapter/api/MiniAppUserController.java