小程序转App最便捷的方法,附实操

news2024/11/25 14:31:33

Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的原生用户界面。 Flutter可以与现有的代码一起工作。在全世界,Flutter正在被越来越多的开发者和组织使用,并且Flutter是完全免费、开源的。

它也是构建未来的Google Fuchsia应用的主要方式。

Flutter的框架结构及特性

Flutter的主要结构包括:

· Flutter engine
· Foundation library
· Design-specific widgets

框架特性

快速开发。Flutter的热重载帮助你快捷方便的试验、重构UI、添加特性和修复bug。在仿真器、模拟器和ios、android硬件上体验亚秒级的重载,而不会丢失状态。

绚丽UI。通过Flutter内建的漂亮的质感设计和Cupertino(ios-flavor)小工具、丰富的动画API,平滑的自然滚动和平台感知,让用户感到满意。

Flutter优点

Flutter的优点非常明显,如果你选择一个跨平台框架,与众多基于html的跨平台框架相比,Flutter绝对是体验最好,性能与构建思路几乎最接近原生开发的框架。

1、路由设计突出。Flutter的路由传值非常方便,push一个路由,会返回一个Future对象(也就是Promise对象),使用await或者.then就可以在目标路由pop,回到当前页面时收到返回值。

2、性能强大且流畅。Flutter基于dom树渲染原生组件,很难与直接在原生视图上绘图比肩性能,Google作为一个轮子大厂,直接在两个平台上重写了各自的UIKit,对接到平台底层,减少UI层的多层转换,UI性能可以比肩原生,这个优势在滑动和播放动画时尤为明显。

3、可选静态的语言(Dart)。Dart是一个静态语言,这也是相对于js的一个优势。Dart可以被编译成js,但是看起来更像java。静态语言可以避免错误,获得更多的编辑器提示词,极大的增加可维护性。很多js库也已经用ts重写了,Vue3.0的底层也将全部使用ts编写,静态语言的优势不言而喻。

4、优秀的动画设计。Flutter的动画非常简单,动画对象会根据屏幕刷新率每秒产生很多个(一般是60个)浮点数,只需要将一个组件属性通过部件(Tween)关联到动画对象上,Flutter会确保在每一帧渲染正确的组件,从而形成连贯的动画。
这种十分暴力的操作在Flutter上却看不到明显的卡顿,这也是Flutter的一个魔力所在。

Flutter缺点

1. UI细节离原生有一些差距

2. 开发体验不太好,跨端调试工具不完善,调试时间会更长

3. 安装包体积会比较大,开发人员需要做 Flutter 的产物瘦身与包体积瘦身

而且Flutter有个致命的缺点:不得不熟悉源生代码。

Flutter主要的坑就在于需要非常了解原生的环境。Flutter主要的优势在于动画流畅,很多开发者反应比原生安卓还流畅(存疑)

这就意味着Flutter是UI跨平台,最后还是在原生平台运行。

flutter+小程序组合新思路

Flutter具有与原生代码互相调用的能力固然合理。

但是前端框架和源生语法都要熟悉,那么学习Flutter看起来就会是一个很矛盾的点。

那么既然框架内无法调和,能不能试试组装式的技术思路呢?

找了下资料,相比于「H5+App」的 Hybird 方案,「小程序 + App」的技术方案优势还是明显的

· 包尺寸有效减少,节省流量和存储
· 服务不再受发版所限制,支持热更新
· 能获取更多系统权限,完成更加丰富的产品设计;
· 可以避免 DOM 泄露(不使用常用的 window 对象与 document 对象);
· 远超过 H5 的体验(支持本地缓存,Webview,有丰富的组件与支持库);
· 具备跨平台的能力,一套代码可以在 iOS 与 Android 两个平台中运行;

小程序的Flutter在各大技术平台都有很多干货,这里就不赘述了。

下面主要讲讲我发现的,用FinClip将小程序转App的实操。

小程序转App的整体示意图,还是挺清晰的:


按照他们的开发者文档和视频教程一步步的操作。

操作步骤


1)将已有的微信小程序,转换成FinClip小程序。

敲黑板:如果小程序是用Flutter等主流前端框架写的,官方建议最好是用FIDE编译一下,看看会不会有什么报错之类的。


另外,如果你的登录是用微信授权登录的,建议先操作第2)关联微信授权登录

这样你就不需要禁用微信登录这个功能就可以运行了。


