FinClip为企业提供小程序生态圈技术产品,开发者可在FinClip小程序开发帮助中心找到相关FinClip小程序指引

# uni-app 集成

集成样例代码

可以在这里获取集成样例代码https://github.com/finogeeks/finclip-uniapp-demo (opens new window)

若您所在的环境无法访问 Github,也可以点击这里访问 gitee (opens new window) 的镜像仓库。

# 1. 获取小程序凭据

使用 SDK 需要申请 SDK KEY 及 SDK SECRET ,只有在SDK初始化的时候配置了正确的 SDK KEY 及 SDK SECRET ,才能初始化成功并正常使用。

# 1.1 创建应用

注册用户需要登录「应用管理-新增合作应用」,完成应用创建;
image.png

# 1.2 获取 SDK KEY 及 SDK SECRET

创建应用并添加Bundle ID后,若需要导出对应的SDK KEY与SDK SECRET,请选择对应 Bundle ID 后的「复制」,即可通过ctrl+v或command+v进行粘贴操作;
image.png

其中:

  • SDK KEY:是合作应用能使用小程序SDK的凭证,如果SDK Key校验失败,则SDK的所有Api都无法使用。
  • SDK SECERT:是访问服务的安全证书,不要给第三方。

提示

关于创建应用与获取 SDK KEY 及 SDK SECRET 的详细操作,见「介绍-操作指引-企业端操作指引-7.关联移动应用」一节。

# 2. 集成插件

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

# 2.1 引入插件

images

# 2.2 选择插件

images images

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

images images images images images

# 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 images

© 2022 FinClip with ❤

👋🏻 嘿,你好!

「FinClip」是一套基于云原生框架设计的小程序容器。能够让任何移动应用在集成小程序SDK之后,获得可用、安全的小程序运行能力。

>> 点我免费注册体验

查看产品文档
了解与 FinClip 相关的一切信息

产品博客 👈  了解产品更新与核心功能介绍
资源下载 👈  获取小程序 SDK 与开发工具
文档中心 👈  查询 FinClip 小程序开发指南与答疑

商务咨询热线
预约 FinClip 产品介绍,咨询商务报价或私有化部署事宜

400-066-00210755-86967467

获取产品帮助
联系 FinClip 技术顾问,获取产品资料或加入开发者社群

联系线上
人工客服

或 👉  点击这里,提交咨询工单

填写 FinClip 问卷抽缤纷夏日盲盒
Hi,这里是我们为 FinClip 用户准备的一封调研问卷,期待您的参与,您的反馈和建议,将指引 FinClip 未来前进的方向。