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

Petterp
11,623 阅读7分钟

引言

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

但随着大前端、跨平台、低代码 近几年的火热，小程序的技术也在飞速迭代。特别是被疫情夺走的这三年，常用的 健康码、出行码、打车、外卖小程序 等，已经越来越成为我们日常必不可少的 基础工具 之一，可以说，小程序的使用程度已经远远超过了我们曾经所认为的那样。

现在，有更多的产品会首选小程序作为快速落地，并以此提升用户数量，打开 从0到1 的第一步；从 动态化 的角度而言，小程序相比过去的H5也更受平台型App的欢迎。

所以如何选择一个 高性能，低成本 的 小程序框架，又更是每个公司与个人开发者必须要考虑的事情。

故此，本篇我们将使用 小程序 x FinClip 容器框架，并将其快速集成到我们的 App 中，从而以小见大，一瞥其相比H5与原生的差异。

背景

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

小程序是什么？

image-20230216221929723

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

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

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

对于业务方而言，这是快速落地的第一步，对于使用者而言，因为依托在 平台型App 之上，打开路径也更加简单直接。

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

通常来说，小程序其实就是一种 轻量级 的应用程序，通常指的微信、支付宝、抖音 等应用内的动态化容器，因为其与传统应用程序不同，无需安装，即可以实现类似原生一样的使用体验。

  • 从使用上来看：小程序某种程度上是移动应用的一个子集，如果将原生应用比作容器或者画板，而小程序则是水或者画笔；
  • 从性能上去看：小程序对硬件的依赖较小，但相应的，也受限于宿主应用的限制，如果业务场景复杂，此时就会遇到性能上的问题；
  • 从开发成本去看：相比原生来说，小程序的开发难度较低，其通常是前端常用的语言，并且高可复用性也是其特点之一；
  • 从业务推广来看：小程序的渠道较多，比如可以直接在微信、支付宝等平台快速上线与推广，并通过分享、搜索等方式，获客成本相比原生较低；
  • 从跨平台能力来看：小程序天然的具备跨平台的能力，一套代码可以在ios、Android等多平台运行，有些框架更支持将小程序导出为原生应用；

具体对比如下表所示：

特性\平台原生应用小程序H5
性能⭐️⭐️⭐️⭐️⭐️⭐️
开发成本⭐️⭐️⭐️⭐️⭐️⭐️
支持跨平台⭐️⭐️⭐️⭐️⭐️⭐️
业务推广成本⭐️⭐️⭐️⭐️
使用体验(简单场景)⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️
使用体验(复杂场景)⭐️⭐️⭐️⭐️⭐️⭐️

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

框架选型

虽然小程序目前仍是一片蓝海，但各厂商从17年到现在，也都逐渐筑起了自己的平台，相应的也有一些不同的限制与渲染规则。

如果后续业务越来越复杂，势必需要 考虑作为其他平台的引流方，借此提高体验。此时如何能快速、低成本进行小程序迭代，又是每个业务方需要考虑的问题。

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

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

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

image-20230217143439169

上述平台组成图中，细分概念如下：

云端：指的是为用户使用的管理后台，比如开发者可以在这里进行小程序管理，设置小程序所要访问域名等；

端侧：由小程序SDK组成，用于提供运行小程序所必要的基础环境，同时又包含 运行小程序的安全沙箱、代码解释器、渲染引擎；

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

image-20230217150833705

集成步骤

当我们在云端配置好小程序并上线，且与我们的 宿主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")
  }

效果展示

90_167660572090_167660572091_1676614660

总结

在本篇，我们选择使用 FinClip 框架，并将其集成到现有的 App 中，从而感受小程序与原生应用的差距。

在技术迭代的现在，相对于原生应用而言，小程序具有轻量化、无需安装、开发门槛低、跨平台、生态丰富等优势，对于一些简单的应用场景和快速开发，小程序是一种不错的选择。同时，随着小程序的不断发展和完善，它的应用范围和开发者群体也将会逐渐扩大。

从各平台App去看，无论是支付宝、抖音、微信，也都选择小程序作为动态化的关键容器。

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

参照

关于我

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

也欢迎关注我的 公众号(Petterp) ，期待与你一同前进。

avatar
文章
阅读
粉丝