这里的步骤包括:创建小程序基本信息 >> 上传小程序代码包(我的是微信语法写的小程序,就没有用FIDE预览了),操作了这两个步骤以后,没啥报错的情况下,FinClip小程序代码包就已经生产完毕了。

2)关联小程序微信登录授权

FinClip有个很好用的功能,就是可以复用微信登录授权

换句话说,在自有App或者用他们家的小程序转App功能,都可以通过这个功能,事先调通App中的微信登录,减少了许多基础开发及调试工作。
第一步:登录 FinClip 管理后台

第二步:在“小程序管理中”找到:我的小程序>>小程序详情>>第三方管理。

第三步:将由 FinClip 设计的小程序授权页面增加至已有的小程序代码包之中并提交审核,授权页官方已经直接放到了GitHub,可直接自取:https://github.com/finogeeks/wechat-auth-page


第四步:紧接第二步,在管理后台页面点击新增登录关联,根据提示填写“微信小程序原始ID”、“微信小程序昵称与头像授权页路径”、“小程序手机号授权页路径”。

写在最后

作为当前最流行移动端操作系统android提供商google主推的flutter,厂商加成,技术路线又被证明过,被看好,是很理所应当的。

一般企业开发的时候可以需要有选择的、对部分页面进行flutter的渲染,部分功能运行在小程序上。

相信flutter+小程序组装式的技术思路早晚会成为更主流的前端框架。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/4539.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

计算机网络(一)网络体系结构

layout: post title: 计算机网络(一)网络体系结构 description: 计算机网络(一)网络体系结构 tag: 计算机网络 计算机网络计算机网络体系基本概念网络性能指标数据量与数据速率(比特率)带宽吞吐量时延时延带…

Python入门自学进阶-Web框架——25、DjangoAdmin项目应用-分页与过滤

对于数据很多,就需要将数据进行分页显示,同时还要提供过滤功能。 当配置文件中配置了过滤条件,那就要在显示表信息的时候,显示过滤条件选择项,选择后进行过滤,然后下面显示过滤后的数据,如果数…

数据结构(单链表)

前沿: 在前面总结的顺序表的时候,最后也说出了他的一些缺点,例如头插/中间插的时候的时间复杂度是O(n),这个效率并不高,而如何提高效率的实现呢,这里我们可以通过单链表来简单的提高这个效率。 思维导图&am…

java计算机毕业设计springboot+vue在线投票系统

项目介绍 随着科学技术的飞速发展,各行各业都在努力与现代先进技术接轨,通过科技手段提高自身的优势;对于在线投票系统当然也不能排除在外,随着网络技术的不断成熟,带动了在线投票系统的发展,它彻底改变了…

Java初识:类和对象(上)

文章目录学习目标1.面向对象的初步认识1.1认识面向对象1.2 区分面向对象和面向过程2.类当定义与使用2.1认识简单类2.2 类的定义格式2.3 小试身手-定义类的小练习3.类的实例化3.1 什么是实例化3.2 实例化注意事项:3.3 类和对象说明4. this 引用4.1为什么要用this4.2 …

小程序意见反馈界面(简洁版代码)

在开发个人中心页面时,意见反馈功能是必不可少的,下面介绍该功能的具体开发流程 1、首先看一下效果图: 2、WXML代码,分为三个部分,文本域(TextArea)、输入框(Input)、按钮&#xff…

程序员日常|为什么我在开发工作中偏爱这款键盘?

前言 最近一直不断地有粉丝朋友们私信我,问我该如何给自己挑选一款适合程序员工作的键盘,于是今天来给大家介绍下我用的键盘。 文章目录前言我的键盘亲身经历使用体验视频展示我的键盘 程序员作为一个需要长时间敲代码的职业,没有一个趁手的…

html静态网页设计制作 HTML我的家乡沧州网页代码 dw静态网页成品模板素材网页 web前端网页设计与制作 div静态网页设计

家乡旅游景点网页作业制作 网页代码运用了DIV盒子的使用方法,如盒子的嵌套、浮动、margin、border、background等属性的使用,外部大盒子设定居中,内部左中右布局,下方横向浮动排列,大学学习的前端知识点和布局方式都有…

uint 与 int 相加,事与愿违?

#include <iostream> using namespace std; int main() { uint32_t uint_data -22; int int_data 0; if (uint_data int_data < 0) { cout <<"uint int负数小于0: "; } else { cout <<"…

ARM编程环境搭建教程

