今天是很喪的一天，做什么都提不起興趣，不知道何時才能做到道家的“無為，而無所不為”，也無法理解范仲淹的“不以物喜不以己悲”。可是再沒興趣，學習還是要繼續！！！為了讓自己放松，去趟博物館，不但沒有起到放松心情的作用，反而累得自己腰酸背疼?？啾频膸滋?#xff0c;害，接下來還是干正事！
https://blog.csdn.net/hanhanwanghaha一個超級無敵可愛的人鴨 歡迎您的關注！
歡迎關注微信公眾號：寶藏女孩的成長日記
如有轉載，請注明出處（如不注明，盜者必究）
目錄
- 一、前提
- 二、模板文件的創建
- 三、實現底部選項卡的功能
- 3.1打開main代碼
- 3.2創建底部選項卡頁面
- 3.3實現底部選項卡功能
- 3.4實現切換功能（此文重點）
- 四、擴展
一、前提
打開我們的HBuilder
回顧一下我們前面的知識，詳細點擊這里
為了借助MUI框架，我們需要建一個模板文件哈哈哈
二、模板文件的創建
新建一個移動App
自己命名，這里選擇Hello mui項目
這樣模板就建好了，先放這里
三、實現底部選項卡的功能
在hello.mui模板（新建mui項目：例如我這里是MUI_model）中找到examples文件夾下的tab-webview-main.html ，并且復制到自己的項目中（比如我自己的項目為one），改名為main（也可以改名為其他的哈哈哈）
3.1打開main代碼
去掉../
因為這里的項目不用跳出上一級文件夾
看到這里，我們可以看到這些href的鏈接，要鏈接到底部選項卡的頁面，接下來我們可以創建頁面了。
3.2創建底部選項卡頁面
新建index(原來有的可以不用新建) prolist car my
以index.html為栗子
雖然步驟很簡單，但是還是要剪出來，新建html文件
切記這里點擊含mui的html文件，后面幾個新建一樣的，類似的操作就好啦！
文件建好以后，項目就是現在這個樣子
3.3實現底部選項卡功能
更改href的路徑
將底部選項卡的href修改為如下圖，而且span標簽里面的文字也可以自己設置
此時47行的代碼也要更著修改奧！
3.4實現切換功能（此文重點）
以my.html為例，實現切換
我們在body里面來編寫一段代碼
(快捷鍵)
mb 回車 選擇mbody
ml 回車
然后自己再填寫相應的文字
my.html
<!doctype html>
<html><head><meta charset="UTF-8"><title></title><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><link href="css/mui.min.css" rel="stylesheet" /></head><body><script src="js/mui.min.js"></script><script type="text/javascript">mui.init()</script><div class="mui-content"><ul class="mui-table-view"><li class="mui-table-view-cell"><a class="mui-navigate-right">我的訂單
</a></li><li class="mui-table-view-cell"><a class="mui-navigate-right">修改密碼
</a></li><li class="mui-table-view-cell"><a class="mui-navigate-right">反饋意見
</a></li><li class="mui-table-view-cell" id='btnaboutUs'><a class="mui-navigate-right">關于我們
</a></li></ul></div></body></html>
實現功能：實現點擊關于我們，就返回關于我們的這一頁
我們就是這一行去設置id（因為后面我們要調用它）
去js拿這個id
打開新頁面
參考代碼來源：https://dev.dcloud.net.cn/mui/window/
在my.html的body中輸入下面這個代碼，這個代碼的意思是拿到"關于我們"的Id,因為我們在my.html中設置了關于我們的id為btnAboutUs，addEventListener(“tap”,function()為點擊事件，這串代碼實現的功能就是點擊關于我們，就會出現關于我們頁面的信息
<script src
="js/mui.min.js"></script
><script type
="text/javascript">mui
.init()document
.getElementById("btnAboutUs").addEventListener("tap", function() {var webview
= mui
.openWindow({url
: 'aboutUs.html',extras
: {name
: 'wangtiantian', time
: '2020-11-9'}});})</script
>
完整的就應該是
<!doctype html
>
<html
><head
><meta charset
="UTF-8"><title
></title
><meta name
="viewport" content
="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><link href
="css/mui.min.css" rel
="stylesheet" /></head
><body
><div
class="mui-content"><ul
class="mui-table-view"><li
class="mui-table-view-cell"><a
class="mui-navigate-right">我的訂單
</a
></li
><li
class="mui-table-view-cell"><a
class="mui-navigate-right">修改密碼
</a
></li
><li
class="mui-table-view-cell"><a
class="mui-navigate-right">反饋意見
</a
></li
><li
class="mui-table-view-cell" id
='btnAboutUs'><a
class="mui-navigate-right">關于我們
</a
></li
></ul
></div
><script src
="js/mui.min.js"></script
><script type
="text/javascript">mui
.init()document
.getElementById("btnAboutUs").addEventListener("tap", function() {var webview
= mui
.openWindow({url
: 'aboutUs.html',extras
: {name
: 'wangtiantian', time
: '2020-11-9'}});})</script
></body
></html
>
這邊我們新建一個aboutUs.html（關于我們的頁面）
我們在body里面隨便寫點東西，例如mh回車，mb回車（選擇mbody），在div里面span回車
<!doctype html
>
<html
><head
><meta charset
="UTF-8"><title
></title
><meta name
="viewport" content
="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><link href
="css/mui.min.css" rel
="stylesheet" /></head
><body
><header
class="mui-bar mui-bar-nav"><a
class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a
><h1
class="mui-title">我們都是可愛的小朋友喲！
</h1
></header
><div
class="mui-content">歡迎關注這個超級無敵可愛的人鴨！
<span id
="authorBox"></span
></div
><script src
="js/mui.min.js"></script
><script type
="text/javascript">mui
.init()</script
></body
></html
>
可以修改一下頁面入口
這時候我們可以手機運行一下試試
點擊紅框內的東東
看運行結果：
(把手機開著)
從上圖我們可以看到index頁面有多余的東西
于是我們去到Index頁面
將標題和底部選項卡都刪了，于是就可以得到下面的代碼
index.html
<!DOCTYPE html
>
<html
><head
><meta charset
="utf-8"><meta name
="viewport" content
="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><title
></title
><script src
="js/mui.min.js"></script
><link href
="css/mui.min.css" rel
="stylesheet" /><script type
="text/javascript" charset
="utf-8">mui
.init();</script
></head
><body
><div id
="slider" class="mui-slider" ><div
class="mui-slider-group mui-slider-loop"><!-- 額外增加的一個節點
(循環輪播：第一個節點是最后一張輪播
) --><div
class="mui-slider-item mui-slider-item-duplicate"><a href
="#"><img src
="http://placehold.it/400x300"></a
></div
><!-- 第一張
--><div
class="mui-slider-item"><a href
="#"><img src
="http://placehold.it/400x300"></a
></div
><!-- 第二張
--><div
class="mui-slider-item"><a href
="#"><img src
="http://placehold.it/400x300"></a
></div
><!-- 第三張
--><div
class="mui-slider-item"><a href
="#"><img src
="http://placehold.it/400x300"></a
></div
><!-- 第四張
--><div
class="mui-slider-item"><a href
="#"><img src
="http://placehold.it/400x300"></a
></div
><!-- 額外增加的一個節點
(循環輪播：最后一個節點是第一張輪播
) --><div
class="mui-slider-item mui-slider-item-duplicate"><a href
="#"><img src
="http://placehold.it/400x300"></a
></div
></div
><div
class="mui-slider-indicator"><div
class="mui-indicator mui-active"></div
><div
class="mui-indicator"></div
><div
class="mui-indicator"></div
><div
class="mui-indicator"></div
></div
></div
><ul
class="mui-table-view mui-grid-view mui-grid-9"><li
class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href
="#"><span
class="mui-icon mui-icon-home"></span
><div
class="mui-media-body">Home
</div
></a
></li
><li
class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href
="#"><span
class="mui-icon mui-icon-email"><span
class="mui-badge mui-badge-red">5</span
></span
><div
class="mui-media-body">Email
</div
></a
></li
><li
class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href
="#"><span
class="mui-icon mui-icon-chatbubble"></span
><div
class="mui-media-body">Chat
</div
></a
></li
><li
class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href
="#"><span
class="mui-icon mui-icon-location"></span
><div
class="mui-media-body">Location
</div
></a
></li
><li
class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href
="#"><span
class="mui-icon mui-icon-search"></span
><div
class="mui-media-body">Search
</div
></a
></li
><li
class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href
="#"><span
class="mui-icon mui-icon-phone"></span
><div
class="mui-media-body">Phone
</div
></a
></li
></ul
></body
></html
>
再次運行我們的app，index看起來就舒服了。
怎么實現點擊“我的”中的“關于我們”就跳轉到關于我們頁面？
還記得我們剛剛在my.html中寫的這個點擊事件？在前面的打開新頁面中有介紹！
在aboutUs.html中輸入這段代碼，我們可以根據span的id=authorBox，把拿到的參數傳到上面的div中的span里面去。
這里需要注意一點的是參數是從my.html（我的）里面拿過來的
接下來，我們就可以在手機上面運行試一下，點擊“我的”中的“關于我們”就可以跳轉到關于我們頁面。
去實操一下就知道啦！
四、擴展
這邊再擴展幾個：如何給標題改背景顏色：
和寫前端是一樣的
例如：
第16行的<a class="mui-navigate-right" style="background-color: pink;">
<!doctype html>
<html><head><meta charset="UTF-8"><title></title><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><link href="css/mui.min.css" rel="stylesheet" /></head><body><div class="mui-content"><ul class="mui-table-view"><li class="mui-table-view-cell"><a class="mui-navigate-right" style="background-color: pink;">我的訂單
</a></li><li class="mui-table-view-cell"><a class="mui-navigate-right">修改密碼
</a></li><li class="mui-table-view-cell"><a class="mui-navigate-right">反饋意見
</a></li><li class="mui-table-view-cell" id='btnAboutUs'><a class="mui-navigate-right">關于我們
</a></li></ul></div><script src="js/mui.min.js"></script><script type="text/javascript">mui.init()document.getElementById("btnAboutUs").addEventListener("tap", function() {var webview = mui.openWindow({url: 'aboutUs.html',extras: {name: 'wangtiantian', time: '2020-11-9'}});})</script></body></html>
顯示效果
如何更改圖標
到我們創建的模板中去找examples文件夾，找到icons.html和icons-extra.html
打開他們，選取對應的你需要的圖標
比如說，我要修改我的Index頁面的微信圖標，如圖（此處需要修改）
因此，我們可以去到模板里面找到微信圖標對應的class名稱，然后，將這個名稱復制粘貼到剛剛我們要修改的地方去
如圖：此時我的index頁面的微信圖標就改變了。
注意：如果說我們用的是擴展圖標，也就是icons-extra.html，此時我們應該把擴展圖標樣式和字體也要拿到我們的項目中
比如說，我們要拿icons-extra.html的第一個圖標
我們就應該把模板當中的樣式和字體復制粘貼到自己的項目中去
然后再直接修改相應的代碼就可以啦！
大功告成！https://blog.csdn.net/hanhanwanghaha歡迎關注這個超級無敵可愛的人鴨，有什么問題留言私信皆可，看見必回！
如有轉載，請注明出處
總結
以上是生活随笔為你收集整理的连接真机开发安卓(Android)移动app MUI框架——混合式开发（二） 带你项目开发（最新版）的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
