uni-app--》如何实现网上购物小程序(下)?

这篇具有很好参考价值的文章主要介绍了uni-app--》如何实现网上购物小程序(下)?。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

🏍️作者简介:大家好,我是亦世凡华、渴望知识储备自己的一名在校大学生

🛵个人主页:亦世凡华、

🛺系列专栏:uni-app

🚲座右铭:人生亦可燃烧,亦可腐败,我愿燃烧,耗尽所有光芒。

👀引言

        ⚓经过web前端的学习,相信大家对于前端开发有了一定深入的了解,今天我开设了uni-app专栏,主要想从移动端开发方向进一步发展,而对于我来说写移动端博文的第二站就是uni-app开发,希望看到我文章的朋友能对你有所帮助。

目录

登录与支付

登录功能

用户信息展示

发起微信支付

发布小程序

发布安卓APP

上传GitHub


登录与支付

在上文我们讲解完购物车内容界面的呈现之后,还需要对已勾选的购物车商品进行一个支付功能的实现。如下当用户点击结算按钮时,需要对三个条件进行相关的判断才能进行下一步处理:

uni-app--》如何实现网上购物小程序(下)?

上文我们完成的收货地址以及勾选商品功能的实现,但是登录功能并没有进行相关处理,最后得到的结果如下,所有本篇文章开始讲解登录与支付功能的实现。

uni-app--》如何实现网上购物小程序(下)?

登录功能

在tabBar的最后一个按钮“个人中心”,用于处理用户登录状态的功能,因为登录状态有两种:已登录和未登录,所以我们要设置两个组件分别用于展示用户的登录状态,如下:

uni-app--》如何实现网上购物小程序(下)?

接下来开始实现登录组件的样式实现:

<template>
	<view class="login-container">
		<uni-icons type="contact-filled" size="100" color="#AFAFAF"></uni-icons>
		<button type="primary" class="btn-login">一键登录</button>
		<text class=" ">登录后尽享更多权益</text>
	</view>
</template>

