uni-app的支付与打包上传

news2025/1/9 15:19:00

支付app的支付（支付宝付）

准备工作

1.支付厂商获取id

获取支付厂商 uni.getProvider({service:"payment"})

2.微信：微信支付平台
https://pay.weixin.qq.com/
在这里插入图片描述3、打包 manifest.json app模块配置 payment支付
可以选择支付宝支付或者其他平台的支付
在这里插入图片描述

app的支付步骤

- 01 获取支付厂商：uni.getProvider()
uni.getProvider({service: "payment"})
- 02 用户发起支付：
requestPayment(item,index){}
- 03 获取订单信息：
getOrderInfo(item.id)
- 04 发起支付api

        uni.requestPayment({
           provider:item.id, //提供商
           orderInfo: orderInfo, //订单信息
        })

App支付宝支付完整代码

- template

<template>
	<view>
		<view class="title">支付</view>
	
		<view>
			支付金额：<input :value="price" maxlength="4" @input="priceChange" placeholder="请求输入支付金额" />
			<view>
				<!-- app支付 -->
				<!-- #ifdef APP-PLUS -->
			 
				<button size="mini" type="primary" v-for="(item,index) in providerList" :key="item.id" :loading="item.loading"  @click="requestPayment(item,index)">{{item.name}}支付</button>
				
			 
				<!-- #endif -->
				</view>
				
		</view>
	</view>
</template>

- script

<script>
	export default {
		data() {
			return {
				price:1,
				providerList: [], //支付厂商，微信，或者支付宝
				openid:'' ,//用户id
				loading:false,//小程序微信支付
			}
		},
		onLoad(){
			var that  = this;
			// 获取支付厂商
			uni.getProvider({
				service: "payment",
				success: (e) => {
					console.log(JSON.stringify(e))
					var provider = e.provider;
					// 映射一个格式（添加loading是否加载中）
					that.providerList = provider.map(item=>{
						if(item==="alipay"){
							return {
								name: '支付宝',
								id: item,
								loading: false
							}
						}else if(item==="wxpay"){
							return {
								name: '微信',
								id: item,
								loading: false
							}
						}
					})
				}
			})
		},
 
			// 实现支付
			async  requestPayment(item,index){
				// 显示加载中
				item.loading = true;
				// 获取订单信息
				let orderInfo = await this.getOrderInfo(item.id);
				// 发起支付
				uni.requestPayment({
					provider:item.id, //提供商
					orderInfo: orderInfo, //订单信息
					// 成功提示
					success: (e) => {
						console.log("success", e);
						uni.showToast({
							title: "感谢您的赞助!"
						})
					},
					// 失败
					fail: (e) => {
						console.log("fail", e);						 
					},
					// 停止加载中
					complete: () => {
					  item.loading = false;
					}
				})
				
			},
			// 获取订单信息
			getOrderInfo(provider) {
				// 返回一个promise
					return new Promise((resolve, reject) => {
						// 请求订单信息
						uni.request({
							method: 'POST',
							url: 'https://97fca9f2-41f6-449f-a35e-3f135d4c3875.bspapp.com/http/pay',
							data: {
								provider, //支付厂商
								openid: this.openid, //openid(微信支付用)
								totalFee: Number(this.price) * 100, // 转为以为单位 
								platform: 'app-plus', //平台
							},
							success(res) {
								if (res.data.code === 0) {
									// 返回订单信息
									resolve(res.data.orderInfo)
								} else {
									// 失败
									reject(new Error('获取支付信息失败' + res.data.msg))
								}
							},
							fail(err) {
								// 请求失败
								reject(new Error('请求支付接口失败' + err))
							}
					})
				})
			},
			priceChange(e){
				this.price = e.detail.value;
			}
		}
	}
</script>

小程序的支付

- 01 用户的点击 发起支付
async weixinPay()
- 02 获取openid

 本地存储 ||loginMpWeixin

     //获取code
     uni.login({})
      
     //获取openid
     uni.request({})

- 03 获取订单信息

 this.getOrderInfo('wxpay')

- 04 根据订单信息发起支付

    uni.requestPayment({
                        ...
    orderInfo})

