uniapp开发云闪付小程序。

按照官方文档说明：接入方使用云闪付 APP 小程序前端 API 前，需在调用页面（必须为 https ）引入插件 upsdk.js 文件。我们需要在项目根目录中，新建一个html模板文件。不知道的大家可以直接拷贝云闪付小程序DEMO示例中的index.html文件，或者如下图：我们可以点击参考说明，uniapp官方有示例。upsdk.js 引入后需在页面使用进行 sdk 初始化，前端接口的调用建议

yang2991268570

3898人浏览 · 2022-06-11 10:23:45

yang2991268570 · 2022-06-11 10:23:45 发布

第一步：接入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