一、前言
在上一節，我們新建了工程，做好了準備，本節在工程中加入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同步發布，歡迎關注
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/543406.html
標籤：其他
上一篇：JAVA中如何判斷一個ResultSet結果集是否為空
下一篇：Python分析睡眠資料