App唤起微信小程序和回调,App跳转小程序支付
本文讲了App唤起微信小程序和回调,App跳转小程序支付。
可在“管理中心-移动应用-应用详情-关联小程序信息”,为通过审核的移动应用发起关联小程序操作。
唤起
App打开下程序他有两种方式:
1,通过App分享小程序卡片 到微信,然后在微信上点击小程序卡片打开小程序,这是小程序也可以打开App
第一步:你需要到微信开放平台 将你的app 关联上你的小程序!
第二步:你工程中需要导入有 wechatOpenSDK
第三步: 分享小程序卡片类型
View Code
2,通过App主动的调用api 打开小程序,这时候小程序也可以打开App
View Code
WXMiniProgramTypeRelease 正式版 WXMiniProgramTypeTest 开发版 WXMiniProgramTypePreview 体验版
回调
当小程序从 APP 分享消息卡片的场景打开(场景值 1036,APP 分享小程序文档 iOS / Android) 或从 APP 打开的场景打开时(场景值 1069),小程序会获得打开 APP 的能力,此时用户点击按钮可以打开分享该小程序卡片/拉起该小程序的 APP。即小程序不能打开任意 APP,只能 跳回 APP。
options.scene是1036,这个场景id表示app分享。 options.scene是1069,这个场景id表示从app打开。
按微信文档中描述,从小程序中跳回App只能通过点击小程序中的按钮方可跳回,如何实现点击按钮跳回App,并携带参数呢,需如下两步
App端:
需要创建WXEntryActivty,实现IWXAPIEventHandler接口,重写onResp方法。注意Acitvity需要在Manifest文件中声明 android:exported="true",这样才可以被外部唤起
public void onResp(BaseResp resp) { if (resp.getType() == ConstantsAPI.COMMAND_LAUNCH_WX_MINIPROGRAM) { WXLaunchMiniProgram.Resp launchMiniProResp = (WXLaunchMiniProgram.Resp) resp; String extraData =launchMiniProResp.extMsg; // 对应下面小程序中的app-parameter字段的value } }
小程序端:
需要将 <button> 组件 open-type 的值设置为 launchApp。如果需要在打开 APP 时向 APP 传递参数,可以设置 app-parameter 为要传递的参数。通过 binderror 可以监听打开 APP 的错误事件。
<view> <button open-type="launchApp" app-parameter="wechat" binderror="launchAppError">打开APP</button> </view>
这样App拿到的内容就是wechat。
扩展
再下一步的需求是多个App跳转一个小程序,再分别返回不同的App;一个App跳转不同的小程序,接受不同的返回内容。
从App拉起小程序页面的路径是可以带参数的,我们就利用这个参数判断是从那个App跳到小程序的。
例如:
名称为a的App跳转路径为:
"pages/index/index?type=appA"
名称为b的App跳转路径为:
"pages/index/index?type=appB"
小程序端接收参数:
onLoad: function (options) { console.log(options.type); //app传递过来的参数 可以判断a或者b },
这样App拿到的内容就是wechat。
扩展
再下一步的需求是多个App跳转一个小程序,再分别返回不同的App;一个App跳转不同的小程序,接受不同的返回内容。
从App拉起小程序页面的路径是可以带参数的,我们就利用这个参数判断是从那个App跳到小程序的。
在微信小程序里面新建一个页面appWxaPay,在onLoad里面获取options的支付参数,直接调小程序支付API即可。
小程序支付主要用到API:wx.requestPayment
返回App主要用button组件open-type="launchApp":<button type="primary" open-type="launchApp" app-parameter="{{status}}" binderror="launchAppError">点击返回商户</button>
重要:第一次做这个,前面对它们这个原理机制没搞清楚,一直纠结在放onLoad还是onShow里。。。然后和App同事沟通再联调验证,app每次跳小程序页会销毁重开,所以写onLoad里就行了,App每次跳过来都会触发到onLoad。
<view class="page container">
<view class="content">
<view class="status-box">
<block wx:if="{{isLoading}}">
<view>支付中..</view>
</block>
<block wx:if="{{isSuccess}}">
<icon type="success" size="50" class="pay-icon"></icon>
<view>支付成功,请返回商户</view>
</block>
<block wx:if="{{isCancel}}">
<icon type="warn" size="50" class="pay-icon" color="#C9C9C9"></icon>
<view>您已取消支付</view>
</block>
<block wx:if="{{isFail}}">
<icon type="cancel" size="50" class="pay-icon"></icon>
<view>支付失败,请重新支付</view>
</block>
</view>
<block wx:if="{{isFail || isCancel}}">
<button type="primary" class="pay-button" bindtap="toPayApp">重新支付</button>
</block>
<block wx:if="{{isLoading}}">
<button type="primary" disabled="true">点击返回商户</button>
</block>
<block wx:else>
<button type="primary" open-type="launchApp" app-parameter="{{status}}" binderror="launchAppError">点击返回商户</button>
</block>
</view>
</view>
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)
}
});
.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;
}
上文就是小编为大家整理的App唤起微信小程序和回调,App跳转小程序支付。
国内(北京、上海、广州、深圳、成都、重庆、杭州、西安、武汉、苏州、郑州、南京、天津、长沙、东莞、宁波、佛山、合肥、青岛)Finclip软件分析、比较及推荐。
版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。
发表评论
暂时没有评论,来抢沙发吧~