In diesem Artikel werden hauptsächlich die ersten Erfahrungen mit der mobilen Entwicklung mit dem Mui-Framework vorgestellt. Jetzt werde ich sie mit Ihnen teilen und Ihnen eine Referenz geben. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.
Vorwort
Der Blogger ist kürzlich mit mobilen Apps in Kontakt gekommen und hat ein paar Tipps gelernt, die ich gerne mit Ihnen teilen möchte.
1. Statusleisteneinstellungen
Wenn jetzt die meisten Apps geöffnet werden, ist die Statusleiste in die APP integriert, was nicht nur schön ist, sondern auch auf das Ganze abgestimmt ist.
Der Blogger ist Patient einer mittelschweren Zwangsstörung und der kleine schwarze Balken oben bereitet mir wirklich Unbehagen.
Zuerst erstellen wir ein neues mobiles APP-Projekt auf HBuilder
1.1 Immersive Statusleiste (transparente Statusleiste)
Im Allgemeinen gilt, wenn die gesamte Seite ein Bild ist, der Status Die Leiste ist transparent.
Erkennen Sie zunächst, ob die aktuelle Umgebung die immersive Statusleiste unterstützt. Erkennungsanweisung:
<script type="text/javascript">
document.addEventListener('plusready', function(){
//是否支持沉浸式状态栏
alert(plus.navigator.isImmersedStatusbar());
});
</script>Nach dem Login kopieren
wird standardmäßig nicht unterstützt und es wird „false“ angezeigt. Wenn Sie möchten, dass die Umgebung dies unterstützt, müssen Sie die Konfigurationsdatei manifest.json unter dem Projekt
ändern. Öffnen Sie nach dem Öffnen die Codeansicht:
Fügen Sie
"statusbar": {
"immersed": true
},Nach dem Login kopieren
unter der Codeansicht „plus“ hinzu, wie im Bild gezeigt:
Nach Abschluss der Änderung wird „true“ angezeigt. Der Effekt ist wie folgt:
Terminalunterstützung:
1.2 Statusleiste Vollbild
Vollbild-Statusleiste bedeutet, dass keine Statusleiste vorhanden ist und der Akku und die Signalelemente nicht angezeigt werden.
Dieser Effekt besteht darin, die Anweisung in die JS-Datei einzufügen:
<script type="text/javascript">
document.addEventListener('plusready', function(){
//参数：true - 全屏;false - 不全屏
plus.navigator.setFullscreen(true);
});
</script>Nach dem Login kopieren
Der Effekt ist wie folgt:
1.3 Status Hintergrundfarbe der Leiste
Das Ändern der Hintergrundfarbe wird im Allgemeinen in Szenarien verwendet, in denen die Hintergrundfarbe oben auf der Seite einfarbig ist. Ändern Sie sie in die gleiche Hintergrundfarbe wie die Seite, um die Seite harmonischer zu gestalten.
//设置系统状态栏背景色
plus.navigator.setStatusBarBackground('#6495ED');Nach dem Login kopieren
Die Android-Plattform unterstützt diese Funktion nicht. Wenn es Experten gibt, geben Sie mir bitte einen Rat.
2. Milchglaseffekt
Unscharfe Bilder können den Menschen einen verschwommenen und schönen Effekt verleihen. Klicken Sie auf den zuvor nicht erwähnten Bildunschärfeeffekt:
CSS-Attributfilter:
filter: blur(16px);
Nach dem Login kopieren
Die Pixel in Blur() geben den Grad der Unschärfe an.
3. Verwenden Sie einfach Mui, um schnell eine Seite zu erstellen
Das Problem mit der Statusleiste, das mich am meisten gestört hat, wurde gelöst und das Seitenlayout ist einfacher zu handhaben. Es kann schnell mit Mui-Vorlagen erstellt werden.
Nehmen Sie XX Music als Beispiel:
2.1 Datei importieren
<script src="js/mui.min.js"></script>
<link href="css/mui.min.css" rel="external nofollow" rel="stylesheet"/>
<link rel="stylesheet" href="css/bofang.css" rel="external nofollow" />
Nach dem Login kopieren
2.2 HTML-Code
Der folgende HTML-Code ist der verwendete Mui-Framework-Teil und das Obige Für die relevanten Teile der Statusleiste handelt es sich bei dieser Mui um den regionalen Karussellteil
Das obere Bild ist das Hintergrundbild, das in die äußere Ebene eingewickelt ist. Das Überlaufattribut muss vorhanden sein flexibel einsetzbar, um perfekte Effekte zu erzielen.
Da der Header-Teil der APP zur Positionierung verwendet wird, muss im Hauptteil der Seite ein Padding-Top mit einer Höhe von etwa 74 Pixel hinzugefügt werden
<p class="mui-slider">
<p class="mui-slider-group">
<p class="mui-slider-item">
第一个轮播区域
</p>
<p class="mui-slider-item">
<p class="singer">
<span class="ce"></span>
<span class="mui-text-center">G-DRAGON</span>
<span class="ce"></span>
</p>
<p class="yinxiao">
<img src="img/player_btn_sq_hlight.png"/>
<img src="img/player_btn_mv_normal.png"/>
<img src="img/player_btn_dts_on.png"/>
</p>
<p class="datu">
<img src="img/GD.jpg"/>
</p>
<p class="geci">A Boy - G-DRAGON</p>
</p>
<p class="mui-slider-item">
第二个轮播区域
</p>
</p>
<p class="mui-slider-indicator">
<p class="mui-indicator"></p>
<p class="mui-indicator mui-active"></p>
<p class="mui-indicator"></p>
</p>
</p>
Nach dem Login kopieren
Haupt-CSS-Code:
*{
padding: 0px;
margin: 0px;
}
body{
overflow: hidden;
height: 100vh;
}
#background{
overflow: hidden;
text-align: right;
}
#background #backImg{
margin-left: -120px;
height: 99vh;
filter: blur(16px);
}
.mui-bar-nav{
top: 30px;
background-color: rgba(0,0,0,0);
box-shadow: 0 0px 0px #ccc;
}
.mui-bar-nav .mui-title{
color: white;
font-size: 20px;
font-weight: normal;
line-height: 50px;
}
#continer{
width: 100%;
height: 100vh;
position: relative;
top: -100vh;
z-index: 5;
padding-top: 80px;
background-color: rgba(0,0,0,0.7);
text-align: center;
color: white;
}Nach dem Login kopieren
Ich habe nicht darüber nachgedacht, die unterschiedlich großen Bilder später in der Mitte auszurichten. Hier müssen wir die achsenübergreifende Ausrichtung des flexiblen Layouts verwenden:
#continer .footer1{
margin-bottom: 0px;
display: flex;
align-items: center;
justify-content: center;
}Nach dem Login kopieren
Verwandte Empfehlungen:
Eine einfache Erfahrung der mobilen Entwicklung des Mui-Frameworks
So verwenden Sie den MUI-Frame in mobilem HTML5
Was tun, wenn die MUI-Frame-Seite nicht gescrollt werden kann
Das obige ist der detaillierte Inhalt vonEinstiegs-Erfahrungsfall für die mobile Entwicklung des Mui-Frameworks. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
