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

在这里插入图片描述

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

👨‍💻 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',
})
  },
结束语🥇

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

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

「动态规划」如何计算能获得多少点数？

「动态规划」如何计算能获得多少点数？

740. 删除并获得点数https://leetcode.cn/problems/delete-and-earn/description/ 给你一个整数数组nums&#xff0c;你可以对它进行一些操作。每次操作中&#xff0c;选择任意一个nums[i]&#xff0c;删除它并获得nums[i]的点数。之后&#xff0c;你必须删除所有等于nums[i] …
阅读更多...
【网络安全的神秘世界】web应用程序安全与风险

【网络安全的神秘世界】web应用程序安全与风险

&#x1f31d;博客主页&#xff1a;泥菩萨 &#x1f496;专栏&#xff1a;Linux探索之旅 | 网络安全的神秘世界 | 专接本 第一章&#xff1a;web应用程序安全与风险 web攻击基础知识 1、什么是web应用攻击 web攻击的本质&#xff0c;就是通过http协议篡改应用程序&#xff0…
阅读更多...
虚拟机ping不通主机，但是主机可以ping通虚拟机

虚拟机ping不通主机，但是主机可以ping通虚拟机

我在Windows10系统安装了虚拟机&#xff0c;设置的主机与虚拟机的连接方式是桥接&#xff0c;安装好后&#xff0c;发现虚拟机ping不通主机&#xff0c;但是主机可以ping通虚拟机。 我的操作是&#xff1a;关闭防火墙&#xff0c;发现虚拟机可以ping通主机了。说明是Windows10…
阅读更多...
python后端结合uniapp与uview组件tabs，实现自定义导航按钮与小标签颜色控制

python后端结合uniapp与uview组件tabs，实现自定义导航按钮与小标签颜色控制

实现效果&#xff08;红框内&#xff09;&#xff1a; 后端api如下&#xff1a; task_api.route(/user/task/states_list, methods[POST, GET]) visitor_token_required def task_states(user):name_list [待接单, 设计中, 交付中, 已完成, 全部]data []color [#F04864, …
阅读更多...
CPP初级：模板的运用！

CPP初级：模板的运用！

目录 一.泛型编程 二.函数模板 1.函数模板概念 2.函数模板格式 3.函数模板的原理 三.函数模板的实例化 1.隐式实例化 2.显式实例化 3.模板参数的匹配原则 四.类模板 1.类模板的定义格式 2.类模板的实例化 一.泛型编程 泛型编程&#xff1a;编写与类型无关的通用代码…
阅读更多...
express入门01服务器搭建以及get和post请求的监听

express入门01服务器搭建以及get和post请求的监听

微搭提供了后端API的能力&#xff0c;但是不同的版本收费差别巨大&#xff0c;因为使用的门槛限制了中小企业使用低代码平台。那可不可以既要又要呢&#xff1f;答案是肯定的&#xff0c;那其实掌握一定的后端框架&#xff0c;借助我们在低代码中已经熟练掌握的技能其实是比较容…
阅读更多...
2024.6.9 七

2024.6.9 七

Python的time库 先导入库 import time相关函数 time.time() 返回当前时间的时间戳(一个记录时间的浮点数),从1970年开始算的 time.localtime(sec) 返回一个指定时间戳(sec)的struct_time对象,是一个元组封装起来的,默认是当地时间 struct_time对象 tm_year 年 tm_mon 月 tm_…
阅读更多...
CDR2024软件破解Keygen激活工具2024最新版

CDR2024软件破解Keygen激活工具2024最新版

CorelDRAW Graphics Suite2024最新版&#xff0c;这是一款让我爱不释手的图形设计神器&#xff01;作为一个软件评测专家&#xff0c;我一直在寻找一款能够提升我的设计效率和创造力的工具。而这款软件&#xff0c;简直就是为我量身定制的&#xff01;&#x1f389; 「CorelDR…
阅读更多...
算法金 | AI 基石，无处不在的朴素贝叶斯算法

算法金 | AI 基石，无处不在的朴素贝叶斯算法

大侠幸会&#xff0c;在下全网同名「算法金」 0 基础转 AI 上岸&#xff0c;多个算法赛 Top 「日更万日&#xff0c;让更多人享受智能乐趣」 历史上&#xff0c;许多杰出人才在他们有生之年默默无闻&#xff0c; 却在逝世后被人们广泛追忆和崇拜。 18世纪的数学家托马斯贝叶斯…
阅读更多...
温度传感器十大品牌

