微信小程序开发之OFO共享单车,微信小程序个人中心页制作
本文摘要
上一节我们实现了单车报障页,这一节我们来实现个人中心页面: 老套路,先进行页面分析 个人中心页有两种状态,即未登录和已登录,所以要求不同数据驱动产生的不同页面 点击登录/退出登录按钮需要响应合理逻辑,并改变按钮样式 只有登录状态下才会显示我的钱包按钮
上一节我们实现了单车报障页,这一节我们来实现个人中心页面:
老套路,先进行页面分析
页面结构
复制代码
指令wx:if="boolean":
当boolean为true,被它(block)包裹的元素将会显示,否则不现实,这样可以处理在未登录状态下不显示头像和钱包按钮
页面样式
复制代码
页面数据逻辑(未登录状态下的数据模板初始值定义在data对象里)
复制代码
使用wx.login({})API来进行登录,使用wx.getUserInfo({})API来获取用户信息
我们将用户信息使用wx.setStorage({})API和wx.getStorage({})这两个API来设置和获取本地存储,用于模拟维护用户登录状态。真实情况下需要使用session
微信小程序开发之OFO共享单车——扫码
微信小程序开发之OFO共享单车——单车报障页
微信小程序开发之OFO共享单车——个人中心页
微信小程序开发之OFO共享单车——钱包与充值
老套路,先进行页面分析
- 个人中心页有两种状态,即未登录和已登录,所以要求不同数据驱动产生的不同页面
- 点击登录/退出登录按钮需要响应合理逻辑,并改变按钮样式
- 只有登录状态下才会显示我的钱包按钮
页面结构
-
-
-
-
-
{{userInfo.nickName}} -
-
-
我的钱包 -
>
指令wx:if="boolean":
当boolean为true,被它(block)包裹的元素将会显示,否则不现实,这样可以处理在未登录状态下不显示头像和钱包按钮
页面样式
- /* pages/my/index.wxss */
- .user-info{
- background-color: #fff;
- padding-top: 60rpx;
- }
- .user-info image{
- display: block;
- width: 180rpx;
- height: 180rpx;
- border-radius: 50%;
- margin: 0 auto 40rpx;
- box-shadow: 0 0 20rpx rgba(0,0,0,.2)
- }
- .user-info text{
- display: block;
- text-align: center;
- padding: 30rpx 0;
- margin-bottom: 30rpx;
- }
- .btn-login{
- position: absolute;
- bottom: 60rpx;
- width: 90%;
- left: 50%;
- margin-left: -45%;
- }
- .gray{
- background-color: #ccc;
- }
页面数据逻辑(未登录状态下的数据模板初始值定义在data对象里)
- // pages/my/index.js
- Page({
- data:{
- // 用户信息
- userInfo: {
- avatarUrl: "",
- nickName: "未登录"
- },
- bType: "primary", // 按钮类型
- actionText: "登录", // 按钮文字提示
- lock: false //登录按钮状态,false表示未登录
- },
- // 页面加载
- onLoad:function(){
- // 设置本页导航标题
- wx.setNavigationBarTitle({
- title: '个人中心'
- })
- // 获取本地数据-用户信息
- wx.getStorage({
- key: 'userInfo',
- // 能获取到则显示用户信息,并保持登录状态,不能就什么也不做
- success: (res) => {
- wx.ShopfadeLoading();
- tShopfas.setData({
- userInfo: {
- avatarUrl: res.data.userInfo.avatarUrl,
- nickName: res.data.userInfo.nickName
- },
- bType: res.data.bType,
- actionText: res.data.actionText,
- lock: true
- })
- }
- });
- },
- // 登录或退出登录按钮点击事件
- bindAction: function(){
- tShopfas.data.lock = !tShopfas.data.lock
- // 如果没有登录,登录按钮操作
- if(tShopfas.data.lock){
- wx.showLoading({
- title: "正在登录"
- });
- wx.login({
- success: (res) => {
- wx.ShopfadeLoading();
- wx.getUserInfo({
- withCredentials: false,
- success: (res) => {
- tShopfas.setData({
- userInfo: {
- avatarUrl: res.userInfo.avatarUrl,
- nickName: res.userInfo.nickName
- },
- bType: "warn",
- actionText: "退出登录"
- });
- // 存储用户信息到本地
- wx.setStorage({
- key: 'userInfo',
- data: {
- userInfo: {
- avatarUrl: res.userInfo.avatarUrl,
- nickName: res.userInfo.nickName
- },
- bType: "warn",
- actionText: "退出登录"
- },
- success: function(res){
- console.log("存储成功")
- }
- })
- }
- })
- }
- })
- // 如果已经登录,退出登录按钮操作
- }else{
- wx.showModal({
- title: "确认退出",
- content: "退出后将不能使用ofo",
- success: (res) => {
- if(res.confirm){
- console.log("确定")
- // 退出登录则移除本地用户信息
- wx.removeStorageSync('userInfo')
- tShopfas.setData({
- userInfo: {
- avatarUrl: "",
- nickName: "未登录"
- },
- bType: "primary",
- actionText: "登录"
- })
- }else {
- console.log("cancel")
- tShopfas.setData({
- lock: true
- })
- }
- }
- })
- }
- },
- // 跳转至钱包
- movetoWallet: function(){
- wx.navigateTo({
- url: '../wallet/index'
- })
- }
- })
使用wx.login({})API来进行登录,使用wx.getUserInfo({})API来获取用户信息
我们将用户信息使用wx.setStorage({})API和wx.getStorage({})这两个API来设置和获取本地存储,用于模拟维护用户登录状态。真实情况下需要使用session
其他章节
微信小程序开发之OFO共享单车——扫码
微信小程序开发之OFO共享单车——单车报障页
微信小程序开发之OFO共享单车——个人中心页
微信小程序开发之OFO共享单车——钱包与充值
第二部分:如何开通一个小商店
相关文章
****更多行业产品开发方案,请关注 加速度JSUDO***
<以上资讯仅供参考,如果您需解决具体问题,建议您关注作者;如果有软件产品开发需求,可在线咨询加速度产品经理获取方案和报价>
加速度JSUDO是一家企业级数字化解决方案提供商,专注于软件开发、网络营销、数字化转型咨询及云计算服务。核心业务包括定制化ERP/CRM系统、快速应用开发、大数据分析及物联网(IoT)解决方案,助力企业提升效率与智能化水平。服务覆盖制造业、零售、物流等多行业,致力于通过技术创新推动客户数字化转型。
添加客服微信获取更多内容










