Fusion APP-简单网页转app制作教程

准备工作:

1:下载这款强大的app:Fusion App ←点击下载

2:准备好你喜欢的需要的网页链接。

 

步骤开始:

1:打开安装好的Fusion App,点击右下方加号

Fusion APP-简单网页转app制作教程  App制作 网页转APP 第1张

 

2:这边先选择简单的空白模板,其它模板后面会讲到。

Fusion APP-简单网页转app制作教程  App制作 网页转APP 第2张

 

 

3:填入app名称,自定义名称你喜欢都行,然后点击创建。

Fusion APP-简单网页转app制作教程  App制作 网页转APP 第3张

 

 

 

4:主界面如下,你可以设置软件图标,名称,软件版本等的东西。

Fusion APP-简单网页转app制作教程  App制作 网页转APP 第4张

 

 

5:启动网页就是你想要一开软件就打开的网页。这边我是填的麻木博客的官网网址:https://www.mamublog.cn    

Fusion APP-简单网页转app制作教程  App制作 网页转APP 第5张

 

 

6:设置后可以点右上角的三角形进行运行模拟测试。

Fusion APP-简单网页转app制作教程  App制作 网页转APP 第6张

 

7:打开了我设置的网页链接成功

Fusion APP-简单网页转app制作教程  App制作 网页转APP 第7张

 

 

8;到这里,如果你就一个喜欢的或者经常打开的网页,那

你就可以直接打包安装了

Fusion APP-简单网页转app制作教程  App制作 网页转APP 第8张

 

Fusion APP-简单网页转app制作教程  App制作 网页转APP 第9张

 

 

9:点击安装即可

 

Fusion APP-简单网页转app制作教程  App制作 网页转APP 第10张

 

 

添加多个网页:模板介绍

1;顶栏模板:除了显示网页,还支持左边侧边栏,可以自己加功能或者别的网页链接,和麻木博客官网的app类似

 

Fusion APP-简单网页转app制作教程  App制作 网页转APP 第11张

 

 

2:侧边栏功能按钮在组件的侧滑栏处自定义内容

Fusion APP-简单网页转app制作教程  App制作 网页转APP 第12张

 

3:点击需要设置的项目,编辑名称图标和点击事件。

Fusion APP-简单网页转app制作教程  App制作 网页转APP 第13张

 

 

4:这边我选择的是加载网页链接功能,自己在括号里输入网址即可。

Fusion APP-简单网页转app制作教程  App制作 网页转APP 第14张

Fusion APP-简单网页转app制作教程  App制作 网页转APP 第15张

Fusion APP-简单网页转app制作教程  App制作 网页转APP 第16张

 

5:填完了记得点击右上角保存下,否则你设置的事件就不能保存!

Fusion APP-简单网页转app制作教程  App制作 网页转APP 第17张

Fusion APP-简单网页转app制作教程  App制作 网页转APP 第18张

按我步骤自行添加几个后满意了就可以打包安装使用了

 

标签顶栏模板

2:-顶部有几个窗口项目以及tittle侧边栏标题栏,如果设置不同网页那么你点击一个项目就会跳转一个

网页,可以多个切换,不止四个,可以设置多个项目。

Fusion APP-简单网页转app制作教程  App制作 网页转APP 第19张

 

同样在组件中找到标签栏项目自己定义名称及事件,不多介绍.

Fusion APP-简单网页转app制作教程  App制作 网页转APP 第20张

 

 

Fusion APP-简单网页转app制作教程  App制作 网页转APP 第21张

 

底栏模板

和标签栏位置不同,功能相同以及tittle侧边栏标题栏

Fusion APP-简单网页转app制作教程  App制作 网页转APP 第22张

 

 

Fusion APP-简单网页转app制作教程  App制作 网页转APP 第23张

 

纯底栏

少了左上角的tittle侧边栏标题栏,其它没差别。

 

Fusion APP-简单网页转app制作教程  App制作 网页转APP 第24张

 

 

空白模板就不说了,刚开始就讲过了。

就先这样喽,希望能帮到你们哈哈,当然不懂得也可以问我。

 

以下是一个完整的使用自定义预加载器进行资源预加载的HTML页面示例代码: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>预加载示例</title> <script> var preloader = function (resources, callback) { var loaded = 0; var total = resources.length; var onload = function () { loaded++; if (loaded === total) { callback(); } }; for (var i = 0; i < total; i++) { var resource = resources[i]; var type = resource.split('.').pop(); var element; if (type === 'js') { element = document.createElement('script'); element.src = resource; } else if (type === 'css') { element = document.createElement('link'); element.rel = 'stylesheet'; element.href = resource; } else if (type === 'jpg' || type === 'png' || type === 'gif') { element = new Image(); element.src = resource; } element.onload = onload; document.head.appendChild(element); } }; preloader([ // 需要预加载的资源 '/images/image1.jpg', '/css/style.css', '/js/script.js' ], function () { // 所有资源加载完成后执行的回调函数 console.log('所有资源加载完成!'); // 模拟页面内容加载完成后显示 document.getElementById('loading').style.display = 'none'; document.getElementById('content').style.display = 'block'; }); </script> <style> #loading { display: block; text-align: center; font-size: 24px; margin-top: 50px; } #content { display: none; } </style> </head> <body> <div id="loading">正在加载,请稍候...</div> <div id="content"> 页面内容 </div> </body> </html> ``` 在这个示例中,我们定义了一个名为`preloader`的预加载器函数,它接受两个参数:需要预加载的资源数组和所有资源加载完成后执行的回调函数。在预加载器函数中,我们使用了`document.createElement`方法动态创建了需要预加载的资源元素,并将它们添加到页面中。当所有资源加载完成后,将执行回调函数。同时,我们在页面中添加了一个loading提示,在所有资源加载完成后,将隐藏loading提示并显示页面内容。
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

麻木博客

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值