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

news2024/11/9 0:43:45

在这里插入图片描述


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

👨‍💻 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.coloradmin.cn/o/1808035.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【十大排序算法】归并排序

归并排序&#xff0c;如同秋日落叶&#xff0c;分散而细碎&#xff0c; 然而风吹叶动&#xff0c;自然而有序&#xff0c; 彼此相遇&#xff0c;轻轻合拢&#xff0c; 最终成就&#xff0c;秩序之谧。 文章目录 一、归并排序二、发展历史三、处理流程四、算法实现五、算法特性…

CPP初级:模板的运用!

目录 一.泛型编程 二.函数模板 1.函数模板概念 2.函数模板格式 3.函数模板的原理 三.函数模板的实例化 1.隐式实例化 2.显式实例化 3.模板参数的匹配原则 四.类模板 1.类模板的定义格式 2.类模板的实例化 一.泛型编程 泛型编程&#xff1a;编写与类型无关的通用代码…

Xcode 安装17.5 simulator 总是失败

升级到xcode15.4后需要安装ios17.5模拟器 但是在下载过程中会遇到报错 : The network connection is lost 解决方案&#xff1a; 先将模拟器下载到本地 Xcode 安装17.5 simulator 下载地址&#xff1a; Sign In - Applhttps://developer.apple.com/download/all/?qXcode 下…

【系统架构】架构演进

系列文章目录 第一章 系统架构的演进 本篇文章目录 系列文章目录前言一、原始分布式二、单体系统时代三、SOA时代烟囱架构微内核架构事件驱动架构 四、微服务架构五、后微服务时代六、无服务时代总结 前言 最近笔者一直在学习系统架构的相关知识&#xff0c;对系统架构的演进…

web前端:作业二

