微信小程序开发之——个人中心-首页(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',// })}
})

四源码

源码
物流查询服务器

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

微信小程序开发之——个人中心-介绍(1)
一概述个人中心展示图个人中心各个页面展示及功能介绍二个人中心页面介绍 2.1 展示 2.2 页面构成 2.2.1 首页说明: 首页包含:昵称,星座,兴趣,QQ,电话点击头像:跳转个人中心 ...
微信小程序开发之——个人中心-订单物流查询(8)
一概述订单服务器搭建订单物流查询页面对应的页面为pages/order/order 二订单服务器搭建 2.1 配置及模块安装 2.1.1 初始化项目,自动创建package.json配置文件 ...
微信小程序开发之——个人中心-个人中心(5)
一概述个人中心对应的页面为:pages/person/person 页面搭建页面逻辑二页面搭建 2.1 布局文件(person.wml)  <view c ...
微信小程序开发之——个人中心-个人资料修改(7)
一概述个人资料修改对应的页面为:pages/modify/modify 页面搭建页面逻辑二页面搭建 2.1 布局文件(modify.wml) <form bindsubmit=&quo ...
微信小程序开发之——个人中心-收货地址(9)
一概述个人详情页对应的页面为:pages/address/address 页面搭建页面逻辑二页面搭建 2.1 布局文件(address.wml) <view class="l ...
微信小程序开发之——个人中心-个人详情页(6)
一概述个人详情页对应的页面为:pages/detail/detail 页面搭建页面逻辑二页面搭建 2.1 布局文件(detail.wml) <view class="info ...
微信小程序开发之——个人中心-API(2)
一概述页面跳转方法:wx.switchTab/wx.navigateTo/wx.redirectTo/wx.reLaunch 从本地相册或照相机拍照:wx.chooseImage 选择用户地址:w ...
微信小程序开发的首页设置
在我们微信小程序开发的时候,页面切换十分麻烦,这个时候你可以设置打开软件时默认显示的页面,设置十分简单第一种方法:在app.json中的pages选项中: 这样就设置首页是Index, 第二种方法就 ...
python开发微信小程序-Python 开发者的微信小程序开发实践
导读在知乎上,有人提问"如何使用 Python 开发微信小程序". 其实微信小程序作为一个前端的机制,Python 并不能插上边.只不过可以作为后端接口为微信小程序提供数据服务而 ...

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

一概述

二首页页面搭建

2.1 布局文件(index.wml)

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

三页面逻辑-(index.js)

四源码

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

最新文章

热门文章

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

一 概述

二 首页页面搭建

2.1 布局文件(index.wml)

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

三 页面逻辑-(index.js)

四 源码

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

最新文章

热门文章

一概述

二首页页面搭建

三页面逻辑-(index.js)

四源码