目录

微信小程序开发之个人中心-首页4

JAY.LIN 收录于微信小程序

2025-01-14 约 527 字预计阅读 2 分钟

https://bing.ee123.net/img/rand?artid=120479004

目录

微信小程序开发之——个人中心-首页(4)

一概述

首页对应的页面为 pages/index/index
首页页面搭建
页面逻辑-点击头像完成页面跳转

二首页页面搭建

2.1 布局文件(index.wml)

<view class="home">
  <text class="welcome">我的主页</text>
  <image src="/images/avatar.png" mode="aspectFill" bindtap="changeImage"></image>
</view>
<view class="content">
  <view>昵称：5秒钟的记忆</view>
  <view>星座：天平座</view>
  <view>兴趣：看书、旅游</view>
  <view>QQ：123456789</view>
  <view>电话：123456789</view>
</view>

2.2 页面样式文件(index.wxss)

.home{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.welcome{
  font-size: 50rpx;
  color: orange;
  margin: 40rpx 0;
}
.home>image{
  width: 300rpx;
  height: 300rpx;
  border-radius: 50%;
  border-color: maroon;
  border-style: solid;
}
.content{
  font-size: 32rpx;
  width: 400rpx;
  margin: 50rpx auto;
}
.content>view{
  text-align: center;
  padding: 10rpx 0;
  color: orange;
}

三页面逻辑-(index.js)

Page({
  changeImage:function(e){
    //第1中方式，只能跳转tabBar页面
    wx.switchTab({
      url: '/pages/person/person',
    })
    
    //第2种方式，可以跳转tabBar或者非tabBar页面
    // wx.reLaunch({
    //   url: '/pages/person/person',
    // })


    //第3中navigateTo，只能跳转非标签页，可以返回上个页面
    // wx.navigateTo({
    //   url: '/pages/person/person',
    // })

    //第4中,redirectTo，非标签页，关闭当前页面
    // wx.redirectTo({
    //   url: '/pages/person/person',
    // })

  }
})

四源码