uni-app实现支付及项目打包上传
创始人
2024-03-12 10:25:05
0

        本文主要介绍uni-app项目中如何实现支付功能(支付宝支付、微信支付),及项目如何打包上传。

一、实现支付

        前置工作,项目要实现支付功能,首先要在根目录manifest.json文件内App模块配置中进行设置。

其中,appid需要登录微信开放平台加移动应用,审核通过后可获取应用ID(AppID,支付订单中需要使用)。

1.1 支付宝支付

        登录 支付宝开放平台 ,进入控制台页面创建移动应用,填写应用信息并提交审核,在应用详情页面的能力列表中添加APP支付功能,进入开发设置完成加密方式、IP白名单等开发信息,设置添加功能和配置密钥后(获取公钥、私钥,用于服务器生成订单),将应用提交审核,详情参考上线应用应用上线后,完成签约才能在生产环境使用支付功能。

        主要步骤如下:

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

2.用户发起支付 requestPayment(item,index){};

3.获取订单信息 getOrderInfo(item.id);

4.发起支付api。

详细代码如下:

1.2 微信支付

        实现微信支付除了在微信平台获取appid外,还需要使用商户号和登录密码登录微信商户平台,进入 “账户中心” > “API安全” > “设置APIv2密钥” 设置API密钥(用于服务器生成订单),详情参考API证书及密钥。没有商户号,此步骤就不演示了,重点放在实现支付的代码上。

        主要步骤如下:

1. 用户点击发起支付 async weixinpay();

2. 获取openid 本地||loginMPweixin;

        2.1 获取code uni.login();

        2.2 获取openid uni.request({});

3. 获取订单信息 this.getOrderInfo('wxpay');

4. 根据订单信息发起支付 uni.requestPayment({...orderInfo})。

详细代码如下:


二、项目打包上传

        这是uni-app项目上线的最后一步,本着一处编码,多端使用的突出优势,项目打包有以下几种方式。

2.1 H5端打包上传

        配置相对地址 manifest.json web配置 运行的基础路径 

        修改完后,点击工具栏->发行->网站pc web或手机 。

 弹出弹窗,修改网站标题于网站域名(网站域名取对应项目的域名,一般为https/http开头)填完后直接点击发行。

        发行成功后,在项目根目录下会自动生成unpackage文件夹,unpackage --> dist --> build --> h5 文件夹, 在外部资源中打开,将 h5 文件夹打包成 zip 格式,然后给到运维,运维会帮忙发布到服务器,发布成功后,运维会给你一个属于 h5 项目的域名 https://xxxx.xxx.com/app/ 拿取H5域名去拼接页面,就能在浏览器中打开对应的页面了。 

2.2 微信小程序打包上传

        主要步骤有以下几个方面:

1. 配置id  manifest.json 微信小程序配置

2. 单击发行 发行->小程序微信

 

3. 进入小程序上传小程序右上角上传(先测试,真机测试)

 4. 微信提交审核 (mp.weixin.qq.com),进入网站,版本管理-->审核-->审核通过发布,一定要认真填写隐私协议,至关重要,否则大部分时间要花费在这一步上。

5. 网络请求配置域名必须是https开头, 开发管理-->服务器设置-->服务器域名

    request合法域名:uni.request,wx.request 请求的域名必须事先定义好;

    uploadFile合法域名:如果有上传也要配置上传的域名;

    downloadFile合法域名:配置下载域名。

2.3 应用商店打包上传

        当前主流的应用商店有华为、oppo、vivo、小米等。在众多应用商店中,目前仅华为一家允许个人身份进行上传App,其他商店都需要公司身份。打包上传需要提供app的版权证明;在这个过程中最重要的是应对国家的隐私条例,以及应用商店的隐私审核。

        主要步骤有以下几点:

1. 在manifest.json中进行设置

App图标配置

 2. 发行-->源生app-云打包

3.勾选打包配置

 4. 点击打包,在控制台中查看进度

5. 点击链接下载 apk 的安装包,并安装到 Android 手机中查看打包的效果。 

        如果整理的内容对你有用,欢迎收藏转发。

相关内容

热门资讯

修复 爱普生 EPSON L4... L4151 L4153 L4156 L4158 L4163 L4165 L4166 L4168 L4...
【PdgCntEditor】解... 一、问题背景 大部分的图书对应的PDF,目录中的页码并非PDF中直接索引的页码...
监控摄像头接入GB28181平... 流程简介将监控摄像头的视频在网站和APP中直播,要解决的几个问题是:1&...
在Word、WPS中插入AxM... 引言 我最近需要写一些文章,在排版时发现AxMath插入的公式竟然会导致行间距异常&#...
protocol buffer... 目录 目录 什么是protocol buffer 1.protobuf 1.1安装  1.2使用...
【前端】‘??‘与‘||‘有什... 0 问题 经常写const data = res.data.a ?? ''或者const d...
Windows10添加群晖磁盘... 在使用群晖NAS时,我们需要通过本地映射的方式把NAS映射成本地的一块磁盘使用。 通过...
牛客计算器的改良(Python... 文章目录1.题目描述2.输入描述:3.输出描述:4.示例15.分析6.代码7.结语 链接࿱...
正大杯|市调大赛|2023备赛... 关键信息 同时随着精细化养宠趋势的深入,宠物消费类目日渐丰富。 本报告通过 Niuco...
QGIS下载在线地图(Goog... 前言 国内外有很多在线地图下载软件,但功能单一,基本上只能下载数据&#x...