你的APP也可以有自己的小程序

文章目录

前言

近几年小程序的发展，大家都有目共睹。其价值已经在全行业达到共识，但是大多数的企业小程序的能力都是依附互联网巨头，例如微信、支付宝、百度等，如果想要布局在多个平台，其限制和成本又是巨大的。那么，如何让开发好的微信小程序放在自己的 APP 里直接运行？如何在不同的应用中打开它？本文利用FinClip快速构建并部署一个跨平台小程序。

什么是FinClip？

FinClip是一款小程序平台，不论是移动 App，还是电脑、电视、车载主机等设备，在集成FinClip 小程序 SDK之后，都能快速获得运行小程序的能力。

FinClip 兼容微信小程序语法，可以让小程序脱离微信环境快速运行在自有app中，打造自己的小程序专属生态，对于想要布局其他平台的企业来说非常友好。

开发者不需要学习新的语法和框架，使用FinClip的 IDE、小程序管理后台、小程序开发文档、FinClip App就能低成本高质量地完成从开发测试，到预览部署的全部工作。以下是FinClip平台的组成。

FinClip 小程序开发

代码结构

FinClip小程序的结构是和微信小程序极度相似，这也是为什么可以兼容微信小程序语法的原因吧。

一个小程序主体部分由三个文件组成，必须放在项目的根目录，如下：

一个小程序页面由四个文件组成，分别是：

开发工具

跟其他小程序开发一样，FinClip也有自己的开发工具【FinClip Studio】。支持来自不同平台的小程序开发者完成小程序开发、调试、预览、上传等各类功能。还增加了小程序兼容性检查、小程序开发、真机调试预览、小程序一键转 App、小程序云开发等各类插件或能力。

小程序管理

小程序开发完成可以上传到管理平台，通过管理平台可以进行上下架、应用关联、版本管理、灰度发布、域名配置等操作。

应用集成FinClip小程序

接下来看下 uni-app 如何集成 FinClip小程序。

获取凭据

集成 SDK 需要先在 FinClip 平台中创建应用并绑定小程序，获得每个应用专属的SDK KEY及SDK SECRET后，随后就可以在集成 SDK 时填写对应的参数。

集成SDK

在 uni-app 中集成 FinClip 小程序，本质上是调用了 uni-app 中插件的能力进行实现。

开发者可以从 获取插件SDK示例（finclip-uniapp-demonativeplugins/MopSdk）

然后选择插件，并使用基座进行运行。

初始化SDK

在使用小程序的API之前，需要先初始化插件SDK。只有SDK初始化成功之后，才能使用SDK提供的API，否则 API调用都会失败。初始化代码如下

    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)
                             });
        }
    }
    

应用中打开小程序

SDK初始化成功之后，就可以在应用中进行API的调用。在应用中打开小程序的代码如下

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

FinClip SDK 还支持 iOS、Android、鸿蒙 HarmonyOS、Flutter、React Native 等端的集成，可以参考

总结

FinClip 小程序强大的跨平台能力，可以为企业迅速搭建起覆盖多终端的业务布局，无缝融入各类应用场景。以 APP+小程序的方式，也可以实现业务功能的灵活部署和即时上线。对于开发者而言，FinClip 不仅大幅降低了各终端适配的复杂性与成本，还促进了小程序生态的多元化发展，绝对是一个利好的平台。