【Fusion APP】手机端制作APP,功能逆天,当之无愧的神器!

前面推荐的《一个木函》好评很多啊,一键就能将网站转化为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

③自动获取下载链接。

© 版权声明
THE END
喜欢就支持以下吧
点赞0
分享
评论 抢沙发