微信小程序开发案例 | 简易登录小程序

01、获取信息按钮改造

原先的按钮点击事件是弹出一个对话框，现在我们需要改成点击获取用户信息。

首先修改按钮点击事件对应的函数，index.wxml代码片段修改如下：

1. <!-- 3.按钮 -->  
2. <button bindtap="getMyInfo">点击获取个人信息</button>

然后找到index.js文件中自定义函数sayHello的部分，将其更名为getMyInfo，并修改里面的函数内容，代码片段如下：

1. /**
2. * 自定义函数--点击按钮后触发
3. */
4. getMyInfo: function () {
5. wx.getUserProfile({
6. desc: '展示用户信息', // 声明获取用户个人信息后的用途
7. success: res => {
8. console.log(res)
9. }
10. })
11. },

这里用到了小程序官方自带接口wx.getUserProfile获取用户信息，在其中的成功回调函数success里尝试用console.log语句打印输出获取到的内容。

注：之前也有开发者会用旧方法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>

这里用到了对象类型的变量userInfo，其中avatarUrl是微信头像路径地址，nickName是昵称。在实际开发中双花括号里面的变量名是可以自定义的，本案例为了方便后续对接特意写成和官方一样的变量名。

此时还需要在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. })

上述代码中第8-11行是在页面初始数据data属性中给变量userInfo进行了赋值，这样就可以与wxml页面共享数据了。

重新运行后查看调试器中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. },

当成功获取了用户信息，则更新isLogin的值为true，修改index.js中的getMyInfo函数内容如下：

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. },

现在修改index.wxml页面按钮的部分：

1. <!-- 3.按钮 -->
2. <button wx:if="{{!isLogin}}" bindtap="getMyInfo">点击获取个人信息</button>
3. <button wx:else bindtap="logout">退出登录</button>

追加“退出登录“按钮，并且使用配套属性wx:if和wx:else让这两个按钮不会同时出现。wx:if的取值为!isLogin，表示未登录状态才显示”点击获取个人信息“按钮，wx:else表示否则显示”退出登录“按钮。

最后在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-66  第2章阶段案例效果图