b站怎么添加本地视频（小白也能做应用（二）之fusion app增加B站视频页面）

一
  
  
  
  
  
  
  
  
 、前言

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















，屏蔽页面广告
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
。

二  
  
  
  
  
  
  
  
  、工程配置

2.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获取如第二张图
 


 


 


 


 


 


 


 


 
。

组件

组件整体配置如下图：

底栏项目

点击加号可以新增底栏

























，栏目可以根据自己喜好新增                  ，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关闭时

























，就会弹出对话框让用户确认                  ，如下：

侧滑栏增加退出按钮

在组件->侧滑栏中
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
，新增退出
















，选择图标 
  
  
  
  
  
  
  
  
 ，设置的点击事件与上一步关闭图标的一致
  
  
  
  
  
  
  
  
 ，预览时
 


 


 


 


 


 


 


 


 
，点开侧滑栏就可以看到新增的退出功能

























。

属性

在前面2步完成 
 
 
 
 
 
 
 
 
，app已经初步成型
   
   
   
   
   
   
   
   
  ，为了让应用更好看
 

 

 

 

 

 

 

 

 
，我们调整一下配色 

 

 

 

 

 

 

 

 
，可以根据自己喜好调整                  ，这里以bilibili粉红的颜色来配置                  。

底栏 #FFF97192 底栏图标选中 #FF415159 顶栏 #FFF97192 导航栏 #FFF97192 侧滑栏背景 #FFE1EEF6 -- 只修改这些

 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
，其余不动
















，可以自行研究配色

这是我们的界面如下：

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

























，可能会出错）

三   
   
   
   
   
   
   
   
   、总结

本章我们完成了app的初步雏形                  ，完成页面常见元素去除
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
，修改应用配色等
















。目前应用还存在一些问题
















，下节我们完成app版本检测及免登录 
  
  
  
  
  
  
  
  
 。

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

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

提取码:8ch4

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