# 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) 了解插件功能的详情。

TIP

注本项目基于HBuilderX 3.96、FinClip 核心SDK （2.45.5）开发,如需要更多功能，可使用安卓/IOS源码工程进行开发、扩展后，重新生成插件。

# 2.1 引入插件

开发者可以从Github（国外） (opens new window)或Gitee（国内） (opens new window) 获取插件SDK示例（finclip-uniapp-demonativeplugins/MopSdk）。

images

# 2.2 选择插件

images images

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

TIP

（以安卓为例，注意包名需要和获取生成SDK KEY 及 SDK SECRET (opens new window)的包名一致）

images images images images images images

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


    const MopSdk = uni.requireNativePlugin('MopSdk')
    export default {
        onLaunch: function() {
            MopSdk.initialize({
                                finStoreConfigs: [{
                                    'sdkKey': '22LyZEib0gLTQdU3MUauAa2CctUv+NxTLFWyPxC28y2gA4x+JWh7hhNS5aO52BFs',
                                    'sdkSecret': '65146ffa924ecfdc',
                                    'apiServer': '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>
</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'
              MopSdk.openApplet({apiServer,appId})
          }
      }
   }
</script>

# 3. 插件更新或源码二次开发说明

FinClip uni-app 插件是能通过 uni-app 官方提供原生插件开发文档进行开发，如您需要对插件源码进行扩展，您需要具备安卓/IOS开发能力。

TIP

uni-app IOS插件开发文档 (opens new window)

uni-app 安卓插件开发文档 (opens new window)

WARNING

注本项目资源使用HBuilderX 3.96开发，不同uni-app版本会有所不同。

# 3.1 iOS 插件更新与扩展说明

请将git仓库工程内的 ios-demo.zip 进行解压，因为 iOS 端 uni-app 离线 SDK 比较大，您需要自行从uni-app IOS插件开发文档 (opens new window) 下载集成插件说明对应版本的离线SDK，SDK下载完成后请将其放置解压后的 iOS 目录下图所示(仅需拷贝Bundles、inc、Libs目录)，然后使用 xcode 打开项目。

SDK下载完成后请将其放置解压后的ios目 Alt

1、IOS插件生成，可参考下图

Alt Alt

2、如需要拓展 SDK 的 API，可参考下图

Alt

3、在调试插件中，如需更新 FinClip SDK 生成，可如下图引入新的SDK (opens new window),重新打开IOS项目

Alt

# 3.2 Android 插件扩展说明

请将git仓库工程内的 andriod-demo.zip 进行解压，使用 android studio 打开解压后的安卓项目

1、安卓插件生成，可参考下图 Alt

2、如需要拓展SDK的API，可参考下图 Alt

3、在调试插件中，如需更新FinClip SDK生成，可如下图引入新的SDK (opens new window) Alt

# 4. 插件使用与付费说明