当前位置: 首页 > news >正文

如何在App里拉起小程序?

什么是小程序运行时框架?

FinClip 的小程序编程模型是分为多个页面,每个页面有自己的 template、CSS 和 JS,实际在运行的时候,业务逻辑的 JS 代码是运行在独立的 JavaScript 引擎中,每个页面的 template 和 CSS 是运行在各自独立的 WebView 里面,页面之间是通过函数 NavigateTo 进行页面的切换。

每个 WebView 里面的页面和公共的 JavaScript 引擎里面的逻辑的交互方式是通过消息服务,页面的一些事件都会通过这个消息通道传给 JavaScript 引擎运行环境,这个运行环境会响应这个事件,做一些 API 调用,可调到客户端凡泰小程序提供的一些能力,处理之后会把这个数据再重新发送给对应的页面渲染容器来处理,把数据和模板结合在一起来,在产生最终的用户界面。如下图:

如何在App里拉起小程序?

以下操作均是使用FinClip 小程序容器去实现的。

iOS端操作如下:

第一步:获取 SDK KEY 及 SDK SECRET 使用FinClip SDK需要申请 SDK KEY 及 SDK SECRET ,只有在SDK初始化的时候配置了正确的 SDK KEY 及 SDK SECRET ,才能初始化成功并正常使用。

1.1 创建应用

需要登录FinClip管理后台「应用管理-新增合作应用」,完成应用创建;

1.2 获取 SDK KEY 及 SDK SECRET

创建应用并添加 Bundle ID后,选择对应 Bundle ID 后的「复制」,就可以导出对应的 SDK KEY 与 SDK SECRET了。

  • SDK KEY:是合作应用能使用小程序SDK的凭证,如果SDK Key校验失败,则SDK的所有Api都无法使用。

  • SDK SECERT:是访问服务的安全证书,不要给第三方。

第二步:集成 SDK

集成sdk需要来引入 FinApplet.framework 和FinAppletExt.framework。具体操作方法可以去详细查看官方的的文档。iOS如何引入一个SDK:https://design.finclip.com/technology_book/start-applet/02-应用开发入门/004.html

第三步:添加SDK头文件

在需要使用 FinClip 小程序 SDK 的地方,添加如下代码:

#import <FinApplet/FinApplet.h> 如果还集成了扩展 SDK,那么调用扩展 SDK 中的 api,还需要加上下面的代码:

 
 

#import <FinAppletExt/FinAppletExt.h> 当然,最方便的方式是在 pch 文件中添加以上代码,这样在使用的地方就不用再引用了。

第四步:初始化 SDK

FATConfig *config = [FATConfig configWithAppSecret:@"SDK KEY" appKey:@"SDK SECRET"]; config.apiServer = @"https://www.finclip.com"; [[FATClient sharedClient] initWithConfig:config error:nil];

第五步:打开小程序

[[FATClient sharedClient] startRemoteApplet:@"app id" startParams:nil InParentViewController:self completion:^(BOOL result, NSError *error) { NSLog(@"result:%d---error:%@", result, error); }];

官方也有一些实例demo,可以到他们的小程序应用市场(小程序插件市场_小程序组件库-FinClip小程序应用市场)里去找代码包下载。 「Native+小程序」,作为混合开发的一种新模式,确实有非常多的优势。一方面,小程序天然具备跨平台能力,一套代码可以在 iOS 与 Android 两个平台中运行,其次小程序有远超过 H5 的体验(支持本地缓存,Webview,有丰富的组件与支持库),同时还支持热更新,也可以避免 DOM 泄露,业务功能用小程序的形式去改造也不会影响APP安装包体积。

相关文章:

如何在App里拉起小程序?

什么是小程序运行时框架&#xff1f; FinClip 的小程序编程模型是分为多个页面&#xff0c;每个页面有自己的 template、CSS 和 JS&#xff0c;实际在运行的时候&#xff0c;业务逻辑的 JS 代码是运行在独立的 JavaScript 引擎中&#xff0c;每个页面的 template 和 CSS 是运行…...

函数式编程-Stream流学习第二节-中间操作

1 Stream流概述 java8使用的是函数式编程模式,如同它的名字一样&#xff0c;它可以用来对集合或者数组进行链状流式操作&#xff0c;让我们更方便的对集合或者数组进行操作。 2 案例准备工作 我们首先创建2个类一个作家类&#xff0c;一个图书类 package com.stream.model;…...

SpringCloud 教程 | 第一篇: 服务的注册与发现(Eureka)

一、spring cloud简介 spring cloud 为开发人员提供了快速构建分布式系统的一些工具&#xff0c;包括配置管理、服务发现、断路器、路由、微代理、事件总线、全局锁、决策竞选、分布式会话等等。它运行环境简单&#xff0c;可以在开发人员的电脑上跑。另外说明spring cloud是基…...

无涯教程-进程 - 组会话控制

在本章中&#xff0c;我们将熟悉进程组&#xff0c;会话和作业控制。 进程组(Process Groups ) - 进程组是一个或多个进程的集合&#xff0c;一个进程组由一个或多个共享相同进程组标识符(PGID)的进程组成。 会话(Sessions) - 它是各种进程组的集合。…...

