微信小程序开发案例 | 简易登录小程序
01、获取信息按钮改造
原先的按钮点击事件是弹出一个对话框，现在我们需要改成点击获取用户信息。
首先修改按钮点击事件对应的函数，index.wxml代码片段修改如下：
1. <!-- 3.按钮 -->
2. <button bindtap="getMyInfo">点击获取个人信息</button>1. /**
2. * 自定义函数--点击按钮后触发
3. */
4. getMyInfo: function () {
5. wx.getUserProfile({
6. desc: '展示用户信息', // 声明获取用户个人信息后的用途
7. success: res => {
8. console.log(res)
9. }
10. })
11. },注：之前也有开发者会用旧方法getUserInfo来获取用户信息，但是目前微信官方声明不推荐使用该方法，自2021年4月13日起，getUserInfo已经不再弹出弹窗并直接返回无用的匿名用户个人信息。因此这里用最新推荐的getUserProfile来完成本案例。
保存并重新运行本案例，点击页面中的按钮后出现提示对话框如图2-61所示。
■ 图2-61 授权许可对话框显示效果
点击“允许“按钮后查看调试器Console面板打印输出的内容，效果如下：
■ 图2-62 调试器Console面板-获取微信个人信息
由图可见，授权后已获得当前用户的微信个人信息了。下一步我们将把这些信息传递给页面渲染出来。
02、页面显示内容改造
首先将页面中的头像和昵称部分都不要写成固定值，而是改成用{{…}}（双花括号）表示的变量，这样就可以在js文件中通过代码控制。index.wxml代码片段修改如下：
1. <!-- 1.头像 -->
2. <image src="{{userInfo.avatarUrl}}"></image>
3.
4. <!-- 2.昵称 -->
5. <text>{{userInfo.nickName}}</text>此时还需要在js里面给变量赋一个初始值，否则初始的头像和文字都不显示了。
index.js代码修改内容如下：
1. // index.js
2. Page({
3.
4. /**
5. * 页面的初始数据
6. */
7. data: {
8. userInfo: {
9. avatarUrl: '/images/logo.png',
10. nickName: 'Hello World'
11. }
12. },
13. …后续代码略…14. })重新运行后查看调试器中AppData面板内容，如图2-63所示。
■ 图2-63 调试器AppData面板-共享页面数据
由图可见此时已经可以看到index页面的js文件与wxml文件共享数据userInfo了。
此时页面显示效果如图2-64所示。
■ 图2-64 默认首页效果
修改index.js文件中的getMyInfo函数，在获取到微信个人信息后使用this.setData方法更新数据给wxml页面使用。相关代码片段修改后如下：
1. /**
2. * 自定义函数--点击按钮后触发
3. */
4. getMyInfo: function () {
5. wx.getUserProfile({
6. desc: '展示用户信息',// 声明获取用户个人信息后的用途
7. success: res => {
8. console.log(res)
9. this.setData({
10. userInfo: res.userInfo
11. })
12. }
13. })
14. },
■ 图2-65 微信个人信息展示
由图2-65可见，当前已经可以成功获取用户的微信个人信息了。
但是在已经显示用户信息的页面这个按钮还是可以反复被点击，造成授权弹窗不断重复出现。因此下一节我们还得优化此问题，在用户已经授权确认后隐藏该按钮不要再出现。
03、登录/退出按钮切换
为了避免重复授权弹窗，假设用户已经同意显示个人信息，则隐藏获取个人信息的按钮，改成显示另外一个按钮用于退出登录回到初始页面效果。
优化思路是给当前页面标记一个登录状态isLogin，通过检查这个登录状态为真则展示真实用户信息、为假则回到初始页面效果。修改index.js代码中data属性内容如下：
1. /**
2. * 页面的初始数据
3. */
4. data: {
5. userInfo: {
6. avatarUrl: '/images/logo.png',
7. nickName: 'Hello World'
8. },
9. isLogin: false
10. },1. /**
2. * 自定义函数--点击按钮后触发
3. */
4. getMyInfo: function () {
5. wx.getUserProfile({
6. desc: '展示用户信息',// 声明获取用户个人信息后的用途
7. success: res => {
8. console.log(res)
9. this.setData({
10. userInfo: res.userInfo,
11. isLogin: true
12. })
13. }
14. })
15. },1. <!-- 3.按钮 -->
2. <button wx:if="{{!isLogin}}" bindtap="getMyInfo">点击获取个人信息</button>
3. <button wx:else bindtap="logout">退出登录</button>最后在index.js中追加新的自定义函数logout用于恢复初始页面效果，相关代码如下：
1. // index.js
2. Page({
3.
4. /**
5. * 页面的初始数据
6. */
7. data: {…内容略…},
8.
9. /**
10. * 自定义函数--点击按钮后触发
11. */
12. getMyInfo: function () {…内容略…},
13.
14. /**
15. * 自定义函数--点击按钮后触发
16. */
17. logout: function () {
18. this.setData({
19. userInfo: {
20. avatarUrl: '/images/logo.png',
21. nickName: 'Hello World'
22. },
23. isLogin: false
24. })
25. },
26. …后续代码略…27. })
■ 图2-66 第2章阶段案例效果图
- 点赞
- 收藏
- 关注作者
评论（0）