<script>
	export default {
		name:"my-login",
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss">
.login-container{
	height: 750rpx;
	background-color: #F8F8F8;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	position: relative;
	overflow: hidden;
	&::after{
		content: '';
		display: block;
		width: 100%;
		height: 40px;
		background-color: white;
		position: absolute;
		bottom: 0;
		left: 0;
		border-radius: 100%;
		transform: translateY(50%);
	}
	.btn-login{
		width: 90%;
		border-radius: 100px;
		margin: 15px 0;
		background-color: #C00000;
	}
	.tips-text{
		font-size: 12px;
		color:gray;
	}
}
</style>

uni-app--》如何实现网上购物小程序(下)?

完成了基本的样式,接下来开始对按钮绑定事件获取用户登录的数据信息,如下:

uni-app--》如何实现网上购物小程序(下)?

uni-app--》如何实现网上购物小程序(下)?

设置完登录的功能之后,我们需要在本地缓存中存储我们登录的个人信息,这里需要借助vuex进行状态管理,如下:

uni-app--》如何实现网上购物小程序(下)?

通过mapMutations将我们vuex中的方法进行映射然后进行调用即可,如下:

uni-app--》如何实现网上购物小程序(下)?

uni-app--》如何实现网上购物小程序(下)?

接下来开始存储token数据到本地缓存,并且实现登录跳转的功能,如下:

uni-app--》如何实现网上购物小程序(下)?

uni-app--》如何实现网上购物小程序(下)?

uni-app--》如何实现网上购物小程序(下)?

用户信息展示

解决了登录功能的问题,接下来开始实现登录后个人中心的样式布局,如下:

渲染头像和名称:头像和名称的数据我们之前已经存储在vuex里面,现在只需要直接调用即可:

<template>
	<view class="my-userinfo-container">
		<!-- 头像和昵称区域 -->
		<view class="top-box">
			<image :src="userinfo.avatarUrl" class="avatar"></image>
			<view class="nickname">{{userinfo.nickName}}</view>
		</view>
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	export default {
		name:"my-userinfo",
		data() {
			return {
				
			};
		},
		computed:{
			...mapState('m_user',['userinfo'])
		}
	}
</script>

<style lang="scss">
.my-userinfo-container{
	height: 100%;
	background-color: #F4F4F4;
	.top-box{
		height: 400rpx;
		background-color: #C00000;
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		.avatar{
			height: 90px;
			width: 90px;
			border-radius: 45px;
			border: 2px solid #FFF;
			box-shadow: 0 1px 5px black;
		}		
		.nickname{
			color: white;
			font-weight: bold;
			font-size: 16px;
			margin-top: 10px;
		}
	}
}
</style>

uni-app--》如何实现网上购物小程序(下)?

接下来进行三个面板样式的展现,在这我就不再一一的赘述,直接赋出代码 :

<template>
	<view class="my-userinfo-container">
		<!-- 头像和昵称区域 -->
		<view class="top-box">
			<image :src="userinfo.avatarUrl" class="avatar"></image>
			<view class="nickname">{{userinfo.nickName}}</view>
		</view>
		<!-- 面版区域 -->
		<view class="panel-list">
			<!-- 第一个面板 -->
			<view class="panel">
				<view class="panel-body">
					<view class="panel-item">
						<text>8</text>
						<text>收藏的店铺</text>
					</view>
					<view class="panel-item">
						<text>18</text>
						<text>收藏的商品</text>
					</view>
					<view class="panel-item">
						<text>12</text>
						<text>关注的商品</text>
					</view>
					<view class="panel-item">
						<text>23</text>
						<text>足迹</text>
					</view>
				</view>
			</view>
			<!-- 第二个面板 -->
			<view class="panel">
				<view class="panel-title">
					我的订单
				</view>
				<view class="panel-body">
					<view class="panel-item">
						<image src="/static/my-icons/icon1.png" class="icon"></image>
						<text>待付款</text>
					</view>
					<view class="panel-item">
						<image src="/static/my-icons/icon2.png" class="icon"></image>
						<text>待收货</text>
					</view>
					<view class="panel-item">
						<image src="/static/my-icons/icon3.png" class="icon"></image>
						<text>退款/退货</text>
					</view>
					<view class="panel-item">
						<image src="/static/my-icons/icon4.png" class="icon"></image>
						<text>全部订单</text>
					</view>
				</view>
			</view>
			<!-- 第三个面板 -->
			<view class="panel">
				<view class="panel-list-item">
					<text>收货地址</text>
					<uni-icons type="arrowright" size="15"></uni-icons>
				</view>
				<view class="panel-list-item">
					<text>联系客服</text>
					<uni-icons type="arrowright" size="15"></uni-icons>
				</view>
				<view class="panel-list-item">
					<text>退出登录</text>
					<uni-icons type="arrowright" size="15"></uni-icons>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	export default {
		name:"my-userinfo",
		data() {
			return {
				
			};
		},
		computed:{
			...mapState('m_user',['userinfo'])
		}
	}
</script>

<style lang="scss">
.my-userinfo-container{
	height: 100%;
	background-color: #F4F4F4;
	.top-box{
		height: 400rpx;
		background-color: #C00000;
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		.avatar{
			height: 90px;
			width: 90px;
			border-radius: 45px;
			border: 2px solid #FFF;
			box-shadow: 0 1px 5px black;
		}		
		.nickname{
			color: white;
			font-weight: bold;
			font-size: 16px;
			margin-top: 10px;
		}
	}
}

.panel-list {
	padding: 0 10px;
	position: relative;
	top: -10px;

	.panel {
		background-color: white;
		border-radius: 3px;
		margin-bottom: 8px;
		.panel-title{
			line-height: 45px;
			padding-left: 10px;
			font-size: 15px;
			border-bottom: 1px solid #F4F4F4;
		}
		.panel-body {
			display: flex;
			justify-content: space-around;

			.panel-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: space-around;
				font-size: 13px;
				padding: 10px 0;
				.icon{
					width: 35px;
					height: 35px;
				}
			}
		}
	}
}

.panel-list-item {
  height: 45px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 15px;
  padding: 0 10px;
}

</style>

最终样式如下:

uni-app--》如何实现网上购物小程序(下)?

