把小程序集成到App中，可能比你想的还要简单

引言

对于 Android 或许 ios 开发同学而言，小程序 这个词，似乎离咱们很远又很近，或许在 客户端 的视角下，总是下意识会认为小程序也就那样。

但随着大前端、跨渠道、低代码 近几年的炽热，小程序的技能也在飞速迭代。特别是被疫情夺走的这三年，常用的 健康码、出行码、打车、外卖小程序 等，现已越来越成为咱们日常必不可少的 根底工具 之一，能够说，小程序的运用程度现已远远超过了咱们从前所认为的那样。

现在，有更多的产品会首选小程序作为快速落地，并以此进步用户数量，翻开 从0到1 的第一步；从 动态化 的视点而言，小程序比较曩昔的H5也更受渠道型App的欢迎。

所以怎么挑选一个 高功能，低本钱 的 小程序结构，又更是每个公司与个人开发者必须要考虑的事情。

故此，本篇咱们将运用 小程序 x FinClip 容器结构，并将其快速集成到咱们的 App 中，然后以小见大，一瞥其比较H5与原生的差异。

布景

每一项技能，都有其开展前史与布景，小程序也不例外，在开始本篇之前，咱们有必要先聊一聊小程序的前史。

小程序是什么？

这儿引用2016年 [微信公开课Pro] 中的一段话：

小程序是一种不需求下载装置即可运用的运用，它实现了运用“触手可及”的梦想，用户扫一扫或许搜一下即可翻开运用。也体现了“用完即走”的理念，用户不用关心是否装置太多运用的问题。运用将无处不在，随时可用，但又无须装置卸载。

记得2017年初，微信小程序正式上线，从开始的不受瞩目，到现在的日常根底运用，再去看上面这段话，正如其意一般，用完即走、快速翻开。

对于事务方而言，这是快速落地的第一步，对于运用者而言，由于依托在 渠道型App 之上，翻开途径也更加简略直接。

小程序与原生运用的差异？

一般来说，小程序其实便是一种 轻量级 的运用程序，一般指的微信、支付宝、抖音 等运用内的动态化容器，由于其与传统运用程序不同，无需装置，即能够实现类似原生相同的运用体会。

• 从运用上来看：小程序某种程度上是移动运用的一个子集，假如将原生运用比作容器或许画板，而小程序则是水或许画笔；
• 从功能上去看：小程序对硬件的依靠较小，但相应的，也受限于宿主运用的约束，假如事务场景杂乱，此刻就会遇到功能上的问题；
• 从开发本钱去看：比较原生来说，小程序的开发难度较低，其一般是前端常用的言语，并且高可复用性也是其特点之一；
• 从事务推行来看：小程序的渠道较多，比方能够直接在微信、支付宝等渠道快速上线与推行，并经过分享、查找等方法，获客本钱比较原生较低；
• 从跨渠道才能来看：小程序天然的具有跨渠道的才能，一套代码能够在ios、Android等多渠道运转，有些结构更支撑将小程序导出为原生运用；

具体比照方下表所示：

特性\渠道	原生运用	小程序	H5
功能	⭐️⭐️⭐️	⭐️⭐️	⭐️
开发本钱	⭐️	⭐️⭐️	⭐️⭐️⭐️
支撑跨渠道	⭐️	⭐️⭐️	⭐️⭐️⭐️
事务推行本钱	⭐️	⭐️⭐️	⭐️
运用体会(简略场景)	⭐️⭐️⭐️	⭐️⭐️⭐️	⭐️⭐️
运用体会(杂乱场景)	⭐️⭐️⭐️	⭐️⭐️	⭐️

⭐️ 越多代表越优异，反之则是越差。

结构选型

虽然小程序目前仍是一片蓝海，但各厂商从17年到现在，也都逐步筑起了自己的渠道，相应的也有一些不同的约束与烘托规则。

假如后续事务越来越杂乱，必然需求 考虑作为其他渠道的引流方，借此进步体会。此刻怎么能快速、低本钱进行小程序迭代，又是每个事务方需求考虑的问题。

而 FinClip(凡泰极客) ，正是一个用于应对上述难点的优异容器结构之一，其具有以下特性：

• 轻量的小程序SDK；
• 完善的开发者工具；
• 面向事务的全生命周期办理；
• 支撑一键将小程序转为原生App*；
• 兼容微信小程序语法与登录系统；
• 支撑在 Android 、ios、鸿蒙、Flutter、windows、车机 等系统中集成；

一起，FinClip 也是一个生态性的协作渠道，用户能够与企业、SDK插件提供商、小程序开发运营商、云渠道SaaS服务商协作，研发个性化的超级App，其具体的渠道组成图如下：

上述渠道组成图中，细分概念如下：

云端：指的是为用户运用的办理后台，比方开发者能够在这儿进行小程序办理，设置小程序所要访问域名等；