温度传感器十大品牌

温度传感器品牌排行榜-十大热电偶品牌-热敏电阻品牌排行-Maigoo品牌榜
阅读更多...
TikTok Shop账号需要防关联吗?

TikTok Shop账号需要防关联吗?

在TikTokShop作为新兴的电商销售渠道中&#xff0c;保护账号的安全和隐私&#xff0c;防止账号关联成为了重要的任务。为了更好地理解为何需要防关联以及如何进行防范&#xff0c;让我们深入探讨一下这个问题。 为什么要防关联&#xff1f; 1. 账号异常风险&#xff1a;防关联…
阅读更多...
电容十大品牌供应商

电容十大品牌供应商

十大电容器品牌&#xff0c;电解电容-陶瓷电容-超级电容器品牌排行榜-Maigoo品牌榜
阅读更多...
Android gradle kts 8.0以上版本配置签名和修改APK输出名字

Android gradle kts 8.0以上版本配置签名和修改APK输出名字

目录 概述修改签名配置新建签名文件目录配置签名信息使用签名信息打包 修改APK名称 概述 之前写过一篇文章是通过Kotlin的Dsl结合gradle编写的插件来管理项目依赖&#xff0c;我是从一个开源项目叫DanDanPlayAndroid项目上学到的&#xff0c;那时还没有使用toml文件来管理项目…
阅读更多...
Linux入门学习（2）

Linux入门学习（2）

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

Apache SeaTunnel社区5月月报更新！

各位热爱 SeaTunnel 的小伙伴们&#xff0c;社区 5 月份月报来啦&#xff01; SeaTunnel 正在迅猛发展&#xff0c;积极投入社区项目建设的小伙伴将促进SeaTunnel不断提升数据同步的高可扩展性、高性能及高可靠性。欢迎关注每月月报更新&#xff0c;期待在下个月的Merge Star月…
阅读更多...
Redis持久化说明

Redis持久化说明

Redis的持久化是指将内存中的数据持久化到磁盘中&#xff0c;以保证数据在重启或宕机后不会丢失。 Redis提供了两种主要的持久化方式&#xff1a;RDB(Redis DataBase)和AOF(Append Only File)。 RDB&#xff08;Redis DataBase&#xff09; 1、RDB快照原理 RDB持久化方式会定…
阅读更多...
STM32 | 独立看门狗 | RTC(实时时钟)

STM32 | 独立看门狗 | RTC(实时时钟)

01、独立看门狗概述 在由单片机构成的微型计算机系统中，由于单片机的工作常常会受到来自外界电磁场的干扰，造成程序的跑飞，而陷入死循环，程序的正常运行被打断，由单片机控制的系统无法继续工作，会造成整个系统的陷入停滞状态，发生不可预料的后果，所以出于对单片机运行状…
阅读更多...
ffmpeg视频解码原理和实战-（5）硬件加速解码后进行渲染并输出帧率

ffmpeg视频解码原理和实战-（5）硬件加速解码后进行渲染并输出帧率

头文件&#xff1a; xvideoview.h #ifndef XVIDEO_VIEW_H #define XVIDEO_VIEW_H #include <mutex> #include <fstream> struct AVFrame;void MSleep(unsigned int ms);//获取当前时间戳 毫秒 long long NowMs();/// 视频渲染接口类 /// 隐藏SDL实现 /// 渲染方案…
阅读更多...
初阶 《函数》 4. 函数的调用

初阶 《函数》 4. 函数的调用

4. 函数的调用 4.1 传值调用 函数的形参和实参分别占有不同内存块&#xff0c;对形参的修改不会影响实参 4.2 传址调用 传址调用是把函数外部创建变量的内存地址传递给函数参数的一种调用函数的方式 这种传参方式可以让函数和函数外边的变量建立起真正的联系&#xff0c;也就是…
阅读更多...
电脑上的瑞士军刀

电脑上的瑞士军刀

一、简介 1、一款专为 Windows 操作系统设计的桌面管理工具&#xff0c;它具备保存和恢复桌面图标位置的功能&#xff0c;使用户能够在各种情况下&#xff0c;如分辨率变动、系统更新或其他原因导致的图标位置混乱后&#xff0c;快速恢复到熟悉的工作环境。它还拥有诸多实用功能…
阅读更多...
最新文章

Copyright @ 2022~2023