<!DOCTYPE html> <html lang"zh"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Document</title><style>/* 1.将ul的子l…

《web应用技术》第11次课后作业

课后练习&#xff1a; 1、验证过滤器进行权限验证的原理。 2、将自己之前的项目&#xff0c;加上过滤器验证功能。参考以下文章&#xff1a; 采用JWT令牌和Filter进行登录拦截认证-CSDN博客 3、Apifox的使用 了解Apifox的工具特点和使用方法&#xff0c;使用Apifox辅助生成…

【机器学习】决策树模型(个人笔记)

文章目录 多样性指标基尼杂质指数&#xff08;Gini Impurity Index&#xff09;熵&#xff08;Entropy&#xff09; 决策树的应用 源代码文件请点击此处&#xff01; 多样性指标 基尼杂质指数&#xff08;Gini Impurity Index&#xff09; 若集合中包含 m m m 个元素和 n …

C++类与对象(拷贝与类的内存管理)

感谢大佬的光临各位&#xff0c;希望和大家一起进步&#xff0c;望得到你的三连&#xff0c;互三支持&#xff0c;一起进步 个人主页&#xff1a;LaNzikinh-CSDN博客 文章目录 前言一.对象的动态建立和释放二.多个对象的构造和析构三.深拷贝与浅拷贝四.C类的内存管理总结 前言 …

数据仓库核心:事实表深度解析与设计指南

文章目录 1. 引言1.1基本概念1.2 事实表定义 2. 设计原则2.1 原则一&#xff1a;全面覆盖业务相关事实2.2 原则二&#xff1a;精选与业务过程紧密相关的事实2.3 原则三&#xff1a;拆分不可加事实为可加度量2.4 原则四&#xff1a;明确声明事实表的粒度2.5 原则五&#xff1a;避…

如何有效防御.360勒索病毒:.360勒索病毒加密文件预防方法探讨

导言&#xff1a; 随着信息技术的飞速发展&#xff0c;网络安全问题也日益凸显。其中&#xff0c;勒索病毒作为一种新型的网络安全威胁&#xff0c;给用户和企业带来了极大的困扰和损失。特别是.360勒索病毒&#xff0c;以其独特的加密方式和恶劣的勒索手段&#xff0c;引起了…

AtCoder Beginner Contest 356 G. Freestyle(凸包+二分)

题目 思路来源 quality代码 题解 对n个泳姿点(ai,bi)建凸包&#xff0c;实际上是一个上凸壳&#xff0c; 对于询问(ci,di)来说&#xff0c;抽象画一下这个图&#xff0c;箭头方向表示询问向量 按x轴排增序&#xff0c;并且使得后面的y不小于前面的y&#xff0c;因为总可以多…

Docker高级篇之Docker-compose容器编排

文章目录 1. Docker-compse介绍2. Docker-compse下载3. Docker-compse核心概念4. Docker-compse使用案例 1. Docker-compse介绍 Docker-compose时Docker官方的一个开源的项目&#xff0c;负责对Docker容器集群的快速编排。Docker-compose可以管理多个Docker容器组成一个应用&a…

【单片机毕业设计9-基于stm32c8t6的酒窖监测系统】

【单片机毕业设计9-基于stm32c8t6的酒窖监测系统】 前言一、功能介绍二、硬件部分三、软件部分总结 前言 &#x1f525;这里是小殷学长&#xff0c;单片机毕业设计篇9基于stm32的酒窖监测系统 &#x1f9ff;创作不易&#xff0c;拒绝白嫖可私 一、功能介绍 -------------------…

Docker高级篇之轻量化可视化工具Portainer

文章目录 1. 简介2. Portainer安装 1. 简介 Portianer是一款轻量级的应用&#xff0c;它提供了图形化界面&#xff0c;用于方便管理Docker环境&#xff0c;包括单机环境和集成环境。 2. Portainer安装 官网&#xff1a;https://www.portainer.io 这里我们使用docker命令安装&…

8.让画面动起来

一、Unity Shader中的内置变量&#xff08;时间篇&#xff09; 动画效果往往都是把时间添加到一些变量的计算中&#xff0c;以便在时间变化的同时也可以随之变化。Unity shader提供了一系列关于时间的内置变量来允许我们方便地在Shader中访问运行时间&#xff0c;实现各种动画…

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

01、独立看门狗概述 在由单片机构成的微型计算机系统中,由于单片机的工作常常会受到来自外界电磁场的干扰,造成程序的跑飞,而陷入死循环,程序的正常运行被打断,由单片机控制的系统无法继续工作,会造成整个系统的陷入停滞状态,发生不可预料的后果,所以出于对单片机运行状…

Elasticsearch:Open Crawler 发布技术预览版

作者&#xff1a;来自 Elastic Navarone Feekery 多年来&#xff0c;Elastic 已经经历了几次 Crawler 迭代。最初是 Swiftype 的 Site Search&#xff0c;后来发展成为 App Search Crawler&#xff0c;最近又发展成为 Elastic Crawler。这些 Crawler 功能丰富&#xff0c;允许以…

基于Java+SpringBoot制作一个景区导览小程序

基于Java+SpringBoot制作一个景区导览小程序。其中系统前端功能包括注册登录、景区采风、旅游导览、地图导航、发布采风、门票预订、修改个人信息;系统后台功能包括用户管理、景区管理、采风管理等模块。 摘要一、小程序1. 创建小程序2. 首页3. 景区采风页4. 旅游导览页5. 发布…

人工智能_机器学习097_PCA数据降维算法_数据去中心化_特征值_特征向量_EVD特征值分解原来和代码实现---人工智能工作笔记0222

降维算法的原理,一会咱们再看,现在先看一下,算法 可以看到PCA算法的,原理和过程,我们先看一下代码 为了说明PCA原理,这里,我们,先来计算一下X的方差,可以看到 先把数据进行去中心化,也就是用数据,减去数据的平均值. B = X-X.mean(axis=0) 这段代码是用于计算矩阵X的每一列减去该…

【Web世界探险家】3. CSS美学(二)文本样式

&#x1f4da;博客主页&#xff1a;爱敲代码的小杨. ✨专栏&#xff1a;《Java SE语法》 | 《数据结构与算法》 | 《C生万物》 |《MySQL探索之旅》 |《Web世界探险家》 ❤️感谢大家点赞&#x1f44d;&#x1f3fb;收藏⭐评论✍&#x1f3fb;&#xff0c;您的三连就是我持续更…