小程序 mathjs渲染公式_小程序完善用户信息跟条件渲染—小程序入门与实战（十五）...-CSDN博客

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

条件渲染

wx:if

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

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

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

# wxml
//当is_show 为 true 的时候就显示
//当is_show 为 false 的时候就显示

    黔在在,今年18岁

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

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

 1 
 2 
 3

block wx:if

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


                点击登录
                点击授权头像昵称
                @黔在在

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

❝
注意：

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

获取用户信息

因为需要用户主动触发，所以我们跟获取手机号一样，使用 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 的代码



                点击登录
                点击授权头像昵称
                @{{detail.nick_name}}

总结

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

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

—— 推 荐 阅 读 ——小程序数据缓存—小程序入门与实战(十四)个人中心页跟小程序登录流程—小程序入门与实战(十三)项目不同环境配置不同接口域名—小程序入门与实战(十二)小程序模块化—小程序入门与实战(十一)数据分页跟小程序触底事件—小程序入门与实战(十)

重磅！前端开发交流群已成立

「为了解决前端开发之痛——散点自学+基础不牢+遇到问题无人解答，」

更为了让你少掉两根头发，多认识几个道友，黔在在创建了一个「前端开发交流群」，更好的跟大家一起学习交流，大家一起进步，一起成为更好的自己。

纯分享无套路，拿商业项目教你入门+实战。

有兴趣入群的同学，可长按扫描下方二维码，或添加微信号 「「guojiang421」」