小程序完善用户信息跟条件渲染—小程序入门与实战【十五】

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

条件渲染

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>

总结

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

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