端侧：由小程序SDK组成，用于提供运转小程序所必要的根底环境，一起又包含 运转小程序的安全沙箱、代码解说器、烘托引擎；

开发者工具：主要由 IDE 与 App 组成，这也是离咱们开发者最近的当地，用于小程序的代码开发及调试，并支撑一键将代码上传至云端审阅，以及在本地对小程序的预览与办理操作等，具体如下图所示：

集成步骤

当咱们在云端装备好小程序并上线，且与咱们的 宿主App 中关联之后，就能够在原生运用集成小程序sdk了。

这儿以 IDE 中默认的小程序示例作为测验代码，集成方法以 FinClip 的 AndroidSdk 为例，其他端能够参照官方文档。

具体教程如下：

gradle装备

build.gradle || settings.gradle(假如已迁移新版依靠方法)

// 方法1. build.gradle
allprojects {
    repositories {
        maven {
            url "https://gradle.finogeeks.club/repository/applet/"
            credentials {
                username "applet"
                password "123321"
            }
        }
    }
}
// 方法2. settings.gradle
dependencyResolutionManagement {
    ...
    repositories {
      	...
        maven {
            url "https://gradle.finogeeks.club/repository/applet/"
            credentials {
                username "applet"
                password "123321"
            }
        }
    }
}

集成kotlin插件

// 方法1
classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:1.7.21"
// 方法2
plugins {
    id 'org.jetbrains.kotlin.android' version '1.7.21' apply false
}

引入sdk依靠，处理装备

android{
	 packagingOptions {
        // libsdkcore.so、libfin-yuvutil.so是被加固过的，不能被压缩，不然加载动态库时会报错
        doNotStrip "*/x86/libsdkcore.so"
        doNotStrip "*/x86_64/libsdkcore.so"
        doNotStrip "*/armeabi/libsdkcore.so"
        doNotStrip "*/armeabi-v7a/libsdkcore.so"
        doNotStrip "*/arm64-v8a/libsdkcore.so"
        doNotStrip "*/x86/libfin-yuvutil.so"
        doNotStrip "*/x86_64/libfin-yuvutil.so"
        doNotStrip "*/armeabi/libfin-yuvutil.so"
        doNotStrip "*/armeabi-v7a/libfin-yuvutil.so"
        doNotStrip "*/arm64-v8a/libfin-yuvutil.so"
    }
    dependencies {
    	 implementation 'com.finogeeks.lib:finapplet:2.39.7'
    	 implementation "org.jetbrains.kotlin:kotlin-stdlib:1.7.21"
    }
}

处理混淆

-keep class com.finogeeks.** {*;}

代码装备

Application

override fun onCreate() {
        super.onCreate()
        if (FinAppClient.isFinAppProcess(this)) return
        val config = FinAppConfig.Builder()
            .setSdkKey("M8j6KLAGGce/g0XJB8hlqUnu5dv6R/kwAxPre2U3SJc=") // SDK Key
            .setSdkSecret("335d2c668af0ddeb") // SDK Secret
            .setApiUrl("https://api.finclip.com") // 服务器地址
            .setApiPrefix("/api/v1/mop/") // 服务器接口恳求路由前缀
            .build()
        val initCallback = object : FinCallback<Any?> {
            override fun onSuccess(result: Any?) {
                Log.e("petterp", "init success")
            }
            override fun onProgress(status: Int, info: String?) {
            }
            override fun onError(code: Int, error: String?) {
                Log.e("petterp", "init error:$error")
            }
        }
        FinAppClient.init(this, config, initCallback)
        // 启动小程序
        FinAppClient.appletApiManager.startApplet(this, "63ee4c259261fa0001202d60")
  }

效果展现

总结

在本篇，咱们挑选运用 FinClip 结构，并将其集成到现有的 App 中，然后感触小程序与原生运用的差距。

在技能迭代的现在，相对于原生运用而言，小程序具有轻量化、无需装置、开发门槛低、跨渠道、生态丰厚等优势，对于一些简略的运用场景和快速开发，小程序是一种不错的挑选。一起，随着小程序的不断开展和完善，它的运用范围和开发者集体也将会逐步扩大。

从各渠道App去看，无论是支付宝、抖音、微信，也都挑选小程序作为动态化的要害容器。

从移动端的技能变更去看，在跨渠道百花齐放的现在，无论是 Flutter、React Native，仍是后来者 Compose 与 KMM ，每一项技能在各自领域也都有其存在的含义。但假如要谈到快速落地，并与现有事务进行结合，大多数时候，咱们仍然仍是会回到 更成熟 的H5，那此刻无妨也试试将 小程序 集成到 App 中，其或许会是更好的挑选。

参照

• FinClip(凡泰极客)文档
• 小程序开展史知多少？

关于我

我是Petterp,一个 Android工程师 ，假如本文对你有所帮助，欢迎 点赞、评论、收藏，你的支撑是我持续创作的最大鼓舞！