微信小程序-枯木学习笔记4-欢迎页面

原创已于 2022-06-16 09:19:00 修改 · 406 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

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

于 2022-06-15 17:42:23 首次发布

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

10 篇文章

订阅专栏

该博客介绍了一个微信小程序登录成功后转向的欢迎页面实现，页面展示登录人的姓名和欢迎语句。通过wx.switchTab跳转到home页面，home.js从本地缓存获取用户信息并显示在home.wxml上。页面背景设计需要注意特定的CSS设置以确保全屏显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

欢迎页面

登录成功后转向欢迎页面，欢迎页面显示登录人姓名和欢迎语句

wx.switchTab({
                        url: '/pages/home/home',
                      })

界面原型

在这里插入图片描述

1、home.js

准备页面要显示的数据，在登录后登录的用户信息已经被保存在本地的缓存中（h5），所以直接从缓存中获取即可

Page({

    data: {
        student: {}
    },

    onLoad(options) {
        var student = wx.getStorageSync('student')
        this.setData({
            student: student
        })
    }
})

2、home.wxml

<view>
    <view class="container" style="background-image: url(/https/blog.csdn.net/pages/images/mini_login_b_2.jpg);">
        <view>编号：{{student.name}}</view>
        <view>欢迎您使用考试系统</view>
    </view>
</view>

3、home.wxss

注意微信中为背景图高度全展示必须设置page的高度100%，同时container还必须是个子元素，同时利于微信独特的高度设置100vh，方可实现，这点设置比较麻烦，大家注意。

page{
    height: 100%;
}

.container{
  height: 100vh;
}