微信小程序开发之——个人中心-首页(4)_创建一个包含:首页和个人中心页2个标签的小程序,每个标签都有对应的页面、图

一 概述

• 首页对应的页面为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>
1
2
3
4
5
6
7
8
9
10
11

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;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

三 页面逻辑-(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',
    // })

  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

四 源码

• 源码
• 物流查询服务器