本文正在参与#稀土凡泰极客小程序体会有奖征文活动#,走进FinClip,轻松完成小程序产品梦。活动指路/post/709941…

整体架构

这儿首要来看下凡泰小程序的整体架构图(重视大众号获取白皮书):

借助 FinClip SaaS 平台从零到一开发小程序
宿主APP:和插件化中的宿主类似,仅仅供给了一个小程序的运转环境(插件化是模拟供给了一个Android系统的运转环境)。需集成SDK,在恰当机遇初始化SDK。并加载指定小程序(小程序仅有标识APPID)

小程序开发团队:负责开发小程序(类似微信小程序开发),发布代码包版别,提交审阅

运营团队:对小程序进行审阅,上下架版别,对SDK进行数字签名以保证宿主运用的SDK是未污染,最新,及安全的

SDK运转时

  • 供给安全沙箱,保护沙箱中的 H5 运用和小程序运用不被宿主 App 干扰
  • 供给在宿主 App 内安全履行小程序/H5 运用的环境
  • 目标收集,运用功能目标(APM)收集

后端服务:也便是正常的接口请求

对应的流程图

借助 FinClip SaaS 平台从零到一开发小程序

优势

  • SDK内部代码运转在封闭的安全沙箱中,不会造成数据外泄
  • 在Android,SDK内部运用的内核上与系统浏览器的内核不一样
  • 无需发版即可新增小功用,快速试错迭代(虽说热修复也能够完成,但价值太高)
  • 轻量级,一次编写即可接入到不同的渠道上(这也是小程序有的优势)
  • 事务功用发布需服务器端进行审阅发布,可供给给多家客户运用
  • 比较于纯h5方案,烘托不基于DOM而是WebView堆栈中的实例间切换。Android端选用功能更高的Chromium。

实践

流程

运用IDE开发小程序提交版别—-》服务器端审阅经过,并增加可运用该小程序的运用—-》运用也便是宿主集成SDK—–》运用在适宜机遇初始化SDK并加载对应的小程序版别(由运营人员供给)—-》SDK内部检测环境是否安全及正规并创立沙箱和SDK内部代码履行的渠道—–》经过SDK内部上传数据运营人员收集到APM进行优化小程序

创立小程序

借助 FinClip SaaS 平台从零到一开发小程序
点击右上角的修改按钮即可完善小程序的概况内容

借助 FinClip SaaS 平台从零到一开发小程序

借助 FinClip SaaS 平台从零到一开发小程序

上传代码包

有两种方法:

  • 一种是经过IDE上传编译后的代码包
  • 一种是未经编译的代码包

借助 FinClip SaaS 平台从零到一开发小程序

未经编译的代码包需在上传时云端编译

我这儿上传一份过错的zip包,能够看到会显现下图:

  • 1.0.0挑选的上传类型是未经编译的代码包,其会在云端编译并显现编译结果
  • 1.0.1挑选的上传类型是已经经过的编译代码包,无需编译并可直接下载代码包

借助 FinClip SaaS 平台从零到一开发小程序

凭借IDE上传经过编译后的代码包

FIDE 运用阐明文档 FIDE 下载链接 可在IDE中完成小程序的 API 和页面的开发调试、代码检查和修改、小程序预览和发布等功用。

IDE绑定小程序的appid

需求登录IDE(运用登录网页版的手机号即可主动相关该账号下的小程序appid),App ID下拉框会主动显现该账号下创立的小程序appid,点击完成即可。

借助 FinClip SaaS 平台从零到一开发小程序

挑选对应移动端渠道的模拟器会从头编译整个项目:

借助 FinClip SaaS 平台从零到一开发小程序
编译完成后能够看到如下内容:

  • 视图框架
  • 日志打印(支撑等级)
  • 网络状况
  • 切换模拟器后的编译日志

借助 FinClip SaaS 平台从零到一开发小程序

IDE上传代码包

借助 FinClip SaaS 平台从零到一开发小程序
点击确认后会看到下图:

借助 FinClip SaaS 平台从零到一开发小程序

这个便是利用IDE上传代码包的进程,改写网页再次检查版别记载能够看到新版别的提交记载:

借助 FinClip SaaS 平台从零到一开发小程序

审阅提交的代码版别

