草庐IT

小白也能做应用（二）之fusion app增加B站视频页面

bushrose 2023-03-28 原文

一、前言

在上一节，我们新建了工程，做好了准备。本节在工程中加入B站网页，屏蔽页面广告。

二、工程配置

2.1、基础配置

  1. 配置

  • 程序启动事件，填入以下代码
加载网页("https://m.bilibili.com/index.html")

-- 加载网页 为软件自带的函数，后面做函数介绍
-- 链接地址 百度搜索bilibili，把浏览器地址栏的链接复制过来

点击右上角三角符号，我们可以看到页面如下:

  • 网页控制

网页控制如下图填写，
域名或URL我们填写B站的域名，m.bilibili.com，
域名
https://www.baidu.com/xxx.html，去除https://和后面斜杠之后的就是域名，其它网站类似。

删除元素，我们去除顶部和浮动框。这里填写m-home-float-openapp,suspension，多个类名用逗号隔开，或者用@ID(123)删除元素。类名和id获取如第二张图。

  1. 组件

组件整体配置如下图：

  • 底栏项目

点击加号可以新增底栏，栏目可以根据自己喜好新增，url链接由浏览器打开网站对应页面，在浏览器地址栏复制过来即可。这里我们新增四个栏目

首页
https://m.bilibili.com/


国创
https://m.bilibili.com/channel/v/guochuang/chinese

宅舞
https://m.bilibili.com/channel/v/dance/otaku


登录
https://passport.bilibili.com/login
  • 顶栏 菜单项目

长按，删除掉模板配置的退出

  • 顶栏搜索功能

开启启用搜索功能，顶部会多一个放大镜的索索按钮
开启输入框模式，没得搜索图标，会多个输入框
搜索url，在B站中随意搜索一个视频，比如我们搜索“九转大肠”，复制出来的链接https://m.bilibili.com/search?keyword=%E4%B9%9D%E8%BD%AC%E5%A4%A7%E8%82%A0,把这个链接修改为https://m.bilibili.com/search?keyword=%s，其他网站的搜索链接也是类似的操作。

  • 顶栏 图标按钮

新增一个关闭app的功能。在图标仓库选择一个关闭的图标，项目点击事件中选择事件退出程序()，再保存退出。

  • 侧滑栏配置

开启侧滑栏，选择一张图片

  • 侧滑栏 列表项目

点击+号新增，项目名称 ：哔哩哔哩，设置项目点击事件中填写加载网页("https://m.bilibili.com/")，这句代码就是点击侧滑栏这个列表项时，会请求加载哔哩哔哩的首页。

完成以上配置后，点击右上角三角符号，可以预览app，此时页面如下：

2.2、app优化

  • 页面优化

预览时可以看到国创和宅舞页面顶部有空白，还是通过删除元素的方式来去除，在配置-网页控制中，新增需要删除的元素名称sub-channel-menu，这时完整的配置为m-home-float-openapp,suspension,sub-channel-menu。

  • 增加二次确认操作

点击搜索栏x时，会直接关闭app，体验不好。这里增加一个二次确认的操作。

在组件->顶栏图标按钮，点击图标->设置项目点击事件，将2.1中的的事件修改为以下代码，再保存：

对话框()
.设置标题("退出app")
.设置消息("您确定关闭该应用?")
.设置积极按钮("确定",function()
  退出程序()
end)
.设置消极按钮("取消")
.显示()

-- 这些事件都是点击+号，可以选择事件。如何配置需要学习下lua代码的基础知识

配置完成后，点击x关闭时，就会弹出对话框让用户确认，如下：

  • 侧滑栏增加退出按钮

在组件->侧滑栏中，新增退出，选择图标，设置的点击事件与上一步关闭图标的一致，预览时，点开侧滑栏就可以看到新增的退出功能。

  1. 属性

