基于uniapp(Vue3)自定义开发云闪付小程序

news2024/11/18 20:42:29

云闪付小程没有类似微信或支付宝小程序那样自己的框架，本质是开发一个H5，部署到自己的服务器上，然后在云闪付小程序平台配置首页链接。开发的H5要保证能使用官方的SDK和组件库。

项目基础配置

将以下代码配置入package.json

"uni-app": {
		"scripts": {
			"mp-unionpay": {
				"title": "云闪付小程序",
				"env": {
					"UNI_PLATFORM": "h5"
				},
				"define": {
					"MP-UNIONPAY": true
				}
			}
		}
	}

这样就可以在项目中使用“//ifdef MP-UNIONPAY”的语法，可以使用特殊的运行方式和打包方式

sdk的使用

在index.html中添加以下代码

	<script src="https://open.95516.com/s/open/js/upsdk.js"></script>

使用sdk方法时外层必须调用upsdk.pluginReady，如下：

upsdk.pluginReady(() => {//使用必写
			upsdk.appletAuth({
				success: function(data) {
					if (data.code) {
						console.log("获取到code");
						codeLogin(data.code)
					}
					console.log(data);
				},

				fail: function(error) {
					errorToast(utoast, '登录失败', 1000, true, true)
				}
			})
		});b

vue3-cup-ui授权组件使用

官方下载下来的包直接解压到node_modules里

在main.js里引入Vue3CupUi，便可在任意页面使用

import App from './App'
import uView from './uni_modules/vk-uview-ui';
import {
	build
} from './request/request.js'

import Vue3CupUi from 'vue3-cup-ui'
import 'vue3-cup-ui/lib/vue3-cup-ui.common.css'
// #ifndef VUE3 
import Vue from 'vue'
Vue.config.productionTip = false
App.mpType = 'app'

const app = new Vue({
	...App
})
app.$mount()
// #endif

// #ifdef VUE3
import {
	createSSRApp
} from 'vue'
import * as Pinia from 'pinia'
import {
	createUnistorage
} from './uni_modules/pinia-plugin-unistorage'
export function createApp() {
	const app = createSSRApp(App)
	const store = Pinia.createPinia()
	store.use(createUnistorage())
	build(app)
	app.use(uView).use(store).use(Vue3CupUi)
	return {
		app,
		Pinia
	}
}
// #endif