【微信小程序开发(从零到一)】——个人中心页面的实战项目(二)

在这里插入图片描述


👨‍💻个人主页:@开发者-曼亿点

👨‍💻 hallo 欢迎 点赞👍 收藏⭐ 留言📝 加关注✅!

👨‍💻 本文由 曼亿点 原创

👨‍💻 收录于专栏:微信小程序开发

🅰


个人中心运行展示视频


文章目录

    • 🅰
    • 前言
    • 🎶 一、订单物流查询
    • 🎶 二、选择收货地址查询
    • 🎶 三、客服联系电话
        • 结束语🥇


前言

  个人中心案例设计了两个标签页面,“首页”展示个人的基本信息及简单的自我介绍。图一所示:“个人中心”展示个人资料、订单物流查询、选择收货地址、客服联系方式等功能。页面效果图二所示:

图一:
在这里插入图片描述
图二:
在这里插入图片描述

  “首页”与’个人中心”页面时标签之间的跳转。点击”首页“中头像上方提示语”点击跳转“,即可以跳转到”个人中心“页面,当然底部标签页面也可以实现页面的跳转。


🎶 一、订单物流查询


  在”个人中心“页面单击”订单物流查询“跳转到”订单查询“页面,可以选择快递公司,输入运单号,点击”查询“按钮,在页面下展示物流信息。下面编写代码实现订单查阅功能。
pages/person/person.wxml文件中,编写“订单物流查询”绑定oreder()函数,具体代码如下:

<view bindtap="order"> 
订单物流查询
<image class="arrow"src="/images/arrow.png"></image>
</view>

  进入pages/person/person.js文件中,增加oreder()函数,实现跳转,具体代码如下:

order:function(e){wx.navigateTo({url: '/pages/order/order',})},

  完成上面几部分的代码后,将进入订单物流查询pages/order/order.wxml文件,给”查询“按钮绑定search()函数,设计”订单查询“页面布局,具体代码如下:

