绑定微信:显示对话框提示绑定并获取微信用户相关信息

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

先去注册一个新的帐号 .. 退出一下 .. 再按一下注册 ..

输入用户名 .. 邮件地址 ... 再设置一下密码 .. 然后注册 ..

再回到项目 ..

打开项目里的用户档案页面 .. pages .. users .. show.js ..

我们可以暂时先在这个页面的 onShow 方法里,弹出一个对话框提示用户是否要绑定微信帐号 .. 以后我们会再找个合适的地方去显示这个对话框 .. 比如用户注册成功以后,会被重定向到这个用户档案页面 .. 然后可以再弹出对话框提示用户 ..

现在我们主要关注一下这个绑定的功能 ..

在小程序里弹出一个对话框可以使用 wx.showModal 这个接口 .. 一个对象参数 .. 添加一个 title 属性。设置一下对话框的标题 .. 绑定微信帐号 ..

content 是对话框上的具体的内容 .. 绑定以后,可以直接用微信帐号登录。

成功以后,会调用 success 方法,添加一个这样的方法 .. 方法有个 response 参数 ..

如果用户按的是对话框里的 确认 按钮,response 里的 confirm 属性的值就会是 true ... 判断一下,response 里的 confirm 的值 .. 如果是 true .. 我们可以去做点事情 .. 先把这个 response 输出到控制台上检查一下 ..

回到开发者工具 ..

页面上会显示一个对话框 .. 按一下 确定 ..

控制台上会输出得到的响应 .. 在这个响应里 .. confirm 的值是 true,表示用户是按了对话框上的 确定 按钮 ..

cancel 的值是 false .. . 如果它的值是 true,就表示用户按的是 取消 按钮 ..

再回到项目 ..

这里我们再用一个 wx.getUserInfo 这个接口,获取用户相关的信息 .. 如果用户之前没有授权,会先提示一个授权窗口 ..

成功以后,会调用 success 方法 .. 方法有个 response 参数 .. 里面可以判断一下,如果有 response ..

就把这个 response 输出到控制台上 ..

到模拟器上试一下 .. 小程序现在显示的就是个人档案页面 .. 页面上现在会显示一个对话框 .. 提示用户是否要绑定微信帐号 .. 按一下 确定 ..

这样就会调用 wx.getUserInfo 去获取用户相关的信息.. 我之前没有授权过,所以会弹出一个授权窗口,提示是否要授权小程序使用微信用户相关的信息 ..

按一下 允许 .. 会在控制台上输出得到的 response,也就是响应 .. 这个响应就是用户相关的信息 ..

暂时我们要用的东西是在 userInfo 这个属性里 .. 这里会有用户的头像地址 .. 所在城市,国家,性别 这些信息 ..

再刷新一下页面 .. 提示是否绑定微信 .. 确定 ..

这次没有提示授权,直接会输出用户相关的信息 ..

开发者工具上有个清缓存 .. 打开它 .. 选择清除授权数据 ..

再刷新一下页面 ... 按一下 确定 .. 因为刚才清除了用户的授权 .. 所以这次又会出现授权提示 ..

这回试一下 拒绝 ... 小程序这次什么也没做 ..

再去清除一下授权数据 ... 刷新一下页面 ...

确定 ... 然后 允许 ... 在控制台上会输出得到的用户相关的信息 .. 这个信息应该就是使用我们小程序的用户的微信,关于用户的相关信息 ...

绑定微信:显示对话框提示绑定并获取微信用户相关信息《 微信小程序:微信绑定 #6 》

统计

15260
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点