接下来实现退出登录的功能,给上图中退出登录设置点击按钮,进行提示框提示退出,退出后将所有的用户信息进行一个删除,如下:

uni-app--》如何实现网上购物小程序(下)?

uni-app--》如何实现网上购物小程序(下)?

接下来实现在点击购物车页面的支付按钮后,如果你已经勾选了商品以及添加的收货地址但是没有进行登录,当你点击结算按钮后会弹框提示你登录并过三秒钟跳转到登录页面,如下:

uni-app--》如何实现网上购物小程序(下)?

uni-app--》如何实现网上购物小程序(下)?

接下来实现当你从购物车里面点击结算按钮跳转到登录页面之后,进行登录会再次跳转到购物车界面,具体实现的过程如下:

uni-app--》如何实现网上购物小程序(下)?

uni-app--》如何实现网上购物小程序(下)?

uni-app--》如何实现网上购物小程序(下)?

uni-app--》如何实现网上购物小程序(下)?

发起微信支付

涉及金钱方面的内容,平台的安全性会提高,官方给出了详细的申请流程,如下:

uni-app--》如何实现网上购物小程序(下)?

给出如下发起请求的代码:

async payOrder(){
const orderInfo = {
	order_price:0.01,
	consignee_addr: this.addStr,
	goods: this.cart.filter(x => x.goods_state)
					.map(x => ({ goods_id: x.goods_id, goods_number: x.goods_count, goods_price: x.goods_price }))
}
// 发起请求创建订单
const res = await uni.request({
	url:'https://api-hmugo-web.itheima.net/api/public/v1/my/orders/create',
	method:'POST',
	data:orderInfo,
	header:{
		Authorization:wx.getStorageSync("token")
	}
})
if (res.data.meta.status !== 200) return uni.$showMsg('创建订单失败!')
// 得到服务器响应的“订单编号”
const orderNumber = res.data.message.order_number
// 发起请求获取订单的支付信息
const res2 = await uni.request({
	url:'https://api-hmugo-web.itheima.net/api/public/v1/my/orders/req_unifiedorder',
	method:"POST",
	data:{
		order_number:orderNumber
	},
	header:{
		Authorization:wx.getStorageSync("token")
	}
})
// 预付订单生成失败
if (res2.data.meta.status !== 200) return uni.$showError('预付订单生成失败!')
// 得到订单支付相关的必要参数
const payInfo = res2.data.message.pay
console.log(payInfo)
// 调用 uni.requestPayment() 发起微信支付
await uni.requestPayment(payInfo)
// 完成了支付,进一步查询支付的结果
const res4 = await uni.request({
	url:'https://api-hmugo-web.itheima.net/api/public/v1/my/orders/chkOrder',
	method:'POST',
	data:{
		order_number: orderNumber
	},
	header:{
		Authorization:wx.getStorageSync("token")
	}
})
console.log(res4)
// 检测到订单未支付
if (res4.data.meta.status !== 200) return uni.$showMsg('订单未支付!')
// 检测到订单支付完成
uni.showToast({
	title: '支付完成!',
	icon: 'success'
})
},

如果你没有申请微信App支付的话,调用uni.requestPayment是没有权限的,得到的结果如下:

uni-app--》如何实现网上购物小程序(下)?

设置完成之后得到的最终结果如下:

uni-app--》如何实现网上购物小程序(下)?

发布小程序

至此小程序的开发基本完成,接下来开始机械能小程序的发布,因为只有小程序发布之后,才能被用户搜索并使用,开发期间的小程序为了方便调试,含有sourcemap相关的文件,并且代码没有被压缩,因此体积较大,不适合直接当中线上版本进行发布,通过执行:“小程序发布” ,能够优化小程序的体积,提高小程序的运行性能。以下是上传微信小程序的步骤

点击编辑器菜单上的发行选项,选择微信小程序发布,如下:

uni-app--》如何实现网上购物小程序(下)?

点击发布编译之后,会自动帮我们打开微信小程序的编译软件, 我们点击上传即可:

uni-app--》如何实现网上购物小程序(下)?

点击确定后,接下来填写上传版本号和上传备注。如下:

uni-app--》如何实现网上购物小程序(下)?

