事情的起因是这样的。

之前在微信、支付宝和抖音开放平台都上架了自己的小程序,虽然几个平台有自己的开发标准,但是都是基于 JavaScript 这种已经被广泛使用的编程语言进行开发的,对于开发者而言学习的门槛并不高,也很容易进行开发。

并且几个平台尽管代码不相通也不能直接使用,但是 GitHub 上面一搜还是有好几款代码包转换工具可以用,例如微信小程序使用 Antmove 就可以转成支付宝小程序开放平台支持的代码包,总之整个使用的门槛还是比较低的。

但是好死不死的微信开放平台时不时就要提醒违规,虽然明白在流量平台上运营就要遵守他们制定的游戏规则,但实话还是很影响自己的业务运行情况。

于是产生了一个念头:我把小程序直接搬到自己app同步运行如何,就算在微信端被封了,也能在支付宝、抖音平台使用,退一万步还能在自己的app跑。

好了到了技术线路调研和选型的环节。

有同学可能会说你这个可以用 uniapp 的框架实现,但是很不幸运的是我的小程序最早是用微信原生语法写的,并不是采用的 uni 的方案,所以这条路就没有再去考虑。

另外自己开发了小程序后并不想再通过h5的形式去实现一遍,所以就只考虑小程序运行的方案。

小程序容器技术

在 GitHub 和搜索引擎大概搜了一圈,确实有这类成熟的技术,市面上大家会称之为小程序容器技术例如FinClip,它的原理其实并不难理解,就是在宿主应用中通过集成 SDK 的形式让宿主应用 App 具备小程序的运行能力,之前微信、支付宝等平台是将这个技术仅用于内部,现在有企业将技术封装好进行市场化。

小程序 SDK 提供了一套可运行小程序业务代码的安全沙箱与宿主环境:

  • 安全沙箱负责保护小程序中的业务应用,在安全可信的环境中传输数据,避免第三方的干扰与窃听;
  • 宿主环境负责执行小程序 JS 业务逻辑代码,并使用 WebView 渲染展示小程序页面

小程序运行 SDK 集成

由于我自己的 App 是用的 Flutter ,所以也特别看了下在这种框架下 FinClip SDK 做了支持,一般来讲 Flutter 版本高于 2.2.3 就可以进行集成,整个过程分2步也并不难这里也就不多说了,另外各个厂商也有自己的文档介绍,跟着来做就好。

首先在集成 SDK 前需要先在平台去创建应用并绑定小程序,这样能获得每个应用专属的 SDK KEY 及 SDK SECRET 后,随后方便在集成 SDK 时填写对应的参数。

打开小程序时 SDK 会自动初始化,并校验 SDK KEY ,SDK SECRET 与 BundleID(Application ID) 是否正确。

其后在项目 pubspec.yaml 文件中添加依赖及示例小程序 Demo 的测试。

小程序代码包上传及编译

其后在开发工具上传自己的小程序代码包就好了,这里我以集成的 FinClip SDK 为例,从实际的测试效果来看是可以直接编译现有的微信小程序代码包,说明是能够直接兼容的。官方在工具的顶部也有明确标注支持微信、字节和支付宝小程序,个人认为这个功能点还是非常有用的,至少不用几个平台瞎折腾相互去转换。

支付宝小程序代码包直接用开发工具打开的一个测试的效果,整体的支持度还是挺不错的。

再来看看抖音小程序代码包放到开发工具中的效果。

从支付宝和抖音小程序的实际测试来看都还不错,说明产品的成熟度还是做的很不错。

下面是小程序在 App 中实际运行的效果,和在微信端打开没有太大的效果差异,感觉还是可以的。

打个小结

把小程序放到 App 中运行是在特殊场景下的需求。

首先例如小程序的运行在微信、支付宝等开放平台遇到较为明显的影响可以切换到自己的 App 中去运营。

其次对微信、支付宝等平台有小程序的运营需求,同时自己的 App 中也需要运行小程序同样的业务,这个时候可以通过同一套小程序代码多端运行,无需再去重复的开发。