微信支付完整代码

- template

<template>
 <view>
 	<view class="title">支付</view>
 
 	<view>
 		支付金额：<input :value="price" maxlength="4" @input="priceChange" placeholder="请求输入支付金额" />
 		<view>
 			<!-- 小程序支付 -->
 			<!-- #ifdef MP-WEIXIN -->
 			  <button type="primary" size="mini" @click="weixinPay" :loading="loading">小程序微信支付</button>
 			<!-- #endif -->
 			</view>
 			
 	</view>
 </view>
</template>

- script

<script>
  export default {
  	data() {
  		return {
  			price:1,
  			providerList: [], //支付厂商，微信，或者支付
  			openid:'' ,//用户id
  			loading:false,//小程序微信支付
  		}
  	},
  	onLoad(){
  		var that  = this;
  		// 获取支付厂商
  		uni.getProvider({
  			service: "payment",
  			success: (e) => {
  				console.log(JSON.stringify(e))
  				var provider = e.provider;
  				// 映射一个格式（添加loading是否加载中）
  				that.providerList = provider.map(item=>{
  					if(item==="alipay"){
  						return {
  							name: '支付宝',
  							id: item,
  							loading: false
  						}
  					}else if(item==="wxpay"){
  						return {
  							name: '微信',
  							id: item,
  							loading: false
  						}
  					}
  				})
  			}
  		})
  	},
  	methods: {
  		async weixinPay(){
  			this.loading = true;//加载中
  			// 获取openid
  			let openid = uni.getStorageSync('openid')
  			if(!openid){
  				// 执行登录获取openid
  				openid = await this.loginMpWeixin();
  				this.openid = openid;
  				if (!openid) {
  					uni.showModal({
  						content: '获取openid失败',
  						showCancel: false
  					})
  					this.loading = false
  					return
  				}
  			}
  			// 获取订单信息
  			let orderInfo = await this.getOrderInfo('wxpay')
  			// 如果没有订单信息，弹出订单信息失败
  			if (!orderInfo) {
  				uni.showModal({
  					content: '获取支付信息失败',
  					showCancel: false
  				})
  				return
  			}
  			// 发起支付
  			uni.requestPayment({
  				...orderInfo,
  				// 成功
  				success: (res) => {
  					uni.showToast({
  						title: "感谢您的赞助!"
  					})
  				},
  				// 失败
  				fail: (res) => {
  					uni.showModal({
  						content: "支付失败,原因为: " + res
  							.errMsg,
  						showCancel: false
  					})
  				},
  				// 移除loading
  				complete: () => {
  					this.loading = false;
  				}
  			})
  		},
  		loginMpWeixin(){
  			// 返回一个promise
  			return new Promise((resolve,reject)=>{
  				uni.login({
  					provider: 'weixin',
  					success(res) {
  						// login成功会得到一个code
  						// 请求后端的登录
  						uni.request({
  							url: 'https://97fca9f2-41f6-449f-a35e-3f135d4c3875.bspapp.com/http/user-center',
  							method: 'POST',
  							data: {
  								action: 'loginByWeixin',
  								params: {
  									code: res.code, // 传入code
  									platform: 'mp-weixin'
  								}
  							},
  							success(res) {
  								if (res.data.code !== 0) {
  									reject(new Error('res获取openid失败：', res))
  									return
  								}
  								// 成功后存储opendi
  								uni.setStorageSync('openid', res.data.openid)
  								// 返回openid
  								resolve(res.data.openid)
  							},
  							fail(err) {
  								reject(new Error('获取openid失败：' + err))
  							}
  						})
  					}	
  				})
  			})
  		},
  		// 实现支付
  		async  requestPayment(item,index){
  			// 显示加载中
  			item.loading = true;
  			// 获取订单信息
  			let orderInfo = await this.getOrderInfo(item.id);
  			// 发起支付
  			uni.requestPayment({
  				provider:item.id, //提供商
  				orderInfo: orderInfo, //订单信息
  				// 成功提示
  				success: (e) => {
  					console.log("success", e);
  					uni.showToast({
  						title: "感谢您的赞助!"
  					})
  				},
  				// 失败
  				fail: (e) => {
  					console.log("fail", e);						 
  				},
  				// 停止加载中
  				complete: () => {
  				  item.loading = false;
  				}
  			})
  			
  		},
  		// 获取订单信息
  		getOrderInfo(provider) {
  			// 返回一个promise
  				return new Promise((resolve, reject) => {
  					// 请求订单信息
  					uni.request({
  						method: 'POST',
  						url: 'https://97fca9f2-41f6-449f-a35e-3f135d4c3875.bspapp.com/http/pay',
  						data: {
  							provider, //支付厂商
  							openid: this.openid, //openid(微信支付用)
  							totalFee: Number(this.price) * 100, // 转为以为单位 
  							platform: 'app-plus', //平台
  						},
  						success(res) {
  							if (res.data.code === 0) {
  								// 返回订单信息
  								resolve(res.data.orderInfo)
  							} else {
  								// 失败
  								reject(new Error('获取支付信息失败' + res.data.msg))
  							}
  						},
  						fail(err) {
  							// 请求失败
  							reject(new Error('请求支付接口失败' + err))
  						}
  				})
  			})
  		},
  		priceChange(e){
  			this.price = e.detail.value;
  		}
  	}
  }
