使用fusion app制作b站app

使用fusion app(以下简称FA)将b站网页版做成app

项目创建

打开FA,首页是已经创建过的项目,点击右下角的加号新建一个项目

创建一个标签栏模板

创建后就会进入我们的项目编辑页面

点击右上角的三角形就可以预览项目

现在我们的项目是默认的一个样子

加载网页

接下来我们在程序启动这个事件中,让他加载b站的页面

点进去后点击右上角加号,添加一个 加载网页 的事件

点击后会自动加上一行

我们改成https://m.bilibili.com/

m一般表示这是一个移动端网页,我们使用移动设备打开b站(www.bilibili.com)时,就会自动跳转到这个网站,专门用来显示移动端的页面

写好后不要忘记保存

然后再点击预览按钮,b站首页就会加载出来

网页控制

但是如果app而不是网页的话,我们一般就不需要网页的头部元素以及一些安装官方app的提示

比如我想让红框中元素消失,让绿色剪头对应页面用原生组件来控制

项目配置中的网页控制选项,可以把页面上不需要的元素删掉

我们在pc端打开m.bilibili.com,通过开发者工具来协助我们

点击顶栏我们就可以获取到它的类

然后我们填上m.bilibili.com的域名和m-navbar这个类

再次预览,原来的顶栏就消失了

同理,我们获取“打开app”的类,也把它去掉

这个元素有open-app-btnhome-float-openapp两个类,我们任填其一就好

两个元素之间的类用逗号隔开

同理,自带的标签栏也去掉

再次预览,发现虽然元素没了,但是多了一片空白,这是因为顶部去掉的两个元素都在同一个父标签下,这个父标签有自己的高度宽度,而我们没有把这个父标签去掉

所以我们把刚才的open-app-btnhome-float-openappm-navbar和换成suspension

再次预览就不会有空白了

顶部标签

进到组件这一页面,可以看到默认的四个标签栏

我们点击标签就会出现对应的地址,把这些信息填过去就好

然后我们发现标签栏改了,但是又出现了空白

经过调试发现是sub-channel-menu这个类,所以在网页控制里加上这个类

把排行榜也去掉,rank-more这个类

这样界面就好看多了

点开一个视频看看,推荐和评论又显示不出来

经调试把前面的open-app-btn改成m-home-float-openapp

再去掉一些没用的元素

m-nav-bar,m-video-main-openapp,m-video2-toolbar,related-openapp,m-fotter,play-page-gotop

悬浮按钮

在组件里启用悬浮按钮

添加一个返回顶部的事件

这样右下角就会出现返回顶部的悬浮按钮

搜索

我们在网页上点击搜索按钮后会进入搜索界面

输入关键词搜索后后面就会出现keyword=关键词

所以FA中我们这样写

https://m.bilibili.com/search?keyword=%s

搜索栏输入文字后就会跳出搜索结果

我们可以在属性中修改顶栏显示的名称

子页面

我们通过侧滑栏不同项目来进入不同的子页面(比如主站和直播)

添加一个名为直播的子页面

可以添加一个顶部图片,并添加两个列表项目

然后编写直播列表项的事件

然后在直播子页面中添加加载的网页

然后也添加侧滑栏项目

但是直播项目里面不写事件

主页里面写一个退出页面的事件

然后像之前一样修改组件

去掉一些元素(class貌似要写在id前面)

bili-btn,bili-app-link,logo-bar,top-nav-ctnr,@ID(bili-footer)

看下界面切换的效果

不过直播好像移动端网页放不了

其他

我们最后选一张bilibili的图标来替换原始图标

选好图片

还可以自己选一张启动图

最后打包安装就可以了

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

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

相关文章

LeetCode--HOT100题(28)

目录 题目描述:2. 两数相加(中等)题目接口解题思路代码 PS: 题目描述:2. 两数相加(中等) 给你两个 非空 的链表,表示两个非负的整数。它们每位数字都是按照 逆序 的方式存储的,并且…

【C语言】小游戏-三字棋