点击上传后过一会提示你上传成功,接下来打开小程序的管理后台查看即可:

uni-app--》如何实现网上购物小程序(下)?

uni-app--》如何实现网上购物小程序(下)?

自己写完项目可以提交看看或者设置为体验版体验一下,博主就不再一一展示了。

发布安卓APP

uni-app是支持多端运行的,所以我们也可以将其打包成APP进行相关下载使用,如下:

首先先添加基础设置的内容:

uni-app--》如何实现网上购物小程序(下)?

接下来开始设置APP的图标样式,这里简单提一下,设置的图标后缀名是png且是原生的,如果你原本本来是jpg格式的后缀名被你手动改成png,这种做法是错误的,如果非要使用jpg这个图片作为图标,就需要使用图片转换格式,将jpg转换成png而不是手动修改,另外图标的尺寸建议和编译器提醒我们的尺寸保持一致,上传成功后点击自动替换就会生成所有尺寸的图标,如下:

uni-app--》如何实现网上购物小程序(下)?

接下来点击发行中的APP云打包进行打包即可如下:

uni-app--》如何实现网上购物小程序(下)?

打包完成之后,打开打包文件所在的目录,然后将文件传递到手机上进行下载即可:

uni-app--》如何实现网上购物小程序(下)?

在移动端进行下载安装,如下:

uni-app--》如何实现网上购物小程序(下)?

uni-app--》如何实现网上购物小程序(下)?

上传GitHub

在本项目的第一篇文章就将该项目进行上传github上,并创建了子分支dev,本项目的所有源代码都是在dev分支上进行的,现在项目写完需要将项目推送到远程仓库上进行保存,步骤如下:

将dev分支的代码推送到远程仓库:因为使用的不是主分支master,当前日常开发中,解决了一些问题之后,想将其推送到远程仓库做一个保存。

git branch 查看当前分支

git add . 提交暂存区

git commit -m "最终版本" 提交版本区

git push origin -u "dev" 推送远程仓库

推送完成之后,远程仓库会有提示,提示你当前分支出现了新的推送:

uni-app--》如何实现网上购物小程序(下)?

可以点击当前推送的dev分支,点击如下选项可以查看推送后的代码与之前的代码有何区别:

uni-app--》如何实现网上购物小程序(下)?

dev分支与主分支master的合并:当确定dev分支的代码没毛病后,就可以推送到主分支master上面,具体操作如下: 

uni-app--》如何实现网上购物小程序(下)?

进入当前页面后,可以写一些你为啥要修改的描述,也可以不写,直接点击创建即可: 

uni-app--》如何实现网上购物小程序(下)?

点击如下按钮进行接收合并的请求:

uni-app--》如何实现网上购物小程序(下)?

合并之后,master分支就具有了dev分支的内容,当前页面也没有任何的提示消息了: 

uni-app--》如何实现网上购物小程序(下)?

修改本地的master分支:修改了远程库的master分支后,本地的master并没有改变,还是之前的版本,所以我们还需要将远程更新过后的master分支进行一个本地的拉取,如下:

 git checkout master 切换到master分支

git pull origin master 将远程的master分支进行一个拉取

uni-app--》如何实现网上购物小程序(下)?

至此项目的大概内容已经完成了,项目的github源代码地址为: 项目地址 。如果觉得不错的话可以给个一键三联或者项目源地址给个star哦,您的支持就是博主创作的最大动力。文章来源地址https://www.toymoban.com/news/detail-420704.html

