微信小程序-枯木学习笔记5-我的信息

原创已于 2022-06-16 09:35:26 修改 · 175 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #学习 #小程序

于 2022-06-15 17:49:24 首次发布

微信小程序专栏收录该内容

10 篇文章

订阅专栏

此博客介绍了微信小程序中如何实现登录用户信息的显示，通过'onLoad'生命周期函数读取本地缓存的用户数据，并在页面上详细展示，包括编号、身份证号、姓名等个人信息。

功能：我的信息

登录后，点tab页夹切换到“我的”，展示登陆者的信息。其本质其实和欢迎页面一个思路。
切换到我的tab时，onLoad读取缓存中的登录用户信息，然后再页面打印详细的用户信息

页面原型

在这里插入图片描述

1、my.js

Page({
    data: {
        student: {}
    },

    onLoad(options) {
        var student = wx.getStorageSync('student')
        this.setData({
            student: student
        })
        console.log("数据：")
        console.log(this.data.student)
    }
})

2、my.wxml

<view>
    <view class="container" style="background-image: url(/pages/images/mini_login_b_2.jpg);">
        <view>
            <view>编号：{{student.id}}</view>
            <view>身份证号：{{student.idCard}}</view>
            <view>姓名：{{student.name}}</view>
            <view>性别：{{student.sex}}</view>
            <view>年龄：{{student.age}}</view>
            <view>地址：{{student.address}}</view>
        </view>
    </view>
</view>

3、my.wxss

page{
    height: 100%;
}

.container{
  height: 100vh;
}