小程序完善用户信息——小程序入门与实战（16）

上一章节我们完成了小程序的登录功能。这一章节我们来讲解条件渲染跟小程序获取用户信息。

条件渲染

wx:if

在上一章节我们使用了 wx:if,现在来给大家介绍。

我们使用 wx:if="" 来判断是否需要渲染该代码块：

• wx:if=true 表示渲染该代码块。
• wx:if=false 表示不渲染该代码块。

# wxml
//当is_show 为 true 的时候就显示
//当is_show 为 false 的时候就显示
<view wx:if="{{is_show}}">
    黔在在,今年18岁
</view>

#js
Page({
    data:{
        is_show:true
    }
})

也可以用wx:elif和 wx:else 来添加一个 else 块：

<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>

block wx:if

就跟我在代码中写的例子：

<view class="nick-name">
            <blcok wx:if="{{token == '' && is_fill_info == false}}">
                点击登录
            </blcok>
            <blcok wx:if="{{token  && is_fill_info == false}}">
                点击授权头像昵称
            </blcok>
            <block wx:if="{{token  && is_fill_info == true}}">
                @黔在在
            </block>

如果你是一个文案或者要一次性判断多个组件标签，可以使用一个 <block/> 标签将多个组件包装起来，在上边使用 wx:if 控制属性。

注意：

<block/>并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何的渲染，只接受控制属性。

获取用户信息

<!--        获取用户信息-->
        <button class="user_info_button" open-type="getUserInfo" bindgetuserinfo="getUserInfo" wx:if="{{token  && is_fill_info == false}}"></button >

因为需要用户主动触发，所以我们跟获取手机号一样，使用 button 组件的点击来触发。

使用方法

需要将 button 组件 open-type 的值设置为 getUserInfo，当用户点击并同意之后，可以通过 bindgetuserinfo 事件回调获取到用户信息。

代码解析

部分 personal.js 的代码

 //获取用户信息
    getUserInfo(e){
            if (e.detail.encryptedData) {
               wx.login({
                   success:res=>{
                       let  data = e.detail;
                       data.code = res.code;
                       this.updateUserInfo(data)
                   }
               })
            }
    },
    //将信息传回给后端
    updateUserInfo(data) {
        let token = wx.getStorageSync('user_token');
        wx.showLoading({
            title: '更新中',
            mask: true
        })
        sandBox.post({
            api: 'api/sir/userInfo',
            data: data,
            header:{
                Authorization:token
            }
        }).then(res => {
                res = res.data;
                if (res.status) {
                //传给后端之后，需要更新个人中心的信息拿到头像跟昵称
                    this.getpersonalInfo();
                } else {
                    wx.showModal({
                        content: res.message || '请求失败',
                        showCancel: false
                    })
                }
                wx.hideLoading();
        }).catch(rej=>{
            wx.showModal({
                content: rej.message || '内部错误，请重试',
                showCancel: false
            })
        })
    },
    //获取个人中心页的信息
    getpersonalInfo(){
        let token = wx.getStorageSync('user_token');
        sandBox.get({
            api:'api/sir/me',
            header:{
                Authorization:token
            }
        }).then(res=>{
            res = res.data;
            if(res.status){
                this.setData({
                    detail:res.data,
                    is_fill_info:res.data.user_info //是否完善了信息
                })
            } else {
                wx.showModal({
                    content: res.message || '请求失败，请重试',
                    showCancel: false,
                })
            }
        }).catch(rej=>{
            wx.showModal({
                content: rej.message || '内部错误，请重试',
                showCancel: false,
            })
        })


    }

部分 personal.wxml 的代码

<view class="avatar">
<!--渲染头像-->
            <image src="{{detail.avatarUrl}}"></image>
        </view>
        <view class="nick-name">
            <blcok wx:if="{{token == '' && is_fill_info == false}}">
                点击登录
            </blcok>
            <blcok wx:if="{{token  && is_fill_info == false}}">
                点击授权头像昵称
            </blcok>
            <!--渲染昵称-->
            <block wx:if="{{token  && is_fill_info == true}}">
                @{{detail.nick_name}}
            </block>
        </view>

总结

• 条件渲染
• 获取并绑定用户信息

至此，我们的个人中心页的功能就完成了
。
下一章节我们讲解如何发布打卡的页面。

本文由博客群发一文多发等运营工具平台 OpenWrite 发布