<!--pages/order/order.wxml-->
<view class="container">
<view class="title">欢迎进入快递查询系统</view>
<view class="section">
<view class="title">请选择快递公司:</view>
<picker class="input" bindchange="companyInput" value="{{index}}" range="{{com}}">
<view>{{com[index]}}</view>
</picker>
</view>
<view class="section">
<view class="title">运单号:</view>
<input class="input" type="number" bindinput="noIput" placeholder="请输入运输单号"/>
</view>
<button type="primary" bindtap="search">查询</button>
<scroll-view scroll-y class="orderlist">
<view wx:for="{{expressInfo.result.list}}" wx:key=" *this">
<text>{{item.datetime}}</text>{{item.remark}}
</view>
</scroll-view>
</view>

  上述代码中,在“订单查询“页面,添加了快递公司名称、运单号两个输入框。另外一个查询按钮。输入信息,单击按钮进行1信息查询。

  进入pages/order/order.js文件,调用接口获取数据并在页面展示数据,具体代码如下:

  data: {
no:null,
company:['sf','sto','yt','yd','tt'],
com:['顺丰','申通','圆通','韵达','天天'],
index:0,
expressInfo:null,},search:function(){
wx.showLoading({title: '加载中',
})

  接着在pages/order/order.wxml文件中,编写样式代码,具体如下:

/* pages/order/order.wxss */
.container{padding: 20rpx;
}
.container>.title{text-align: center;
}
button{width: 300rpx;height: 80rpx;line-height: 80rpx;margin: 30rpx auto;
}.section{width: 100%;box-sizing: border-box;margin-top: 80rpx;overflow: hidden;
}
.section>.title{width: 20%;float: left;font-size: 28rpx;text-align: right;
line-height: 42rpx;
}
.section>.input{border: 1px solid gainsboro;width: 70%;padding: 5rpx 10rpx;float: right;
font-size: 32rpx;
}
.orderlist{height: 300px;
}
.orderlist view{border-bottom: 1px solid #efefef;font-size: 32rpx;padding: 10rpx 0;
}
.orderlist text{color: red;font-size: 28rpx;
}

  还可以在pages/order/order.json文件中修改导航栏标题,代码如下:

{"usingComponents": {},"navigationBarTitleText": "物流信息"
}

🎶 二、选择收货地址查询


  在”个人中心“页面,点击”选择收货地址“,跳转到,”收货地址“页面,进入页面后默认没有数据信息,点击页面下方”获取收货地址“,进入收货地址原生页面。用户授权后,选取通讯录地址或者填写新增地址后,返回”收货地址页面“,展现地址数据信息。这里需要绑定wx.chooseAddress()函数调出用户编辑收货地址原生界面,并在编辑完成后返回用户选择的地址信息,具体操作如下:
  在pages/person/person.wxml文件,给”选择收货地址“绑定address()函数,具体代码如下:

<view bindtap="address">
选择获取地址
<image class="arrow"src="/images/arrow.png"></image>
</view>

  接下来pages/person/person.js文件,增加address()函数,具体代码如下:

  address:function(){wx.navigateTo({url: '/pages/address/address',})},

  执行完上面代码后,此时进入”收货地址“页面,该页面包括收货人的姓名、邮编、地区、收货地址、国家码、手机号等信息。因此在pages/address/address.wxml文件,设计”收货地址“页面,具体代码如下:

<!--pages/address/address.wxml-->
<view class="list"> 
<view>
<view class="head">收货人姓名</view>
<view class="body">{{addressInfo.userName}}</view>
</view>
<view><view class="head">邮编</view>
<view class="body">{{addressInfo.postalCode}}</view>
</view>
<view><view class="head">地区</view>
<view class="body">{{addressInfo.provinceName}} {{addressInfo.cityName}}{{addressInfo.countyName}}</view>
</view>
<view><view class="head">收货地址</view>
<view class="body">{{addressInfo.detailInfo}}</view>
</view>
<view><view class="head">国家码</view>
<view class="body">{{addressInfo.nationalCode}}</view>
</view>
<view><view class="head">手机号码</view>
<view class="body">{{addressInfo.telNumber}}</view>
</view>
</view>
<view class="add" bindtap="chooseAddress">
<image class="left" src="/images/6.png" mode="widthFix"></image>
<view class="text">获取收货地址</view>
<image class="right" src="/images/right.png" mode="widthFix"></image>
</view>

  然后再pages/address/address.js文件,添加chooseAddress()函数,调用wx.chooseAddress收货地址API,获取数据,渲染页面,具体代码如下:

data: {addressInfo:null},
chooseAddress(){wx.chooseAddress({success:res=>{this.setData({addressInfo:res})},fail:err=>{console.log(err)}})
},

  接着在pages/address/address.wxss文件中,编写样式代码,具体如下:

/* pages/address/address.wxss */
page{background-color: #f6f6f6;font-family: "微软雅黑";font-size: 30rpx;color: #353535;
}
.list{font-size: 36rpx;
}
.list>view{background-color: #fff;padding: 20rpx;border-bottom: 1rpx solid #e0e0e0;display: flex;
}
.list.head{width: 210rpx;
}
.list.body{flex: 1;
}
.add{width: 100%;background-color: #fff;position: absolute;bottom: 0;padding: 15rpx 15rpx 30rpx 40rpx;border-top: 1rpx solid #e0e0e0;
}
.add>image{width: 50rpx;margin-top: 15rpx;margin-right: 20rpx;
}
.add>.list{float: left;
}
.add>.right{width: 25rpx;float: right;margin-right: 60rpx;padding-top: 15rpx;color: #e0e0e0;
}
.add>.text{float: left;margin-top: 20rpx;
}

🎶 三、客服联系电话


  在”个人中心“页面,点击”客服联系方式“一栏,绑定拨打电话事件,调用拨打电话API(wx.makePhoneCall),页面底部上滑下呼叫或取消操作。具体操作如下:
在pages/person/person.wxml文件,为”客服联系方式“,一栏绑定contact()函数,具体代码如下:

<view bindtap="contact">
客服联系方式
<image class="arrow"src="/images/arrow.png"></image>
</view>

  接着在pages/person/person.js文件,增加contact函数,具体代码如下:

 contact:function(e){
wx.makePhoneCall({phoneNumber: '17570463544',
})},
结束语🥇

以上就是微信小程序之列表渲染
持续更新微信小程序教程,欢迎大家订阅系列专栏🔥微信小程序
你们的支持就是曼亿点创作的动力💖💖💖
请添加图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/345783.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

锂电池寿命预测 | Matlab基于SSA-SVR麻雀优化支持向量回归的锂离子电池剩余寿命预测

目录 预测效果基本介绍程序设计参考资料 预测效果 基本介绍 【锂电池剩余寿命RUL预测案例】 锂电池寿命预测 | Matlab基于SSA-SVR麻雀优化支持向量回归的锂离子电池剩余寿命预测&#xff08;完整源码和数据&#xff09; 1、提取NASA数据集的电池容量&#xff0c;以历史容量作…

搭建RocketMQ主从异步集群

搭建RocketMQ主从异步集群 1、RocketMQ集群模式 为了追求更好的性能&#xff0c;RocketMQ的最佳实践方式都是在集群模式下完成的。RocketMQ官方提供了三种集群搭建方式&#xff1a; 2主2从异步通信方式&#xff1a;使用异步方式进行主从之间的数据复制。吞吐量大&#xff0c;…

【日常记录】【JS】中文转拼音的库 pinyin-pro

文章目录 1、介绍2、pinyin-pro 基本使用3、参考链接 1、介绍 pinyin-pro 是一个专业的 JavaScript 中文转拼音的库&#xff0c;具备多音字识别准确、体积轻量、性能优异、功能丰富等特点。 常用的案例 搜索功能增强&#xff1a;在输入框输入汉字时&#xff0c;可以转化为拼音输…

YOLOv10 超详细解析 | 网络结构、训练策略、论文解读

网络结构 1. Backbone 2. Head 3. 说明 网络结构按 YOLOv10m 绘制&#xff0c;不同 scale 的模型在结构上略有不同&#xff0c;而不是像 YOLOv8 一样仅调整 depth 和 width。Head 有部分后续计算与 YOLOv8 完全相同&#xff0c;上图省略&#xff0c;具体请看此文。YOLOv10 整…

【Python教程】2-函数、逻辑运算与条件判断

在整理自己的笔记的时候发现了当年学习python时候整理的笔记&#xff0c;稍微整理一下&#xff0c;分享出来&#xff0c;方便记录和查看吧。个人觉得如果想简单了解一名语言或者技术&#xff0c;最简单的方式就是通过菜鸟教程去学习一下。今后会从python开始重新更新&#xff0…

Python基础——字符串

一、Python的字符串简介 Python中的字符串是一种计算机程序中常用的数据类型【可将字符串看作是一个由字母、数字、符号组成的序列容器】&#xff0c;字符串可以用来表示文本数据。 通常使用一对英文的单引号&#xff08;&#xff09;或者双引号&#xff08;"&#xff09;…

计算机网络ppt和课后题总结(下)

常用端口总结 计算机网络中&#xff0c;端口是TCP/IP协议的一部分&#xff0c;用于标识运行在同一台计算机上的不同服务。端口号是一个16位的数字&#xff0c;范围从0到65535。通常&#xff0c;0到1023的端口被称为“熟知端口”或“系统端口”&#xff0c;它们被保留给一些标准…

springboot高校运动会信息管理系统设计与实现-计算机毕业设计源码92968

摘 要 本论文介绍了一个高校运动会信息管理系统的设计和实现过程。首先是高校运动会的需求分析和可行性分析&#xff0c;通过比较运动会的各个工作流程&#xff0c;确定了系统的数据流程和数据库结构&#xff0c;然后介绍了高校运动会信息管理系统开发所使用的软件开发工具&…

Clo3D导出服装动画,使用Unity3D展示

1.前言 Clo3D是一款应用于时装行业的3D服装设计软件,其强大的布料模拟算法可在3D空间中实现设计、制版、试衣和走秀,大幅提升数字作品逼真度和制作效率。为了让服装动画效果展示在Unity3D上模拟效果&#xff0c;需要Clo3D模拟出逼着的衣服动画。总体流程为Clo3D - Mixamo -Blen…

【算法篇】求最长公共前缀JavaScript版本

题目描述 给你一个大小为 n 的字符串数组 strs &#xff0c;其中包含n个字符串 , 编写一个函数来查找字符串数组中的最长公共前缀&#xff0c;返回这个公共前缀。 数据范围&#xff1a; 数据范围:0<n<5000&#xff0c;0<len(strsi)< 5000 进阶:空间复杂度 O(1)&a…

金融数据中心能力建设指引

金融数据中心能力建设指引 金融数据中心能力建设指引旨在通过高标准的基础设施建设、完善的数据管理、强大的信息安全防护和业务连续性规划&#xff0c;确保数据中心具备高效、安全、可靠的运行能力&#xff0c;支持金融业务的稳定发展。该指引强调技术创新、标准化管理、人才…

【机器学习】Python与深度学习的完美结合——深度学习在医学影像诊断中的惊人表现

&#x1f525; 个人主页&#xff1a;空白诗 文章目录 一、引言二、深度学习在医学影像诊断中的突破1. 技术原理2. 实际应用3. 性能表现 三、深度学习在医学影像诊断中的惊人表现1. 提高疾病诊断准确率2. 辅助制定治疗方案 四、深度学习对医疗行业的影响和推动作用 一、引言 随着…

Java加密体系结构参考指南-Java Cryptography Architecture

本文是从英文的官网摘了翻译的&#xff0c;用作自己的整理和记录。水平有限&#xff0c;欢迎指正。版本是&#xff1a;22 原文地址&#xff1a;https://docs.oracle.com/en/java/javase/22/security/java-cryptography-architecture-jca-reference-guide.html#GUID-815542FE-CF…

web入门(1)---6.10

总结&#xff1a; 多做一点NSSCTF的新手赛&#xff0c;了解基本题型&#xff0c;然后打牢基础知识 谢队讲解 攻防世界 Web入门题 讲解_哔哩哔哩_bilibili 题目来源&#xff1a;攻防世界新手区 1.view_source 查看源代码 2.get_post 收获&#xff1a; get方法是直接在url…

群体优化算法----火山爆发算法介绍以及离散优化Pareto最优解示例

介绍 火山爆发算法&#xff08;Volcano Eruption Algorithm&#xff0c;VEA&#xff09;是一种新兴的群智能优化算法&#xff0c;其灵感来源于火山爆发的自然现象。火山爆发算法模拟了火山爆发过程中熔岩流动和喷发的行为&#xff0c;以寻找全局最优解。这种算法利用了火山爆发…

Linux下打印封装_统计函数执行时间_线程号时间戳打印

统计函数执行时间&#xff08;多线程环境下统计结果不准&#xff09; // 无返回值 #define FUNC_EXEC_TIME_NORET(fun,promote) ({ \ unsigned long long timeDelta 0; \ struct timespec t1 {0}; \ struct timespec t2 {0}; \ clock_gettime(CLOCK_MONOTONIC, &t1); \ …

度小满金融大模型的应用创新

XuanYuan/README.md at main Duxiaoman-DI/XuanYuan GitHub

【MySQL】(基础篇四) —— 检索数据

检索数据 检索数据是我们使用数据库时进行最多的操作&#xff0c;其中包括了检索条件、排序、过滤、分组等等。我会在后续的多篇博客中为你进行详细地介绍它们。 这次先让我们来粗略的了解一下SELECT&#xff0c;为了使用SELECT检索表数据&#xff0c;必须至少明确两点信息—…

汇编:结构体

在32位汇编中&#xff0c;结构体&#xff08;structures&#xff09;用于组织和管理复杂的数据类型&#xff0c;结构体可以包含多个不同类型的数据项&#xff08;成员&#xff09;&#xff1b;在MASM&#xff08;Microsoft Macro Assembler&#xff09;中&#xff0c;使用结构体…

Linux入门学习(2)

1.相关复习新的指令学习 &#xff08;1&#xff09;我们需要自己创建一个用户&#xff0c;这个用户前期可以是一个root用户&#xff0c;后期使用创建的普通用户 &#xff08;2&#xff09;文件等于文件内容加上文件属性,对于文件的操作就包括对于文件内容的操作和文件属性&…