</script>

打包html代码上传服务

  • 配置相对地址=>manifest.json=>web配置
    • 运行的基础路径为 ./
  • 发行=>发到网站-PC
  • 通过flashFXP工具上传服务器：unpackage>dist>build>H5

打包微信小程序上传

  • 01 配置id
    manifest.json 微信小程序配置
  • 02 单击发行
    发行=>小程序微信
  • 03 进入小程序上传
    小程序右上角上传（先测试，真机测试）
  • 04 微信提交审核mp.weixin.qq.com
    • 版本管理
    • 审核
    • 审核通过发布
    • 认真填写隐私协议(这个很重要)
      隐私政策
      用户协议
      仅供参考
  • 05 如果有网络请求需要配置域名且必须是https开头
  • 开发管理
    • 服务器设置
    • 服务器域名
  • request合法域名
    uni.request,wx.request 请求的域名必须事先定义好
  • 如果有上传也要配置上传的域名
    uploadFile合法域名
  • 配置下载域名
    downloadFile合法域名

如果想搞钱用户累积量达到1000

1. 累计用户操作1000 可以称为流量主
开通广告(视频激励广告最挣钱)

  • 定义
    let rewardedVideoAd = null
    部分代码
    在这里插入图片描述在这里插入图片描述

App打包上传应用商店

  • 应用商店
    • 华为
    • opple
    • vivo
    • 小米
  • 现在只有华为可以个人上传其他都必须是公司
  • 个人上传
    需要app的版权证明（600-1500）
  • 最难的是：应付国家的隐私条例和应用商店的隐私审核

打包上传选项配置

在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述
在这里插入图片描述

打包配置

在这里插入图片描述

解决谷歌浏览器安全策略问题

  • 将谷歌浏览器进行桌面备份
  • 在目标地址结尾添加--disable-web-security --user-data-dir=C:\mydir
  • 示例
  • "C:\Program Files\Google\Chrome\Application\chrome.exe" --disable-web-security --user-data-dir=C:\mydir
    在这里插入图片描述

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

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

相关文章

年产2万吨山楂酒工厂的设计-灭菌工段及车间的设计（lunwen+任务书+选题表+cad图纸）

年产2万吨山楂酒工厂的设计-灭菌工段及车间的设计（lunwen+任务书+选题表+cad图纸）

目 录 摘要 I ABSTRACT II 1前 言 1 1.1设计背景及目的 1 1.1.1山楂酒的介绍及功效 1 1.1.2目标人群 1 1.1.3发展前景 2 1.2设计依据 2 1.3设计内容 2 1.4原材料的选择 3 2 工厂总体设计 5 2.1 厂址的选择 5 2.2 总平面布置 5 2.2.1工厂总平面布置设计原则 5 2.2 车间布置设计原…
阅读更多...
写一个flutter程序2

写一个flutter程序2