在前面2步完成，app已经初步成型，为了让应用更好看，我们调整一下配色，可以根据自己喜好调整，这里以bilibili粉红的颜色来配置。

 底栏             #FFF97192
 底栏图标选中      #FF415159
 顶栏             #FFF97192
 导航栏           #FFF97192
 侧滑栏背景        #FFE1EEF6
 -- 只修改这些，其余不动，可以自行研究配色

这是我们的界面如下：

到此完成了app的雏形，在工程界面点击右上角三个点，可以打包安装。（注意打包路径不要包含中文，可能会出错）

三、总结

本章我们完成了app的初步雏形，完成页面常见元素去除，修改应用配色等。目前应用还存在一些问题，下节我们完成app版本检测及免登录。

本文的工程文件下载链接：

链接:https://pan.baidu.com/s/1N9vo58KYfCWzM9rlOaC11Q 

提取码:8ch4

本文由【产品经理不是经理】gzh同步发布，欢迎关注

fusionapp1534570codehttps其他语言

有关小白也能做应用（二）之fusion app增加B站视频页面的更多相关文章

  1. ruby - 将差异补丁应用于字符串/文件 - 2

    对于具有离线功能的智能手机应用程序，我正在为Xml文件创建单向文本同步。我希望我的服务器将增量/差异(例如GNU差异补丁)发送到目标设备。这是计划:Time=0Server:hasversion_1ofXmlfile(~800kiB)Client:hasversion_1ofXmlfile(~800kiB)Time=1Server:hasversion_1andversion_2ofXmlfile(each~800kiB)computesdeltaoftheseversions(=patch)(~10kiB)sendspatchtoClient(~10kiBtransferred)Cl

  2. ruby-on-rails - Rails 应用程序之间的通信 - 2

    我构建了两个需要相互通信和发送文件的Rails应用程序。例如，一个Rails应用程序会发送请求以查看其他应用程序数据库中的表。然后另一个应用程序将呈现该表的json并将其发回。我还希望一个应用程序将存储在其公共(public)目录中的文本文件发送到另一个应用程序的公共(public)目录。我从来没有做过这样的事情，所以我什至不知道从哪里开始。任何帮助，将不胜感激。谢谢! 最佳答案 无论Rails是什么，几乎所有Web应用程序都有您的要求，大多数现代Web应用程序都需要相互通信。但是有一个小小的理解需要你坚持下去，网站不应直接访问彼此

  3. ruby - 无法运行 Rails 2.x 应用程序 - 2

    我尝试运行2.x应用程序。我使用rvm并为此应用程序设置其他版本的ruby​​:$rvmuseree-1.8.7-head我尝试运行服务器，然后出现很多错误:$script/serverNOTE:Gem.source_indexisdeprecated,useSpecification.Itwillberemovedonorafter2011-11-01.Gem.source_indexcalledfrom/Users/serg/rails_projects_terminal/work_proj/spohelp/config/../vendor/rails/railties/lib/r

  4. ruby-on-rails - Rails 应用程序中的 Rails : How are you using application_controller. rb 是新手吗？ - 2

    刚入门rails，开始慢慢理解。有人可以解释或给我一些关于在application_controller中编码的好处或时间和原因的想法吗？有哪些用例。您如何为Rails应用程序使用应用程序Controller？我不想在那里放太多代码，因为据我了解，每个请求都会调用此Controller。这是真的？ 最佳答案 ApplicationController实际上是您应用程序中的每个其他Controller都将从中继承的类(尽管这不是强制性的)。我同意不要用太多代码弄乱它并保持干净整洁的态度，尽管在某些情况下ApplicationContr

  5. ruby - 检查数组是否在增加 - 2

    这个问题在这里已经有了答案:Checktoseeifanarrayisalreadysorted?(8个答案)关闭9年前。我只是想知道是否有办法检查数组是否在增加？这是我的解决方案，但我正在寻找更漂亮的方法:n=-1@arr.flatten.each{|e|returnfalseife

  6. ruby-on-rails - 如何在我的 Rails 应用程序 View 中打印 ruby​​ 变量的内容？ - 2

    我是一个Rails初学者，但我想从我的RailsView(html.haml文件)中查看Ruby变量的内容。我试图在ruby​​中打印出变量(认为它会在终端中出现)，但没有得到任何结果。有什么建议吗？我知道Rails调试器，但更喜欢使用inspect来打印我的变量。 最佳答案 您可以在View中使用puts方法将信息输出到服务器控制台。您应该能够在View中的任何位置使用Haml执行以下操作:-puts@my_variable.inspect 关于ruby-on-rails-如何在我的R

  7. ruby-on-rails - 如何在 Gem 中获取 Rails 应用程序的根目录 - 2

    是否可以在应用程序中包含的gem代码中知道应用程序的Rails文件系统根目录？这是gem来源的示例:moduleMyGemdefself.included(base)putsRails.root#returnnilendendActionController::Base.send:include,MyGem谢谢，抱歉我的英语不好 最佳答案 我发现解决类似问题的解决方案是使用railtie初始化程序包含我的模块。所以，在你的/lib/mygem/railtie.rbmoduleMyGemclassRailtie使用此代码，您的模块将在

  8. 世界前沿3D开发引擎HOOPS全面讲解——集3D数据读取、3D图形渲染、3D数据发布于一体的全新3D应用开发工具 - 2

    无论您是想搭建桌面端、WEB端或者移动端APP应用，HOOPSPlatform组件都可以为您提供弹性的3D集成架构，同时，由工业领域3D技术专家组成的HOOPS技术团队也能为您提供技术支持服务。如果您的客户期望有一种在多个平台（桌面/WEB/APP，而且某些客户端是“瘦”客户端）快速、方便地将数据接入到3D应用系统的解决方案，并且当访问数据时，在各个平台上的性能和用户体验保持一致，HOOPSPlatform将帮助您完成。利用HOOPSPlatform，您可以开发在任何环境下的3D基础应用架构。HOOPSPlatform可以帮您打造3D创新型产品，HOOPSSDK包含的技术有：快速且准确的CAD

  9. 叮咚买菜基于 Apache Doris 统一 OLAP 引擎的应用实践 - 2

    导读：随着叮咚买菜业务的发展，不同的业务场景对数据分析提出了不同的需求，他们希望引入一款实时OLAP数据库，构建一个灵活的多维实时查询和分析的平台，统一数据的接入和查询方案，解决各业务线对数据高效实时查询和精细化运营的需求。经过调研选型，最终引入ApacheDoris作为最终的OLAP分析引擎，Doris作为核心的OLAP引擎支持复杂地分析操作、提供多维的数据视图，在叮咚买菜数十个业务场景中广泛应用。作者｜叮咚买菜资深数据工程师韩青叮咚买菜创立于2017年5月，是一家专注美好食物的创业公司。叮咚买菜专注吃的事业，为满足更多人“想吃什么”而努力，通过美好食材的供应、美好滋味的开发以及美食品牌的孵

  10. 【鸿蒙应用开发系列】- 获取系统设备信息以及版本API兼容调用方式 - 2

    在应用开发中，有时候我们需要获取系统的设备信息，用于数据上报和行为分析。那在鸿蒙系统中，我们应该怎么去获取设备的系统信息呢，比如说获取手机的系统版本号、手机的制造商、手机型号等数据。1、获取方式这里分为两种情况，一种是设备信息的获取，一种是系统信息的获取。1.1、获取设备信息获取设备信息，鸿蒙的SDK包为我们提供了DeviceInfo类，通过该类的一些静态方法，可以获取设备信息，DeviceInfo类的包路径为：ohos.system.DeviceInfo.具体的方法如下：ModifierandTypeMethodDescriptionstatic StringgetAbiList​()Obt

随机推荐