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

一概述

个人中心对应的页面为：pages/person/person
页面搭建
页面逻辑

二页面搭建

2.1 布局文件(person.wml)

<!--头像-->
<view class="avatar"><image src="/images/avatar.png" mode="scaleToFill"></image>
</view>
<!--付款及订单-->
<view class="content"> <view><image src="/images/iconone.png"></image><view>待付款</view></view><view><image src="/images/icontwo.png"></image><view>已退款</view></view><view><image src="/images/iconthree.png"></image><view>全部订单</view></view>
</view>
<!--个人资料等-->
<view class="menu"><view bindtap="info">个人资料<image class="arrow" src="/images/arrow.png"></image></view><view bindtap="order">订单物流查询<image class="arrow" src="/images/arrow.png"></image></view><view bindtap="address">选择收货地址<image class="arrow" src="/images/arrow.png"></image></view><view bindtap="contact">客服联系方式<image class="arrow" src="/images/arrow.png"></image></view>
</view>

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

page{background-color: #f4f4f4;font-size: 32rpx;
}
.avatar{width: 100%;background-color: wheat;height: 400rpx;display: flex;justify-content: center;align-items: center;
}
.avatar>image{width: 200rpx;height: 200rpx;border-radius: 50%;border: 10rpx solid rgba(0, 0, 0, 0.1);
}
.content{background-color: white;display: flex;flex-direction: row;align-items: center;justify-content: center;padding: 65rpx 0;
}
.content>view{flex: 1;text-align: center;
}
.content>view>image{width: 64rpx;height: 50rpx;
}
.menu{padding: 20rpx;background-color: white;margin-top: 20rpx;box-sizing: border-box;
}
.menu>view{padding: 20rpx;line-height: 60rpx;border-bottom: 1px solid gray;height: 60rpx;
}
.menu>view:last-child{border: none;
}
.arrow{width: 30rpx;height: 32rpx;float: right;margin-top: 16rpx;
}

三页面逻辑—person.js

Page({//点击个人资料info:function(){//保留当前页面，点击页面上左脚箭头，返回上一个页面wx.navigateTo({url: '/pages/detail/detail',})},//订单物流查询order:function(e){//跳转到订单查询页面wx.navigateTo({url: '/pages/order/order',})},//选择收货地址address:function(){wx.navigateTo({url: '/pages/address/address',})},//客服联系方式contact:function(){wx.makePhoneCall({phoneNumber: '123456789',})}
})

四源码

源码
物流查询服务器

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

微信小程序开发分销制度济南_花店微信小程序开发教程
如何将自己的鲜花商品快速配送出去,避免鲜花过期浪费,是很多传统花店商家的难题.不过随着微信小程序的出现,这一难题也渐渐得到了解决.花店商家可以通过自己的小程序商城,打通线上渠道,可以加大推广.扩大销量 ...
python开发微信小程序-Python 开发者的微信小程序开发实践
导读在知乎上,有人提问"如何使用 Python 开发微信小程序". 其实微信小程序作为一个前端的机制,Python 并不能插上边.只不过可以作为后端接口为微信小程序提供数据服务而 ...
与张小龙同行：微信小程序开发
与张小龙同行:微信小程序开发概要基于微信小程序轻快的特点,我们拟定了小程序界面设计指南和建议. 设计指南建立在充分尊重用户知情权与操作权的基础之上.旨在微信生态体系内,建立友好.高效.一致的用户体 ...
小程序开发代码_快速学会微信小程序开发，无需懂代码！
现在想要制作自己的小程序的人越来越多,但大多数都不懂任何代码知识,不知该如何制作.其实随着各种第三方开发工具的出现,无需微信小程序开发源代码,小白也能顺利生成一个自己的小程序了.下面我就跟大家说下该如 ...
小程序开发用什么编程语言_微信小程序开发教程是什么？费用多少？
微信小程序如今已经非常常见,渗透到了我们日常生活的方方面面,包括生活服务.出行.点餐.电商购物.企业展示--商家可以开发适合自己行业的小程序,以吸引线上用户,同时提高自身服务运营效率.不过这些不同种类 ...
微信小程序开发入门（连载）—— 开发前的准备工作
上一篇:微信小程序开发入门(连载)-- 认识微信小程序 1. 注册小程序帐号在微信公众平台官网首页(https://mp.weixin.qq.com)点击右上角的"立即注册"按钮 ...
微信小程序开发一个小型商城（八、个人页面）
上一篇文章:微信小程序开发一个小型商城(七.支付页面) 在上方还是使用wx:if进行判断是否有登录的数据,有的话将数据当中的图片和名字渲染到页面当中,不存在的话使用一个登录按钮表示需要用户登录.往下分 ...
微信小程序开发09 开放数据：微信生态帮助业务快速落地
你好,我是俊鹏,从今天开始,我会用四讲的时间,从"效率.留存.体验和更新"四个角度出发,带你学习目前在微信小程序开发领域中的一些前沿技术和实践经验. 这四个角度是团队在日常工作中最 ...
知识库微信小程序开发
11月,CSDN知识库研发负责人尚林凯在厦门进行了微信小程序开发的分享.在1个小时的分享时间里,谈到小程序开发给技术人带来的影响,如何去开发小程序,以及在开发过程中踩过的那些坑. 什么是小程序小程序 ...
微信小程序开发工具结合腾讯云开发AI人脸识别和身份证识别——基于腾讯云开发者实验项目
微信小程序开发工具结合腾讯云开发AI人脸识别和身份证识别--基于腾讯云开发者实验项目开通腾讯云相关权限(AI人脸识别,文字识别-身份证识别) 查看API密钥部署微信小程序成功演示代码包开通腾 ...

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

一概述

二页面搭建

2.1 布局文件(person.wml)

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

三页面逻辑—person.js

四源码

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

最新文章

热门文章

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

一 概述

二 页面搭建

2.1 布局文件(person.wml)

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

三 页面逻辑—person.js

四 源码

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

最新文章

热门文章

一概述

二页面搭建

三页面逻辑—person.js

四源码