大家好,我是深鱼~ 目录 一、游戏介绍 二、文件分装 三、代码实现步骤 1.制作简易游戏菜单 2.初始化棋盘 3.打印棋盘 4.玩家下棋 5.电脑随机下棋 6.判断输赢 7.判断棋盘是否满了 四、完整代码 game.h(相关函数的声明,整个代码要引用的头文件以及宏…

Apache Paimon 在同程旅行的实践进展

摘要:本文整理自同程旅行大数据计算组负责人吴祥平,在 Apache Paimon Meetup 的分享。本篇内容主要分为四个部分: 1. Apache Paimon 引入 2. Apache Paimon 应用建设 3. Apache Paimon 优化实践 4. 未来规划和期待 Tips:点击「阅读…

Linux运维

目录 第一章、Linux概述 一、Linux的概念 二、Linux的特点 三、Linux VS Windows ​四、Linux的发展优势与存在问题-------不足 五、Linux常用发行版 六、CentOS简介 七、VMWare虚拟机简介 第二章、Linux初示 一、虚拟控制台 二 、Linux启动 (1&#xf…

Linux极客汇总常用运维大全

一、基础篇 1、Linux版本 内核版本 发行版本 RedHat Enterprise Linux-(公司级别,付费) Fedora(组建一个社区,免费) CentOS(基于红帽源代码编译的,免费) Debian(华丽界面&#xf…

Linux云服务器的使用,以及运行Python程序、相关Linux指令

目录 1、使用Linux云服务器的软件 1.1、MobaXterm_Personal 1.2、WindTerm 1.3、FileZilla FTP 2、Linux系统运行Python程序 3、Linux系统查看包、虚拟环境、安装包等 以下几个深度学习服务器都不错:智星云、AutoDL、恒源云 1、使用Linux云服务器的软件 1.1…

linux运维21

linux运维篇21 一、简述redis集群的实现原理二、基于redis5的redis cluster部署 一、简述redis集群的实现原理 工作原理:虽然redis有主从结构,但是无法解决只能单机写入数据的问题,无法实现分布式数据保存。而redis集群会预先分配16384个槽位…

linux运维15

linux运维篇15 一、实现基于MYSQL验证的vsftpd虚拟用户访问二、配置samba共享,实现/www目录共享三、使用rsyncinotify实现/www目录实时同步四、LVS调度算法总结五、LVS的跨网络DR实现 一、实现基于MYSQL验证的vsftpd虚拟用户访问 FTP服务器搭建: 数据库…

linux运维19

linux运维篇19 一、haproxy https实现二、总结tomcat的核心组件以及根目录结构三、tomcat实现多虚拟主机四、nginx实现后端tomcat的负载均衡调度五、简述memcached的工作原理 一、haproxy https实现 路由拓扑 后台web服务器搭建 LAMP架构看这个:LAMP yum install…

收集的 Linux VPS 在线重装系统脚本

因为 VPS 上预装的操作系统我并不习惯,所以打算重装一个。有的 VPS 服务商提供了较多种类的系统选择,有的却没有。如果你发现你希望重装的系统服务商没有提供,可以考虑自己安装。 本文内容 重装脚本 - 来自萌咖CentOS -> Debian 重装脚本 …

【运维】——服务器装Linux系统

一、用软碟通刻录系统光盘 1打开软碟通软件,打开文件-------选择Linux系统 2选择启动----写入硬盘映像 3开始写入硬盘映像,静等进度条走完即可。 二、开始安装Linux系统 1给主机插上刚刚刻录好的系统光盘,选择启动项 2设置信息:…

Linux入门---环境搭建(腾讯云服务器)、XShell远程登陆Linux

Linux环境搭建和远程登陆Linux Linux环境搭建XShell远程登陆Linux Linux环境搭建 主要有三种方式: 1.直接安装在物理机上,但是由于Linux桌面使用起来非常不友好,不推荐。 2.使用虚拟机软件,将Linux搭建在虚拟机上,但是…

Linux系统运维1 运维 项目研发 网站 服务器 计算机基础 Linux操作系统

运维的基本概念 运维行业前景 企业运作模式 四大部门 项目研发流程 职责描述&#xff1a; 运维的作用&#xff1a; 网站的相关概念 网站运行流程&#xff1a; IP<–>域名 重要概念&#xff1a; 服务器图片&#xff1a; 服务器&#xff1a;为用户提供服务的机器&…

linux运维14

linux运维篇14 一、简述CGI与FASTCGI区别二、 编译安装基于fastcgi模式的多虚拟主机的wordpress和discuz的LAMP架构三、通过loganalyzer展示数据库中的日志&#xff08;cgi模式&#xff09; 一、简述CGI与FASTCGI区别 CGI模式&#xff1a;当用户访问网站的动态资源时&#xff…

【从零开始学习JAVA | 第四十五篇】动态代理

目录 前言&#xff1a; 动态代理&#xff1a; 动态代理实现步骤&#xff1a; 动态代理的应用场景&#xff1a; 总结&#xff1a; 前言&#xff1a; 动态代理作为一种强大的编程技术&#xff0c;不仅为我们提供了灵活性和可扩展性&#xff0c;还为软件开发和系统设计带来了…

布隆过滤器在缓存系统中的实践

一. 背景 在业务开发中&#xff0c;在并发量很高的情况下&#xff0c;通常会使用缓存对系统查询性能进行优化&#xff0c;在缓存命中率很高的情况下&#xff0c;缓存的使用能够大幅提升系统查询性能。但是在缓存命中率非常低场景下&#xff0c;如果采用传统缓存读取模式&#…

Redisson_布隆过滤器

应用场景 去重 诞生背景 Java应用一般通过JDK自身提供的HashSet去重&#xff0c;通过contains()方法判断当前元素是否存在于Set中。该方式要求在调用contains()前&#xff0c;已经将数据列表加载到内存中&#xff08;即该方法基于内存存储实现判断功能&#xff09;。 缺点: 1.满…

【布隆过滤器】

我是&#x1f31f;廖志伟&#x1f31f;&#xff0c;一名&#x1f315;Java开发工程师&#x1f315;、&#x1f4dd;Java领域优质创作者&#x1f4dd;、&#x1f389;CSDN博客专家&#x1f389;、&#x1f339;幕后大佬社区创始人&#x1f339;。拥有多年一线研发经验&#xff0…

xmind用例数据上传至禅道

xmind格式参考&#xff0c;只需要在一级子主题填写对应用例模块ID&#xff0c;其余格式随意即可生成用例并直接上传到禅道&#xff1a; 代码里需填写禅道对应登录账号及用例所属产品 import requests import json import re import hashlib import pprint import threading fr…

认识相机

认识相机 在Threejs中相机的表示是THREE.Camera&#xff0c;它是相机的抽象基类&#xff0c;其子类有两种相机&#xff0c;分别是正投影相机THREE.OrthographicCamera和透视投影相机THREE.PerspectiveCamera。类图如下所示&#xff1a; 透视投影相机&#xff08;PerspectiveCam…