需求 完成一个简单的移动应用程序&#xff0c;功能是&#xff1a;为一个创业公司生成建议的名称。用户可以选择和取消选择的名称、保存&#xff08;收藏&#xff09;喜欢的名称。该代码一次生成十个名称&#xff0c;当用户滚动时&#xff0c;会生成一新批名称。用户可以点击导…
阅读更多...
利用通信基础设施提高电网的稳态稳定性(Matlab代码实现）

利用通信基础设施提高电网的稳态稳定性(Matlab代码实现）

目录 1 概述 2 稳态稳定性分析 2.1 系统模型 2.2 稳态稳定性 2.3 问题说明 3 仿真结果 4 MAtlab代码 1 概述 随着电力系统的复杂性和规模的增加&#xff0c;电力系统的有效控制变得越来越困难。我们提出了一种自动控制策略&#xff0c;该策略基于通过通信基础设施获得的…
阅读更多...
从0搭建前端脚手架详解（小白也可以搭建）

从0搭建前端脚手架详解（小白也可以搭建）

本篇文章用来为大家提供一个搭建简易前端脚手架的思路。 先来看一眼实现的效果。 从图上来看这个脚手架的功能非常的简单只有一个创建的命令&#xff0c;其他都是帮助和显示版本号的。 也就是上图这句&#xff0c;创建一个新项目&#xff0c;只需要输入create 项目名便可使用&…
阅读更多...
[附源码]计算机毕业设计大学生心理测评系统

[附源码]计算机毕业设计大学生心理测评系统

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM mybatis Maven Vue 等等组成&#xff0c;B/S模式 M…
阅读更多...
MATLAB学习笔记（系统学习）

MATLAB学习笔记（系统学习）

教程来源&#xff1a; 1.MATLAB教程&#xff1a;https://www.cainiaojc.com/matlab/matlab-tutorial.html 不断学习补充中~~~ 文章目录一、MATLAB基础二、MATLAB科研绘图&#xff08;重点在于修改参数&#xff0c;优化图片&#xff09;一、MATLAB基础 1.在MATLAB中使用分号&a…
阅读更多...
免费网课查题接口

免费网课查题接口

免费网课查题接口 本平台优点&#xff1a; 多题库查题、独立后台、响应速度快、全网平台可查、功能最全&#xff01; 1.想要给自己的公众号获得查题接口&#xff0c;只需要两步&#xff01; 2.题库&#xff1a; 查题校园题库&#xff1a;查题校园题库后台&#xff08;点击跳…
阅读更多...
Java并发编程学习14-任务关闭（上）

Java并发编程学习14-任务关闭（上）

任务关闭&#xff08;上&#xff09;-- 关闭基于线程的服务 《任务关闭》由于篇幅较多&#xff0c;拆分了两篇来介绍各种任务和服务的关闭机制&#xff0c;以及如何编写任务和服务&#xff0c;使它们能够优雅地处理关闭。 我们知道&#xff0c;应用程序通常会创建拥有多个线…
阅读更多...
微服务框架 SpringCloud微服务架构 10 使用Docker 10.9 数据卷挂载案例2

微服务框架 SpringCloud微服务架构 10 使用Docker 10.9 数据卷挂载案例2

微服务框架 【SpringCloudRabbitMQDockerRedis搜索分布式&#xff0c;系统详解springcloud微服务技术栈课程|黑马程序员Java微服务】 SpringCloud微服务架构 文章目录微服务框架SpringCloud微服务架构10 使用Docker10.9 数据卷挂载案例210.9.1 直接开干10.9.2 数据卷挂载的方…
阅读更多...
[附源码]Python计算机毕业设计Django设备运维平台出入库模块APP

[附源码]Python计算机毕业设计Django设备运维平台出入库模块APP

项目运行 环境配置&#xff1a; Pychram社区版 python3.7.7 Mysql5.7 HBuilderXlist pipNavicat11Djangonodejs。 项目技术&#xff1a; django python Vue 等等组成&#xff0c;B/S模式 pychram管理等等。 环境需要 1.运行环境&#xff1a;最好是python3.7.7&#xff0c;…
阅读更多...
动态数据增强及构造方案解决

动态数据增强及构造方案解决

前言 随着数据量的增长以及业务的调整变更&#xff0c;我们需要选择合适的技术及存储引擎对数据进行归类&#xff0c;调整&#xff0c;达到高并发、秒响应、低延迟及可扩展对现有程序的改造升级问题&现状 任务重&#xff0c;时间紧&#xff0c;人力不足&#xff0c;不能够…
阅读更多...
[附源码]计算机毕业设计基于SpringBoot的玉石交易系统

[附源码]计算机毕业设计基于SpringBoot的玉石交易系统

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM mybatis Maven Vue 等等组成&#xff0c;B/S模式 M…
阅读更多...
源码深度剖析Spring Bean标签的解析及注册

源码深度剖析Spring Bean标签的解析及注册

在博客《一步一步带你深入源码看Spring是如何加载XML配置文件的》中把Spring对XML配置文件如何加载的说明白了&#xff0c;XML配置文件加载完成后就是对标签的解析&#xff0c;本篇博客就是针对Spring bean 标签的解析以及bean definition 的注册。 Spring 中的标签包括默认标…
阅读更多...
Dreamweaver网页设计与制作100例 餐饮主题简洁日式料理餐饮网页设计(4页)HTML+CSS+JavaScript

Dreamweaver网页设计与制作100例 餐饮主题简洁日式料理餐饮网页设计(4页)HTML+CSS+JavaScript

&#x1f380; 精彩专栏推荐&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb; ✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 &#x1f482; 作者主页: 【主页——&#x1f680;获取更多优质源码】 &#x1f393; web前端期末大作业…
阅读更多...
[附源码]计算机毕业设计点餐系统

[附源码]计算机毕业设计点餐系统

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM mybatis Maven Vue 等等组成&#xff0c;B/S模式 M…
阅读更多...
音视频技术开发周刊 | 274

音视频技术开发周刊 | 274

每周一期&#xff0c;纵览音视频技术领域的干货。新闻投稿&#xff1a;contributelivevideostack.com。「紧急通知」LiveVideoStackCon 2022 音视频技术大会北京站改期各位LVSer们&#xff1a;因疫情影响&#xff0c;北京近期不再允许举办大型线下活动&#xff0c;我们无奈且抱…
阅读更多...
【消息中间件】为什么选择RocketMQ及使用案例

【消息中间件】为什么选择RocketMQ及使用案例

目录 一、为什么选择RocketMQ 1、为什么是为什么选择RocketMQ 2、RocketMQ、ActiveMQ和Kafka之间的比较 2.1、对比1 2.2、对比2&#xff0c;接着上表 二、使用案例 1、引入依赖 2、编写启动类 3、编写application.yml配置文件 4、创建rocketmq文件夹 4.1、创建生产者…
阅读更多...
OpenCV实战（4）——像素操作

OpenCV实战（4）——像素操作

OpenCV实战&#xff08;4&#xff09;——像素操作0. 前言1. 图像的基本组成2. 访问像素值2.1 修改图像像素2.2 cv::Mat_ 模板类2.3 完整代码示例3. 用指针扫描图像3.1 图像扫描3.2 其他减色公式3.3 使用输入和输出参数3.4 高效扫描连续图像3.5 低阶指针算法4. 使用迭代器扫描图…
阅读更多...
linux操作系统期末考试题库

linux操作系统期末考试题库

1. cal命令 目录 1. cal命令 2.cat命令 3.cd命令 4.date命令 5.echo命令 6.grep命令 7.head 命令 8.ls 命令 9.touch 命令 10.more命令 11. ln创建链接命令 12.查看进程 13.mkdir命令 cal -3 cal 查看指定日期的日历 cal 4 2022 cal 2018 2.cat命令 cat -n /etc…
阅读更多...
认识MyBatis

认识MyBatis

MyBatis是什么&#xff1f; MyBatis是dao层&#xff08;持久层&#xff09;框架&#xff0c;它支持自定义SQL、存储过程以及高级映射。 MyBatis 免除了几乎所有的JDBC代码以及设置参数和获取结果集的工作。MyBatis 可以通过简单的XML或注解来配置和映射原始类型、接口和Java …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023