# App跳转小程序支付
先放出官方文档：
* **App拉起小程序**：[https://developers.weixin.qq.com/doc/oplatform/Mobile_App/Launching_a_Mini_Program/Launching_a_Mini_Program.html](https://developers.weixin.qq.com/doc/oplatform/Mobile_App/Launching_a_Mini_Program/Launching_a_Mini_Program.html)
* **小程序打开App**：[https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/launchApp.html](https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/launchApp.html)
官方文档已经写的比较清楚了，也有对应的示例，App开发同事直接用就行了。下面主要说小程序的支付：
在微信小程序里面新建一个页面 `appWxaPay`，在 `onLoad` 里面获取 `options` 的支付参数，直接调小程序支付API即可。
小程序支付主要用到API：`wx.requestPayment`
返回App主要用button组件 `open-type="launchApp"`：
```html
```
**重要**：第一次做这个，前面对它们这个原理机制没搞清楚，一直纠结在放 `onLoad` 还是 `onShow` 里，各种问查没结果。。。然后和App同事沟通再联调验证，app每次跳小程序页会销毁重开，所以写 `onLoad` 里就行了，App每次跳过来都会触发到 `onLoad`。
## WXML 代码
```html
支付中..
支付成功，请返回商户
您已取消支付
支付失败，请重新支付
```
## WXSS 代码
```css
.page {
position: relative;
height: 100%;
background-color: #fff;
}
.content{
padding: 0 40rpx;
color: #666;
}
.status-box{
padding: 60rpx 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.pay-button{
margin-bottom: 30rpx;
}
.pay-icon{
margin-bottom: 30rpx;
}
```
## JS 代码
```javascript
Page({
data: {
isLoading: false,
isSuccess: false,
isFail: false,
isCancel: false,
timeStamp: '',
nonceStr: '',
package: '',
paySign: '',
status: 0, // 0: 已取消(未付)，1：已支付，2：支付失败
},
onLoad: function (options) {
var that = this;
that.setData({
timeStamp: options.timeStamp || '',
nonceStr: options.nonceStr || '',
package: options.package || '',
paySign: options.paySign || ''
})
that.toPayApp()
},
toPayApp() {
var that = this
if (!that.data.timeStamp || !that.data.nonceStr || !that.data.package || !that.data.paySign) {
wx.showToast({
title: '无效的支付请求，请返回商户重试',
icon: 'none'
})
return false
}
if (that.data.isLoading) {
return false
}
that.setData({ isLoading: true })
wx.requestPayment({
timeStamp: that.data.timeStamp,
nonceStr: that.data.nonceStr,
package: that.data.package,
signType: 'MD5',
paySign: that.data.paySign,
success: function(res) {
that.setData({ isLoading: false, isSuccess: true, status: 1 })
wx.showToast({
title: '支付成功，请返回商户',
})
},
fail: function(res) {
if (res.errMsg === "requestPayment:fail cancel") {
that.setData({ isLoading: false, isCancel: true, status: 0})
wx.showToast({
title: '您已取消支付',
})
} else {
that.setData({ isLoading: false, isFail: true, status: 2 })
wx.showToast({
title: '支付失败，请重新支付',
icon: 'none'
})
}
}
})
},
launchAppError (e) {
console.log(e.detail.errMsg)
}
});
```
发表评论 取消回复