随着移动互联网的繁荣发展&#xff0c;物联网人工智能的兴起&#xff0c;嵌入式开发成为了越来越多IT人必须学习的内容&#xff0c;而在嵌入式芯片领域&#xff0c;ARM具有无可撼动的市场占有率&#xff0c;所以说&#xff0c;学习嵌入式不学ARM&#xff0c;不如回家卖红薯。 接…

C++ Reference: Standard C++ Library reference: C Library: cwctype: iswblank

C官网参考链接&#xff1a;https://cplusplus.com/reference/cwctype/iswblank/ 函数 <cwctype> iswblank int iswblank (wint_t c); 检查宽字符是否为空白 检查c是否为空字符。 空白字符是用于分隔一行文本中的单词的空格&#xff08;space character&#xff09;字符…

用色彩活出彩,能率Color Run上海之旅圆满结束

11月8日&#xff0c;以“用色彩&#xff0c;活出彩”为主题的能率|苏宁 Color Run活动&#xff0c;于上海圆满结束。此次活动由燃热领域代表品牌能率与苏宁易购集团联合举办&#xff0c;旨在通过有效户外运动&#xff0c;提倡健康快乐的生活方式&#xff0c;悦享多彩人生。 能率…

摄影网页设计制作 简单静态HTML网页作品 WEB静态摄影网站作业成品 学生DW摄影网站模板

&#x1f389;精彩专栏推荐&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb; ✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 &#x1f482; 作者主页: 【主页——&#x1f680;获取更多优质源码】 &#x1f393; web前端期末大作业…

C++语言基础篇

✅作者简介&#xff1a;CSDN内容合伙人&#xff0c;全栈领域新星创作者&#xff0c;阿里云专家博主&#xff0c;华为云云享专家博主&#xff0c;掘金后端评审团成员 &#x1f495;前言&#xff1a; 学长出的这一系列专栏适合有⼀点 C 基础&#xff0c…

PPT的“限制编辑”模式如何设置?

我们知道&#xff0c;Word文档和Excel表格都可以设置限制编辑&#xff0c;防止文件被随意改动&#xff0c;可是PPT文件里并没有“限制编辑”的选项&#xff0c;那要怎么设置呢&#xff1f; 其实&#xff0c;PPT的“只读模式”就等同于“限制编辑”模式&#xff0c;因为PPT文件…

【网页设计】期末大作业:化妆品主题——绿色大气的html5响应式化妆品护肤品肌肤网页设计(11页)

&#x1f389;精彩专栏推荐 &#x1f4ad;文末获取联系 ✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 &#x1f482; 作者主页: 【主页——&#x1f680;获取更多优质源码】 &#x1f393; web前端期末大作业&#xff1a; 【&#x1f4da;毕设项目精品实战案例 (10…

Python解决图文验证码登录识别(1)

前言 本文是该专栏的第22篇,后面会持续分享python的干货知识,记得关注。 在信息爆炸的年代,爬虫对于在工作中进行信息的抽取,获取重要的数据源是一项非常不错的技能,可以说很久之前的爬虫几乎没什么难度,直到互联网的持续发展,陆陆续续出现了一大堆的反爬措施,给爬虫也…

【css 动画】css实现奔跑的北极熊

&#x1f4cb; 个人简介 &#x1f496; 作者简介&#xff1a;大家好&#xff0c;我是阿牛&#xff0c;全栈领域优质创作者&#x1f61c;&#x1f4dd; 个人主页&#xff1a;馆主阿牛&#x1f525;&#x1f389; 支持我&#xff1a;点赞&#x1f44d;收藏⭐️留言&#x1f4dd;…

Verilog功能模块——Uart收发

摘要本文分享了一种通用的Uart收发模块&#xff0c;可实现Uart协议所支持的任意波特率&#xff0c;任意位宽数据&#xff08;5~8&#xff09;&#xff0c;任意校验位&#xff08;无校验、奇校验、偶校验、1校验、0校验&#xff09;&#xff0c;任意停止位&#xff08;1、1.5、2…

《机器学习实战》7.AdaBoost元算法提高分类性能

目录 1 基于数据集多重抽样的分类器 1.1 bagging&#xff1a;基于数据随机重抽样的分类器构建方法 1.2 boosting 2 训练算法&#xff1a;基于错误提升分类器的性能 3 基于单层决策树后见弱分类器 4 完整AdaBoost算法的实现 5 测试算法&#xff1a;基于AdaBoost的分类 6…