uni-app 集成

集成样例代码

我们提供了 DEMO 工程，开发者可以在Github（国外） (opens new window)或Gitee（国内） (opens new window) 获取集成样例代码。

1. 获取凭据

请注意

集成 SDK 需要先在 FinClip 平台中创建应用并绑定小程序，获得每个应用专属的SDK KEY及SDK SECRET后，随后就可以在集成 SDK 时填写对应的参数。打开小程序时 SDK 会自动初始化，并校验SDK KEY，SDK SECRET与BundleID(Application ID)是否正确。

您可以 【点击这里】 查看如何获取所需要的SDK KEY及SDK SECRET。请务必确认集成 SDK 时填写的参数正确，否则会导致小程序无法打开。

2. 集成插件

在 uni-app 中集成 FinClip 小程序，本质上是调用了 uni-app 中插件的能力进行实现，您可以点击 这里 (opens new window) 了解插件功能的详情。

2.1 引入插件

2.2 选择插件

2.3 生成自定义基座便于调试

2.4 在 uni-app 项目中初始FinClip 小程序 SDK

    const MopSdk = uni.requireNativePlugin('MopSdk');

	export default {
		onLaunch: function() {
            MopSdk.initialize({
                                'sdkKey': '这里填上的SDK Key',
                                'sdkSecret': '这里填上SDK secret',
                                'apmServer': '这里填上你们的服务器地址', // 例如:https://api.finclip.com;
                             },
                             (ret) => {
                                 console.log('App Launch Success', ret)
                             },
                             (ret) =>{
                                 console.log('App Launch Fail', ret)
                             });
        }
    }
    

2.5 在 uni-app 项目中打开小程序

<template>
	<view class="content">
		<image class="logo" src="/static/logo.png"></image>
		<button type="primary" v-on:click="handleOpenMiniProgram">打开小程序</button>
		<view class="padding-gap"></view>
		<button type="primary" v-on:click="handleOpenMiniProgramByQrcode">二维码打开小程序</button>
	</view>
</template>

<script>
	const MopSdk = uni.requireNativePlugin('MopSdk');
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {

		},
		methods: {
			handleOpenMiniProgram() {
				const apiServer = 'https://api.finclip.com'
				const appId = '5eec56a41464cc0001852e9a'
				const startParams = null
				// const startParams = {
				// 	path: '/pages/index/index',
				// 	query: 'a=1&b=2'
				// }
				const sequence = null // 小程序的上架序列号
				MopSdk.openApplet(apiServer,
				                  appId,
								  startParams,
								  sequence)
			},
			handleOpenMiniProgramByQrcode() {
				uni.scanCode({
					success: (result) => {
						console.log(result)
						const qrcode = result.result
						MopSdk.openAppletByQrcode(qrcode,
						                  (ret) => {
											  console.log('onSuccess',ret)	
										  },
										  (ret) => {
											  console.log('onFail',ret)	
										  },
										  (ret) => {
										  	console.log('onProcess',ret)								  
										  })
					}
				})
				
			}
		}
	}
</script>

3. 常见问题

1. 提示 iOS 生成基座需要处理证书问题？

在进行 iOS 端基座生成工作时，您需要提前申请 .p12 证书，您可以点击这里 (opens new window)查看 uni-app 官方提供的说明文档。

2. 生成基座前需求重新生成项目 AppID？

您需要在下图出点击按钮，重新生成 AppID