tomcat高可用和nginx高可用

tomcat高可用和nginx高可用 小白教程&#xff0c;一看就会&#xff0c;一做就成。 1.什么是高可用&#xff1f; 高可用HA&#xff08;High Availability&#xff09;是分布式系统架构设计中必须考虑的因素之一&#xff0c;它通常是指&#xff0c;通过设计减少系统不能提供服务…...

关于ios Universal Links apple-app-site-association文件 Not Found的问题

1. 背景说明 1.1 Universal Links 是什么 Support Universal Links 里面有说到 Universal Links 是什么、注意点、以及如何配置的。简单来说就是 当您支持通用链接时&#xff0c;iOS 用户可以点击指向您网站的链接&#xff0c;并无缝重定向到您安装的应用程序 大白话就是说&am…...

Objectarx MFC 添加ListControl并控制显隐

最主要的是实现一个Button点击将下方的List显示出来&#xff0c;制作成抽屉式菜单工具。 这篇文章是想实现点击工具栏并控制List的显隐。 参照&#xff1a; MFC中实现一个控件的隐藏和显示 【MFC】判断控件是否为隐藏状态 MFC中查找构件使用ID进行控制&#xff0c;这个和WPF&a…...

2023年高教社杯数学建模思路 - 复盘:人力资源安排的最优化模型

文章目录 0 赛题思路1 描述2 问题概括3 建模过程3.1 边界说明3.2 符号约定3.3 分析3.4 模型建立3.5 模型求解 4 模型评价与推广5 实现代码 建模资料 0 赛题思路 &#xff08;赛题出来以后第一时间在CSDN分享&#xff09; https://blog.csdn.net/dc_sinor?typeblog 1 描述 …...

SpringMVC 第二天

第 1 章 ModelAttribute 和 SessionAttribute[ 应 用 ] 1.1ModelAttribute 1.1.1 使用说明 作用&#xff1a; 该注解是 SpringMVC4.3 版本以后新加入的。它可以用于修饰方法和参数。 出现在方法上&#xff0c;表示当前方法会在控制器的方法执行之前&#xff0c;先执行…...

抖音seo短视频矩阵系统源码开发源代码分享--开源-可二开

适用于抖音短视频seo矩阵系统&#xff0c;抖音矩阵系统源码&#xff0c;短视频seo矩阵系统源码&#xff0c;短视频矩阵源码开发&#xff0c;支持二次开发&#xff0c;开源定制&#xff0c;招商加盟SaaS研发等。 功能开发设计 1. AI视频批量剪辑&#xff08;文字转语音&#x…...

No message found under code ‘-1‘ for locale ‘zh_CN‘.

导出中的报错&#xff1a;No message found under code -1 for locale zh_CN. 报错原因&#xff1a;页面中展示的数据和后端excel中的数据不一致导致 具体原因&#xff1a;...

QtWidgets和QtQuick融合(QML与C++融合)

先放一个界面效果吧&#xff01; 说明&#xff1a;该演示程序为一个App管理程序&#xff0c;可以将多个App进行吸入管理。 &#xff08;动画中的RedRect为一个带有QSplashScreen的独立应用程序&#xff09; 左侧边栏用的是QQuickView进行.qml文件的加载&#xff08;即QtQuick…...

基于Vue的3D饼图

先看效果&#xff1a; 再看代码&#xff1a; <template><div class"container"><div style"height: 100%;width: 100%;" id"bingtu3D"></div></div></template> <script> import "echarts-liqu…...

Gateway简述

前言 ​ 在微服务架构中&#xff0c;一个系统会被拆分为很多个微服务。那么作为客户端调用多个微服务接口的地址。另外微服务架构的请求中&#xff0c;90%的都携带认证信息/用户登录信息&#xff0c;都需要做相关的限制管理&#xff0c;API网关由此应允而生。 这样的架构会存…...

Midjourney API 的对接和使用

“ 阅读本文大概需要 4 分钟。 ” 在人工智能绘图领域&#xff0c;想必大家听说过 Midjourney 的大名吧。 Midjourney 以其出色的绘图能力在业界独树一帜。无需过多复杂的操作&#xff0c;只要简单输入绘图指令&#xff0c;这个神奇的工具就能在瞬间为我们呈现出对应的图像。无…...

01 消息引擎系统

本文是Kafka 核心技术与实战学习笔记 kafka的作用 kafka最经常被提到的作用是是削峰填谷&#xff0c;即解决上下游TPS的错配以及瞬时峰值流量&#xff0c;如果没有消息引擎系统的保护&#xff0c;下游系统的崩溃可能会导致全链路的崩溃。还有一个好处是发送方和接收方的松耦合…...

npm 卸载 vuecli后还是存在

运行了npm uninstall vue-cli -g&#xff0c;之后是up to date in&#xff0c;然后vue -V&#xff0c;版本号一直都在&#xff0c;说明没有卸载掉 1、执行全局卸载命令 npm uninstall vue-cli -g 2、删除vue原始文件 查看文件位置&#xff0c;找到文件删掉 where vue 3、再…...