到了这里,关于uni-app--》如何实现网上购物小程序(下)?的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 基于PHP后台微信网上购物商城小程序系统设计与实现(安装部署+源码+文档)

     博主介绍 :黄菊华老师《Vue.js入门与商城开发实战》《微信小程序商城开发》图书作者,CSDN博客专家,在线教育专家,CSDN钻石讲师;专注大学生毕业设计教育和辅导。 所有项目都配有从入门到精通的基础知识视频课程,学习后应对毕业设计答辩。 项目配有对应开发文档、

    2024年03月28日
    浏览(64)
  • 微信小程序毕业设计作品成品(60)微信小程序网上在线购物商城系统设计与实现

    博主介绍: 《Vue.js入门与商城开发实战》《微信小程序商城开发》图书作者,CSDN博客专家,在线教育专家,CSDN钻石讲师;专注大学生毕业设计教育和辅导。 所有项目都配有从入门到精通的基础知识视频课程,免费 项目配有对应开发文档、开题报告、任务书、PPT、论文模版

    2024年02月08日
    浏览(66)
  • 微信小程序毕业设计作品成品(55)微信小程序网上书城图书购物商城系统设计与实现

    博主介绍: 《Vue.js入门与商城开发实战》《微信小程序商城开发》图书作者,CSDN博客专家,在线教育专家,CSDN钻石讲师;专注大学生毕业设计教育和辅导。 所有项目都配有从入门到精通的基础知识视频课程,免费 项目配有对应开发文档、开题报告、任务书、PPT、论文模版

    2024年02月07日
    浏览(47)
  • 基于微信小程序的网上购物平台小程序的设计与实现 服务器端口php+mysql(附源码 调试 文档)

    摘要 本文介绍了一种基于微信小程序的网上购物平台小程序,该系统主要分为两种用户角色,分别是管理员和用户。管理员主要负责分类管理、商品管理、订单管理、评价管理和系统管理等操作,而用户主要进行商品搜索、分类筛选、商品详细信息查看、在线下单、购物车管

    2024年02月05日
    浏览(58)
  • 基于微信小程序网上商城购物系统设计与实现 毕业设计论文大纲参考(JSP后台)

     博主介绍 :黄菊华老师《Vue.js入门与商城开发实战》《微信小程序商城开发》图书作者,CSDN博客专家,在线教育专家,CSDN钻石讲师;专注大学生毕业设计教育和辅导。 所有项目都配有从入门到精通的基础知识视频课程,学习后应对毕业设计答辩。 项目配有对应开发文档、

    2024年02月19日
    浏览(57)
  • 基于PHP后台微信网上书城图书购物商城小程序系统设计与实现(安装部署+源码+文档)

     博主介绍 :黄菊华老师《Vue.js入门与商城开发实战》《微信小程序商城开发》图书作者,CSDN博客专家,在线教育专家,CSDN钻石讲师;专注大学生毕业设计教育和辅导。 所有项目都配有从入门到精通的基础知识视频课程,学习后应对毕业设计答辩。 项目配有对应开发文档、

    2024年04月14日
    浏览(54)
  • 基于微信小程序的网上购物商城

     博主介绍:java高级开发,从事互联网行业六年,熟悉各种主流语言,精通java、python、php、爬虫、web开发,已经做了六年的毕业设计程序开发,开发过上千套毕业设计程序,没有什么华丽的语言,只有实实在在的写点程序。 🍅 文末点击卡片获取联系 🍅 技术:springboot+mys

    2024年04月12日
    浏览(67)
  • 网上购物商城系统设计与实现

      目的 :伴随着互联网技术的不断发展和完善,在人们的生活和工作的各个方面,互联网都有着非常重大的影响。伴随着国内电子商务行业的迅猛发展,消费者现在能够轻松的实现足不出户的,仅仅通过网络购物平台就可以非常便捷的购买到自己需要的商品。 意义 :基于

    2024年02月04日
    浏览(38)
  • 基于java的网上购物系统设计与实现

    基于java的网上购物系统设计与实现 好的,基于Java的网上购物系统设计与实现的研究背景和动机,可以简单地介绍为:在现代社会,随着电子商务的快速发展,越来越多的企业和个人选择在网上购物。然而,网上购物也面临着一些问题,如信息安全、交易欺诈、物流配送等。

    2024年01月21日
    浏览(50)
  • 基于Hadoop的网上购物行为分析设计与实现

    有需要本项目的可以私信博主,提供部署和讲解服务!!!!! 本研究基于淘宝用户行为的开源数据展开大数据分析研究,通过Hadoop大数据分析平台对阿里天池公开的开源数据集进行多维度的用户行为分析,为电商销售提供可行性决策。 本次研究选取了2021年12月1日-18号的数

    2024年02月11日
    浏览(49)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包