兼容微信支付宝抖音小程序的工具推荐!还能将小程序搬到自己的app里面的更多相关文章

  1. 我的大学Android开发学习之路——从开始到微信/支付宝/抖音Offer

    前言 笔者2016年高考考入华中科技大学计算机科学与技术专业. 2017年底(大二寒假)拿到今日头条(字节跳动)深圳研发中心Android开发实习生Offer,在深圳研发中心实习至2018年3月. 2 ...

  2. 抖音视频背景音乐提取工具v1.0

    使用方法:id就是你点那个音乐分享,复制链接,然后链接有个ID(userid=后面数字就是id),就是那个,输入ID之后得到链接,浏览器新建下载,复制你得到的链接就行了(结果空白多解析几次就行了)

  3. Python爬虫-抖音小视频-mitmproxy与Appium

    目的:  爬取抖音小视频 工具:  mitmproxy.Appium 思路: 1.  通过 mitmproxy 截取请求, 找出 response 为 video 的请求. 2.  通过 mitmdu ...

  4. 微信小程序开发(一)开发工具推荐VSCode

    虽然微信小程序官方开发工具非常优秀,但用的时间久了,会发现一些问题,比如代码编辑区小,自定义能力差,不支持插件,有时还会出现莫名其妙的bug,最不能忍的是编辑器代码提示功能不健全,这对于新手来说,很不 ...

  5. android形状属性、锁屏密码、动态模糊、kotlin项目、抖音动画、记账app、视频播放器等源码

    Android精选源码 直观了解Android的"形状"属性如何影响Drawable的外观. 一个灵活的视频播放器, 可替换播放器内核. android锁屏输入密码功能源码 背景动 ...

  6. Python爬取抖音视频

    最近在研究Python爬虫,顺便爬了一下抖音上的视频,找到了哥们喜欢的小姐姐居多,咱们给他爬下来吧. 最终爬取结果 好了废话补多说了,上代码! #https://www.iesdouyin.com/a ...

  7. 快速实现抖音的分享&登录(android)

    快速实现抖音分享与第三方登录 准备工作 1.注册抖音的key到抖音开放平台,点击这里查看步骤: 2.集成ShareSDK到Mob官网文档页面查看即可,点击这里查看集成: 业务代码 分享要求: 视频: ...

  8. WinForm程序打包工具InnoSetup使用说明图文教程

    WinForm程序打包工具InnoSetup使用说明图文教程 WinForm程序开发测试好了,如果将Debug/Release里面的文件发给客户使用,会让客户觉得你不够专业,但是使用VS自带的打包工具 ...

  9. 抖音圈圈乐 系统搭建H5微信小游戏圈圈乐系统介绍

    网红线下游戏抖音圈圈乐改造而来 一.搭建此系统需要准备如下资料: 1. 认证微信服务号 2. 微信支付商户号 3. 备案域名及云服务器 二.系统功能简介: 1. 游戏闯关 2. 每个商品闯关难度后台自 ...

  10. Python实现抖音关键词热度搜索小程序(附源码)

    今天给大家带来一个抖音热词小程序,废话不多说,直接上代码 import requests import json import urllib.parse import time ''' python知 ...

随机推荐

  1. 当你运行npm run命令时,会发生什么?

    摘要:今天我们来聊一聊运行npm run命令之后会发生什么. 本文分享自华为云社区<运行npm run命令的时候会发生什么?>,作者:gentle_zhou . 先前发了一篇"运 ...

  2. 什么?语音合成开源代码不会跑,follow me!

    摘要:本文描述的深度神经网络模型结构:: Natural TTS synthesis by conditioning Wavenet on MEL spectogram predictions. 本文 ...

  3. Solon Aop 特色开发(2)注入或手动获取Bean

    Solon,更小.更快.更自由!本系列专门介绍Solon Aop方面的特色: <Solon Aop 特色开发(1)注入或手动获取配置> <Solon Aop 特色开发(2)注入或手动 ...

  4. PPT 年终总结PPT 应该怎么样改

  5. Typora 显示数学公式

    Markdown 数学公式: https://www.cnblogs.com/vipsoft/p/17141603.html $\sum$ ``` $\sum$``` 显示如下:不能正确显示数学公式 ...

  6. PPT 工作需求:如何利用PPT做活动海报&H5?

    PPT 工作需求:如何利用PPT做活动海报? 图片素材 + 字体 + 封面排版 PPT 工作需求:如何利用PPT制作H5? https://www.maka.im/muban http://www.p ...

  7. POJ 1015 Jury Compromise (完全背包)

    题目大意: 在遥远的国家佛罗布尼亚,嫌犯是否有罪,须由陪审团决定.陪审团是由法官从公众中挑选的.先随机挑选n 个人作为陪审团的候选人,然后再从这n 个人中选m 人组成陪审团.选m 人的办法是:控方和辩 ...

  8. 师爷,翻译翻译什么叫AOP

    张麻子:汤师爷,翻译翻译,什么叫AOP? 汤师爷:这还用翻译. 张麻子:我让你翻译给我听,什么叫AOP? 汤师爷:不用翻译,切面编程就是AOP啊. 黄四郎:难道你听不懂什么叫AOP? 张麻子:我就想让 ...

  9. idea创建父子项目

    1. 首先创建大的project 父工程:  2. 点击下一步之后: 3. 点击下一步,填写项目存放地址,点击finish: 4. 完成之后删除不需要的文件,保留pom文件,检查对应的jar和spri ...

  10. CompletableFuture 使用详解

    CompletableFuture 使用详解 1. runAsync 和 supplyAsync方法 CompletableFuture 提供了四个静态方法来创建一个异步操作. public stat ...