概况往下翻能够看到审阅Tab,点击新增审阅,挑选审阅版别

借助 FinClip SaaS 平台从零到一开发小程序

填写审阅的概况内容

借助 FinClip SaaS 平台从零到一开发小程序

借助 FinClip SaaS 平台从零到一开发小程序

点击提交,即可看到审阅的历史记载:

借助 FinClip SaaS 平台从零到一开发小程序

体会版别无需审阅

还有一种能够快速检查作用的方法无需等候审阅经过即可体会:

借助 FinClip SaaS 平台从零到一开发小程序
利用凡泰助手或者App扫码即可运转该版别的小程序进行测试:

借助 FinClip SaaS 平台从零到一开发小程序

也能够在小程序上架审阅栏中经过浏览器来预览/挑选同意经过该版别发布

借助 FinClip SaaS 平台从零到一开发小程序

创立服务器端运用

运用办理一栏中,点击新增协作运用并保存

注意,一个账号仅可免费相关十个运用,慎重运用

借助 FinClip SaaS 平台从零到一开发小程序

相关运用

增加运用相关的Bundle ID,以获取SDK的KEY和对应密钥。

Android渠道为清单文件中的package属性,ios渠道需登录开发者渠道去获取BundleId

借助 FinClip SaaS 平台从零到一开发小程序

借助 FinClip SaaS 平台从零到一开发小程序

借助 FinClip SaaS 平台从零到一开发小程序
相关成功后会有如下提示:
借助 FinClip SaaS 平台从零到一开发小程序

宿主运用必须写入对应SDK KEY与SDK SECRET,方可访问该小程序,有如下内容需求注意:

  • 运用必须集成 FinClip 小程序运转时SDK,并装备对应的SDK key和secret
  • 需求将上架的小程序与协作运用相关,才干打开对应的小程序;
  • 小程序敞开渠道将校验SDK KEY与运用Bundle ID及小程序的相相关系,假如未相关将无法获取对应小程序;

相关小程序

点击相关小程序

借助 FinClip SaaS 平台从零到一开发小程序
点击新增相关

借助 FinClip SaaS 平台从零到一开发小程序

这儿咱们挑选上面审阅经过的小程序版别

借助 FinClip SaaS 平台从零到一开发小程序
相关成功有如下提示:

借助 FinClip SaaS 平台从零到一开发小程序

创立运用

上面在相关运用时已经相关了一个运用,咱们用这个运用来开发:

集成SDK

项目根目录build.gradle中增加如下代码:

maven {
    url "https://gradle.finogeeks.club/repository/applet/"
    credentials {
        username "applet"
        password "123321"
    }
}
//kotlin插件
classpath "org.sonarsource.scanner.gradle:sonarqube-gradle-plugin:3.1"

借助 FinClip SaaS 平台从零到一开发小程序

SDK集成页面汇总最新版SDK为2.36.7,这儿运用最新版别的sdk:

借助 FinClip SaaS 平台从零到一开发小程序

implementation 'com.finogeeks.lib:finapplet:2.36.7' //具体的版别号

借助 FinClip SaaS 平台从零到一开发小程序

SDK中的动态库是被加固过的,被加固过的动态库在编译打包时不能被紧缩,不然加载的时候会报错。

因此在android闭包下面还需参加这项装备:

packagingOptions {
    // libsdkcore.so、libyuvutil.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/libyuvutil.so"
    doNotStrip "*/x86_64/libyuvutil.so"
    doNotStrip "*/armeabi/libyuvutil.so"
    doNotStrip "*/armeabi-v7a/libyuvutil.so"
    doNotStrip "*/arm64-v8a/libyuvutil.so"
}

借助 FinClip SaaS 平台从零到一开发小程序

装备混杂规则:
-keep class com.finogeeks.** {*;}

借助 FinClip SaaS 平台从零到一开发小程序

初始化sdk

在Application中进行初始化(记得装备清单文件):

