第一步:接入upsdk.js。
按照官方文档说明:
接入方使用云闪付 APP 小程序前端 API 前,需在调用页面(必须为 https )引入插件 upsdk.js 文件。我们需要在项目根目录中,新建一个html模板文件。
不知道的大家可以直接拷贝云闪付小程序DEMO示例中的index.html文件,或者如下图:
我们可以点击参考说明,uniapp官方有示例。
第二步:upsdk初始化
upsdk.js 引入后需在页面使用 upsdk.pluginReady
进行 sdk 初始化,前端接口的调用建议在其回调函数中使用。
upsdk.pluginReady (function(){
// 按照云闪付文档----->进行前端API调用
});
第三步:使用授权组件
vue:
- 确定项目中引用了
upsdk.js
,确定需要进行非基础授权,确定是 Vue 项目; - 下载 vue-cup-ui.zip 包,下载地址
https://open.95516.com/s/open/components/vue-cup-ui.zip
; - 将 vue-cup-ui.zip 放入项目 node_modules 下解压,
- 在mian.js中加载组件。
第三步:多环境开发----判断当前环境。
// 判断当前H5环境是不是云闪付小程序
export function isInUpApp() {
var agent = navigator.userAgent.toLowerCase();
var isInsideWallet = ((new RegExp(/(com.unionpay.chsp)/).test(agent)) || (new RegExp(/(com.unionpay.mobilepay)/).test(agent)));
return isInsideWallet;
}
实际应用:
ps:$isInUpApp()是我自己引用的名字。具体名字根据自己引用的使用。
// #ifdef H5
if(this.$isInUpApp()){
let that = this
// that.submitPay()
//云闪付小程序关注。
upsdk.pluginReady (function(){
upsdk.collectCurrentApplet({
success:function(data){
//that.submitPay()
},
fail:function(error){
if(error.code==1){
//that.submitPay()
}else{
//that.$refs.sendMsgPop.open()
}
console.log(error)
// 失败回调 error={"code":"", msg:""}
// '01': 当前小程序已经关注
// '02': 环境错误(在非小程序页面调用或者当前小程序运行异常)
// '03': 网络异常(网络错误或者服务器响应错误)
// '04': 用户取消(用户点击右上角X)
// '05': 其它异常
}
});
});
}
// #endif