Unity 之利用 localEulerAngle与EulerAngle 控制物体旋转

文章目录 概念讲解localEulerAngle与EulerAngle的区别 概念讲解 欧拉角&#xff08;Euler Angles&#xff09;是一种常用于描述物体在三维空间中旋转的方法。它使用三个角度来表示旋转&#xff0c;分别绕物体的三个坐标轴&#xff08;通常是X、Y和Z轴&#xff09;进行旋转。这…...

从零学算法 (剑指 Offer 13)

地上有一个m行n列的方格&#xff0c;从坐标 [0,0] 到坐标 [m-1,n-1] 。一个机器人从坐标 [0, 0] 的格子开始移动&#xff0c;它每次可以向左、右、上、下移动一格&#xff08;不能移动到方格外&#xff09;&#xff0c;也不能进入行坐标和列坐标的数位之和大于k的格子。例如&am…...

854之数据结构

一.线性表 1.顺序表 #include <iostream> #include<stdlib.h> using namespace std; #define max 100 typedef struct {int element[max];int last; } List; typedef int position ; void Insert(int x, position p, List &L) {position q;if (L.last > ma…...

Redis从基础到进阶篇(二)----内存模型与内存优化

目录 一、缓存通识 1.1 ⽆处不在的缓存 1.2 多级缓存 &#xff08;重点&#xff09; 二、Redis简介 2.1 什么是Redis 2.2 Redis的应用场景 三、Redis数据存储的细节 3.1 Redis数据类型 3.2 内存结构 3.3 内存分配器 3.4 redisObject 3.4.1 type 3.4.2 encoding 3…...

DBO优化SVM的电力负荷预测,附MATLAB代码

今天为大家带来一期基于DBO-SVM的电力负荷预测。 原理详解 文章对支持向量机(SVM)的两个参数进行优化&#xff0c;分别是&#xff1a;惩罚系数c和 gamma。 其中&#xff0c;惩罚系数c表示对误差的宽容度。c越高&#xff0c;说明越不能容忍出现误差,容易过拟合。c越小&#xff0…...

第一百二十五回 dart中List和Map的常见用法

文章目录 概念介绍使用方法初始化相互转换元素操作 经验分享 我们在上一章回中介绍了Flexible组件相关的内容&#xff0c;本章回中将介绍 dart中的List和Map.闲话休提&#xff0c;让我们一起Talk Flutter吧。 概念介绍 我们在这里介绍的List也叫列表&#xff0c;它表示一组相…...

小白到运维工程师自学之路 第七十九集 (基于Jenkins自动打包并部署Tomcat环境)2

紧接上文 4、新建Maven项目 clean package -Dmaven.test.skiptrue 用于构建项目并跳过执行测试 拉到最后选择构建后操作 SSH server webExec command scp 192.168.77.18:/root/.jenkins/workspace/probe/psi-probe-web/target/probe.war /usr/local/tomcat/webapps/ /usr/loca…...

林【2021】

三、应用 1.字符串abaaabaabaa&#xff0c;用KMP改进算法求出next和nextval的值 2.三元组矩阵 4.二叉树变森林 四、代码&#xff08;单链表递增排序&#xff0c;二叉树查找x&#xff0c;快速排序&#xff09;...

c语言练习题30:判断一个数是否为2^n

判断一个数是否为2^n 思路&#xff1a;2^n中只有一个1故可以通过n&(n-1)是否为0来判断。 代码&#xff1a;...

VX小程序 实现区域转图片预览

图例 方法一 1、安装插件 wxml2canvas npm install --save wxml2canvas git地址参照&#xff1a;https://github.com/wg-front/wxml2canvas 2、类型 // 小程序页面 let data{list:[{type:wxml,class:.test_center .draw_canvas,limit:.test_center,x:0,y:0}] } 3、数据结…...

HTML5-1-标签及属性

文章目录 语法规范标签规范标签列表通用属性基本布局 页面的组成&#xff1a; HTML&#xff08;HyperText Markup Language&#xff0c;超文本标记语言&#xff09;是用来描述网页的一种语言&#xff0c;它不是一种编程语言&#xff0c;而是一种标记语言。 HTML5 是下一代 HTM…...

5017. 垦田计划

Powered by:NEFU AB-IN Link 文章目录 5017. 垦田计划题意思路代码 5017. 垦田计划 题意 略 思路 二分最小需要几天即可 注意&#xff1a; 天数不能低于k二分时&#xff0c;若耗时天数小于mid&#xff0c;直接continue 代码 /* * Author: NEFU AB-IN * Date: 2023-08-26 22:4…...

【校招VIP】产品思维分析之面试新的功能点设计

考点介绍&#xff1a; 这种题型是面试里出现频度最高&#xff0c;也是难度最大的一种&#xff0c;需要面试者对产品本身的功能、扩展性以及行业都有一定的了解。而且分析时间较短&#xff0c;需要一定的产品能力和回答技巧。 『产品思维分析之面试新的功能点设计』相关题目及解…...