package com.example.finclipdemo
import android.app.Application
import android.util.Log
import com.finogeeks.lib.applet.client.FinAppClient
import com.finogeeks.lib.applet.client.FinAppConfig
import com.finogeeks.lib.applet.interfaces.FinCallback
class FinClipApp : Application() {
    override fun onCreate() {
        super.onCreate()
        if (FinAppClient.isFinAppProcess(this)) {
            //小程序进程,不需求进行SDK初始化作业
            return
        }
        val config: FinAppConfig = FinAppConfig.Builder()
            .setAppKey("M8j6KLAGGce/g0XJB8hlqdCjvGiQNVy6ijJ2n9FVbD4=")
            .setAppSecret("306cf806a6ba433a")
            .setApiUrl("https://api.finclip.com")
            .setApiPrefix("/api/v1/mop/")
            .setGlideWithJWT(false)
            .build()
        val callback: FinCallback<Any?> = object : FinCallback<Any?> {
            override fun onSuccess(p0: Any?) {
                // SDK初始化成功
                Log.i("TAG", "onSuccess: SDK初始化成功")
            }
            override fun onError(p0: Int, p1: String?) {
                // SDK初始化失利
                Log.i("TAG", "onError: SDK初始化失利")
            }
            override fun onProgress(p0: Int, p1: String?) {
                //SDK正在初始化
                Log.i("TAG", "onProgress: SDK正在初始化....")
            }
        }
        //初始化SDK
        FinAppClient.init(this, config, callback)
    }
}

借助 FinClip SaaS 平台从零到一开发小程序

SDK 选用多进程机制完成,每个小程序运转在独立的进程中,即一个小程序对应一个进程。因此代码中需求将不需求在小程序中进行的操作进行省略(内部经过是否为宿主进程完成)

运用小程序

借助 FinClip SaaS 平台从零到一开发小程序

//startApplet第二个参数为小程序的APP ID
         //发动小程序方法一:
        FinAppClient.appletApiManager.startApplet(this, "628a6376be244600011af03c")
        //发动小程序方法二:跳转到指定小程序页面内部指定途径
        val params: MutableMap<String, String> = HashMap()
        // path为小程序页面途径
        params["path"] = "/pages/index/index"
        // query为发动参数,内容为"key1=value1&key2=value2 ..."的方式
        params["query"] = "aaa="test"&bbb="123""
        FinAppClient.appletApiManager.startApplet(this, "628a6376be244600011af03c",params)

gif制作用的三方软件,jym有好用的软件能够引荐一下真实找不到了。 用的as自带的录屏,gif长达48s前面 黑屏部分是在AS在发动运用,后边一闪一闪的黑屏是操作中抖动特别严重(估量是在改写)。

视频中能够看到如下:

  • 发动运用后会有个显着的跳转,这是跳转到小程序界面了,也能够看到小程序初始化的转圈进程 显着的跳转:
    借助 FinClip SaaS 平台从零到一开发小程序
    小程序初始化界面:
    借助 FinClip SaaS 平台从零到一开发小程序
  • 进入后便是小程序的界面了:
    借助 FinClip SaaS 平台从零到一开发小程序
    点击右上角能够看到:

借助 FinClip SaaS 平台从零到一开发小程序
以及版别号,版别阐明:

借助 FinClip SaaS 平台从零到一开发小程序
点击右上角封闭后会回到原生Activity界面:

借助 FinClip SaaS 平台从零到一开发小程序

  • 封闭小程序右上角的X: 能够看到确实小程序是以独自进程运转的,所以就验证了咱们之前所说的初始化SDK时要检测是否为宿主进程才去初始化
    借助 FinClip SaaS 平台从零到一开发小程序
    封闭后后续APP内还能够跳转到小程序页面
  • 小程序独自运转(凭借SDK沙箱) 即使宿主进程挂掉小程序也仍然能够运转
    借助 FinClip SaaS 平台从零到一开发小程序

运用FIDE的默认小程序页面,APP内部运转时支撑图片,视频播映等功用:

借助 FinClip SaaS 平台从零到一开发小程序
借助 FinClip SaaS 平台从零到一开发小程序

借助 FinClip SaaS 平台从零到一开发小程序
借助 FinClip SaaS 平台从零到一开发小程序

更多体会内容请自行探究~~~

反应

反应几个问题:

  • 能够看到gif中首次初始化会很卡,点击后页面快速闪
  • 脱离宿主仍然能够运转,用户在不知情的情况下还需求手动杀掉小程序的独自进程
  • 跳转到小程序页面有时需求等候2-3s