前面推荐的《一个木函》好评很多啊,一键就能将网站转化为APP,但也有小伙伴称:
太简陋了!
这样转化的APP没什么功能!
体验太差了
……
这些差评都在舞剑的意料之中。
又想功能强大,又想操作简单,哪有那么好的……
呃,还真有!
还记得上一篇文章《 不会编程,怎么制作APP? 》最后,舞剑说过要推荐一款更加强大的 网页转APP 神器,功能强大不说,只需要懂一点 HTML 前端知识就行了。
本次就围绕这款神器来说道说道。
Fusion App
﹀
﹀
﹀
FusionApp(简称:FA)是一款新概念”网页转应用”的应用。它可以将网页翻新改造,获得优异至近乎的客户端的体验。
它会让你爱上调♂教网页的感觉。
转换思路
它提倡将网页中的组件元素删除,并使用安卓原生组件替代,以此获得良好的交互体验并让整个网页焕然一新,就像真的客户端一样。
相比于一个木函中的”网页转应用”,此物可谓是比之强千百倍。
FusionApp提出UI模板制,您可对照需要转应用的网页,选取合适的UI模板,进行定制。
提供一条龙服务
为了方便起见与降低门槛,FusionApp支持了如下辅助功能:
1.图标仓库
内含一千多矢量的质感图标与扁平图标,它可解决您在配置应用UI时需要用到图标的需求。
2.图标设计器
它可为你设计美观大方的应用图标,且也可方便的从图标仓库中选取素材。
3.包名查错与包名生成
4.应用配色参考
↓
功能那是大大的厉害,这里来试着用它制作一款APP。
1. 网页。鉴于 手机编程(网址:http://www.bcdroid.com ) 目前在备案中, 这里使用优书网的来制作,网址:https://www.yousuu.com/
2. Fusion App。这个不用多说了吧,下载地址在文章末尾。
打开 Fusion App,滑动侧边栏,可以看到主要分为三大板块,第一个是帮助教程,第二个是图标制作,第三个是应用设置。
回到 App 主页,点击 + 号,创建项目
选择模板,一共有五个,分别是顶栏、标签栏、底栏、纯底栏、空白模板。
舞剑这里直接选择标签栏模板,内部包含了顶栏+侧边栏+标签栏+悬浮按钮,够用了。
选择模板后,填入应用名称和应用包名,这一点与 一个木函 相同。
工程编辑有三大组件:配置、组件、属性。
不论什么 APP 打开后首先肯定是进入主页,找到自定义事件,选择程序启动事件,输入优书网网址。
接下来设置标签栏。
打开优书网,点击菜单项,可以看到有四个选项,分别是书库、书单、话题、发现。
浏览器分别打开这四个菜单,并复制它们的网址。
然后选择组件——标签栏项目,编辑项目,分别输入项目名称和项目地址。
注:点击右上角 + 号可以增加标签栏。
显摆一下☞
此时可以点击上方的 ▶️ 运行按钮,来看看与之前有什么区别。
区别很明显,标签栏变成了我们自行设置的菜单项。
设置菜单项目
选择顶栏——菜单项目,重命名并编写点击事件,这里为了只为展示效果,就设置为 登录与注册 。
设置顶栏——搜索功能
打开优书网,可以注意到优书网有一个 ? 图标,很显然,这是用来查找我们需要的 网络小说、作者以及书单。
查看网页源码,搜索页面网址为:https://www.yousuu.com/search/ ,这里简化流程,直接将该网址填入 Url 选项。
①启用搜索功能
②填写搜索 Url
③更改 搜索框提示语
设置侧滑栏
侧滑栏,指的是屏幕左侧向右→滑动,多出来的选项。
譬如:
Jvdroid 与 Pydroid
Fusion APP 默认没有启用侧滑栏。
舞剑这里启用侧滑栏,同时启用并设置侧滑栏顶部图片。
这里,我懒得 ps 了,直接截图优书网的图标,然后上传并设置为图片。
最后,也是最重要的,设置侧滑栏——项目列表
①填写项目名称
②设置项目图标。图标可以使用图标仓库中自带的图标。
③设置点击事件。
舞剑设置了两个项目,分别是联系qq 和 加qq群
这两个项目事件 Fusion App 集成了功能,一键调用插入即可,很简单。
最后,设置悬浮按钮
步骤与前面侧滑栏几乎一致,同样是启用悬浮按钮——设定图标——设置点击事件。
舞剑这里利用图标仓库选择?,然后一键插入了刷新事件。
可以看到,APP页面多出了一个刷新按钮?,只需要点击就能刷新页面。
第三页是属性,可以调整APP配色,顶栏、标签栏、侧滑栏……等配色都在这里调整。
这一页,每个人的审美都不一样,舞剑就不多嘴了。
最后,来看看我们设计的APP究竟是怎样的?
点击右上角菜单栏,选择打包安装,会自动打包生成一个 APK, 安装后打开。
后记
﹀
﹀
﹀
这是一个很简陋的应用,只不过用来介绍一下 Fusion App 的大致用法,更深入的教程,舞剑以后会持续更新的,等不及的小伙伴们也可以自行摸索。
下载地址
﹀
﹀
﹀
①关注微信公众号:手机编程
②后台回复:0013,或者直接回复:fusionapp
③自动获取下载链接。