uni-app实现支付及项目打包上传-创新互联

本文主要介绍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. 单击发行发行->小程序微信