uniApp的支付与打包

支付app的支付(支付宝付)

准备工作

1、支付厂商获取id

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

2、微信:微信支付平台https://pay.weixin.qq.com/
在这里插入图片描述

3、打包 manifest.json app模块配置 payment支付
可以选择支付宝支付或者其他平台的支付
在这里插入图片描述

具体支付代码

用户发起支付 requestPayment(item,index){}
获取订单信息 getOrderInfo(item.id)发起支付api 
uni.requestPayment({
provider:item.id,//提供商
orderInfo:orderInfo,//订单信息
})

html部分

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

js部分

export default {data() {return {price:1,providerList: [], //支付厂商,微信,或者支付openid:'' //用户id}},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  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) {// 返回一个promisereturn 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;}

微信支付的大概流程

<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 --><!-- 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>export default {data() {return {price:1,providerList: [], //支付厂商,微信,或者支付openid:'' ,//用户idloading: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;//加载中// 获取openidlet openid = uni.getStorageSync('openid')if(!openid){// 执行登录获取openidopenid = await this.loginMpWeixin();this.openid = openid;}// 获取订单信息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})},// 移除loadingcomplete: () => {this.loading = false;}})},loginMpWeixin(){// 返回一个promisereturn 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, // 传入codeplatform: 'mp-weixin'}},success(res) {if (res.data.code !== 0) {reject(new Error('获取openid失败:', res))return}// 成功后存储opendiuni.setStorageSync('openid', res.data.openid)// 返回openidresolve(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) {// 返回一个promisereturn 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><style></style>

小程序支付

1、 用户的点击 发起支付async weixinPay()
2、获取openid本地存储 ||loginMpWeixin
获取code uni.login({}) 获取openid uni.request({})
3、 获取订单信息 this.getOrderInfo('wxpay')
4、根据订单信息发起支付

uni.requestPayment({...orderInfo})

打包

1、配置相对地址
manifest.json
web配置
运行的基础路径 ./
2、发行->发到网站-PC
3、unpackage>dist>build>H5
上传服务器 flashFXP工具上传

打包微信小程序上传

01 配置id
manifest.json 微信小程序配置
02 单击发行
发行->小程序微信
03 进入小程序上传
小程序右上角上传(先测试,真机测试)
04 微信提交审核
mp.weixin.qq.com
版本管理、审核、审核通过发布、认真填写隐私协议
5、 如果网络请求配置域名必须是https开头
开发管理、服务器设置、服务器域名

  1. request合法域名uni.request,wx.request 请求的域名必须事先定义好
  2. uploadFile合法域名如果有上传也要配置上传的域名
  3. downloadFile合法域名配置下载域名
    6、搞钱 累计用户操作1000 可以称为流量主开通广告(视频激励广告最挣钱)、let rewardedVideoAd = null

App打包上传应用商店

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


本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场,不承担相关法律责任。如若转载,请注明出处。 如若内容造成侵权/违法违规/事实不符,请点击【内容举报】进行投诉反馈!

相关文章

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部