Einstiegs-Erfahrungsfall für die mobile Entwicklung des Mui-Frameworks

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>

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
    },

unter der Codeansicht „plus“ hinzu, wie im Bild gezeigt:

Nach Abschluss der Änderung wird „true“ angezeigt. Der Effekt ist wie folgt:

Terminalunterstützung:

• Android4 .4 und höher Systemunterstützung;

• iOS7.0 und höher Systemunterstü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>

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');

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);

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" />

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>

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;
}

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;
}

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!