小白也能做应用(二)之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 同步发布,欢迎关注
小白也能做应用(二)之fusion app增加B站视频页面相关推荐
- html二级子页面设计,Fusion App制作文章详细页二级子页面
. 下载着Apoup(风铃)APP的朋友都知道,点击文章会出来一个文章详细页面. 在这个文章详细页面看完文章后返回直接就到首页不用像浏览器那样缓慢的重新加载. 这样有助于提高用户的整体体验,让交互更加 ...
- 学金融会python_大学生金融小白自学Python做量化投资需要注意哪些?
大学生金融小白自学python做量化投资需要注意些什么?量化金融其实是一个交叉复合学科,需要掌握数学.计算机.金融等方面的知识.显而易见,对于金融学背景的同学来说,就需要另外学习计算机编程的知识,而计 ...
- python小白自学基础知识(二)附加(人狗大战游戏)
python小白自学基础知识(二) 1.计算列表内数字的累加和 这里用到functools模块,以及该模块下的reduce函数 语法:reduce(function1,list1) 注:functio ...
- 零基础新手小白,如何做自媒体每天挣200?快速实操攻略来了【覃小龙课堂】
大家好,我是腾然MCN创始人覃小龙,您可以称呼我为覃总,今天为您带来的主题是: <零基础新手小白,如何做自媒体每天挣200?快速实操攻略来了> 接下来就给到家分享如何注册自媒体.如何发视 ...
- 大学生金融小白自学Python做量化投资需要注意哪些?
大学生金融小白自学python做量化投资需要注意些什么?量化金融其实是一个交叉复合学科,需要掌握数学.计算机.金融等方面的知识.显而易见,对于金融学背景的同学来说,就需要另外学习计算机编程的知识,而计 ...
- 拋棄虛擬機,微軟實驗讓我們在線做(二)
拋棄虛擬機,微軟實驗讓我們在線做(二) 备注:如果当前的图不清楚(因为网站对图片进行了压缩,故不是很清晰).博主推荐你可以点击图看看大图或是下载PDF档看,这样的话,效果会更好一些! 实验前言: 作为 ...
- 原相机水印怎么改字_抖音/自媒体做影视二次剪辑,如何下载高清无水印视频?...
很多想做影视二次剪辑的小伙伴,苦于不知道怎么获取到高清无水印视频,话不多说. 直接上干货,分享3个能帮到你的方法. 极简录屏.解析下载,磁力链接. 1.通过极简模式的录屏 优点:可以直接快速获取到需要 ...
- 做系统ghost步骤图解_掌握这几个步骤电脑小白也会做系统
做电脑系统其实很简单,掌握下面几个步骤,小白也能做系统 台式机做系统 首先制作U盘PE,我就拿完美者pe为例 1:准备一个8G的U盘, 2:格式化 3:下载一个UltraISO软件 并安装(软碟通软件 ...
- 安卓修改电池容量教程_图吧小白教程 篇三十二:手机拆换原装电池教程——替换寿命将届的原厂电池,提升手机续航...
图吧小白教程 篇三十二:手机拆换原装电池教程--替换寿命将届的原厂电池,提升手机续航 2019-12-05 13:01:04 1点赞 20收藏 1评论 你是AMD Yes党?还是intel和NVIDI ...
最新文章
- linux history(命令历史)
- centos 自动挂载磁盘
- Hibernate4一对一关系映射(共享主键方式)
- ASCII和字母的转换
- #pragma once与#ifndef #define ...#endif的区别
- java 检视_Java高并发系列——检视阅读(五)
- eclipse Jsp 自创建tags问题
- 力扣401.二进制手表
- 测试自动化金字塔在软件开发中是如何使用的?
- cocos2d-x 中LUA和平台之间的函数调用理解
- python + sklearn ︱分类效果评估——acc、recall、F1、ROC、回归、距离
- java基础----java调用oracle存储过程(转)
- android移动商城源码,o2o移动社区Android端app开源源码
- mysql数据迁移数据一致性检教6_数据迁移后的一致性校验
- c语言实现 字符串替换函数,C语言函数实现 字符串替换
- [吴恩达机器学习课程笔记] week four强化学习
- # 一点毕设的小感悟(词频统计+可视化分析)
- 有趣--等额本息还款
- JS 的5个不良编码习惯,现在就改掉吧
- CyanogenMod源码下载和编译 CM7