모바일 개발 mui 프레임워크 진입 경험 사례-H5 튜토리얼-php.cn

모바일 개발 mui 프레임워크 진입 경험 사례

小云云

풀어 주다： 2018-01-30 09:24:33

원래의

3909명이 탐색했습니다.

이 글에서는 주로 mui 프레임워크를 사용한 첫 번째 모바일 개발 경험을 소개하고 참고하겠습니다. 편집자를 따라가서 모두에게 도움이 되기를 바랍니다.

서문

블로거는 최근 모바일 앱에 노출되어 여러분과 공유할 몇 가지 팁을 배웠습니다.

1. 상태 표시줄 설정

이제 대부분의 앱을 열면 상태 표시줄이 앱과 통합되어 아름다울 뿐만 아니라 전체와 조화를 이룹니다.

블로거는 중등도 강박장애 환자인데, 상단에 있는 작은 검은색 막대가 정말 불편해요.

먼저 HBuilder에서 새로운 모바일 앱 프로젝트를 생성합니다

1.1 몰입형 상태 표시줄(투명 상태 표시줄)

일반적으로 페이지 전체가 그림일 경우 상태 표시줄이 투명해집니다.

먼저 현재 환경이 몰입형 상태 표시줄을 지원하는지 확인하세요. 감지 문:

<script type="text/javascript">
  document.addEventListener('plusready', function(){
    //是否支持沉浸式状态栏
    alert(plus.navigator.isImmersedStatusbar());
    
  });
</script>

로그인 후 복사

는 기본적으로 지원되지 않으며 false가 나타납니다. 환경에서 이를 지원하려면 프로젝트 아래에 매니페스트.json 구성 파일을 수정해야 합니다. 해당 파일을 연 후 코드 보기를 엽니다.

Add

    "statusbar": {
      "immersed": true
    },

로그인 후 복사

코드 뷰 "plus" 아래 그림과 같이:

수정이 완료되면 true가 팝업되며 효과는 다음과 같습니다:

터미널 지원:

상태 표시줄 전체 화면은 상태 표시줄이 없고 배터리와 신호가 표시되지 않음을 의미합니다. .

이 효과는 JS 파일에 다음 명령문을 추가하는 것입니다:

<script type="text/javascript">
  document.addEventListener('plusready', function(){
    //参数：true - 全屏;false - 不全屏
    plus.navigator.setFullscreen(true);
    
  });
</script>

로그인 후 복사

효과는 다음과 같습니다:

1.3 상태 표시줄 배경색

배경색 수정은 일반적으로 배경색이 다음과 같은 시나리오에서 사용됩니다. 페이지 상단은 단색으로, 페이지와 일치하도록 수정되었습니다. 배경색은 페이지를 더욱 조화롭게 만듭니다.

//设置系统状态栏背景色
plus.navigator.setStatusBarBackground('#6495ED');

로그인 후 복사

안드로이드 플랫폼에서는 이 기능을 지원하지 않습니다. 전문가가 있다면 조언 부탁드립니다.

2. 불투명 유리 효과

사진을 흐리게 하면 흐릿하고 아름다운 효과를 줄 수 있습니다. 이전에 언급되지 않은 이미지 흐림 효과를 클릭하세요:

css 속성 필터:

filter: blur(16px);

로그인 후 복사

blur()의 픽셀은 흐림 정도입니다.

3. mui를 사용하면 페이지를 빠르게 만들 수 있습니다

가장 귀찮았던 상태 표시줄 문제가 해결되었고, 페이지 레이아웃도 다루기 쉬워졌습니다. mui 템플릿을 사용하여 빠르게 구축할 수 있습니다.

XX Music을 예로 들어보세요:

2.1 파일 가져오기

  <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 코드

다음 HTML 코드는 사용된 mui 프레임워크 부분과 위의 상태 표시줄 관련 부분입니다. 이 mui 부분은 지역 캐러셀 부분에 관한 것입니다.

top img 완벽한 효과를 얻으려면 오버플로 속성을 유연하게 사용해야 하는 배경 이미지입니다.

APP의 헤더 부분에 사용된 위치 지정으로 인해 페이지의 주요 부분에 약 74px 높이의 패딩 탑을 추가해야 합니다.

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

로그인 후 복사

메인 CSS 코드:

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

로그인 후 복사

다양한 크기의 사진 정렬 센터에서는 한동안 아무 생각도 나지 않았다. 여기서는 탄력적 레이아웃의 교차 축 정렬을 사용해야 합니다.

#continer .footer1{
  margin-bottom: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
}

로그인 후 복사