mui 프레임 워 크 모 바 일 개발 초기 체험 상세 설명

앞.  말.
블 로 거들 은 최근 모 바 일 앱 을 접 하면 서 몇 가지 팁 을 배 워 공유 했다.
1.상태 표시 줄 설정
현재 절대 다수의 앱 을 열 면 상태 표시 줄 이 앱 과 하나 가 되 어 아름 다 울 뿐만 아니 라 전체 와 조 화 를 이룬다.
블 로 거들 은 중도 강박 증 환자 인 데,꼭대기 에 있 는 작은 검 은 줄 이 정말 나 를 불편 하 게 한다.
우선,우 리 는 HBuilder 에 모 바 일 앱 프로젝트 를 새로 만 들 었 다.
1.1 몰입 형 상태 표시 줄(상태 표시 줄 투명)
일반적으로 전체 페이지 가 그림 일 때 상태 표시 줄 을 투명 하 게 합 니 다.
우선,현재 환경 이 몰입 식 상태 표시 줄 을 지원 하 는 지 확인 합 니 다.검 측 문:

<script type="text/javascript">
  document.addEventListener('plusready', function(){
    //          
    alert(plus.navigator.isImmersedStatusbar());
    
  });
</script>

기본 값 은 지원 되 지 않 습 니 다.false 가 팝 업 됩 니 다.환경 을 지원 하려 면 프로젝트 의 프로필 manifest.json 을 수정 해 야 합 니 다.
프로젝트 아래 에 manifest.json 파일 이 있 습 니 다.열 면 코드 보 기 를 엽 니 다.

코드 보기"plus"에 추가

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

그림 에서 보 듯 이:

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

터미널 지원:

Android 4.4 및 이상 시스템 지원;

iOS 7.0 및 이상 시스템 지원
1.2 상태 표시 줄 전체 화면
상태 표시 줄 전체 화면 은 상태 표시 줄 이 없고 전기량,신 호 를 표시 하지 않 습 니 다.
이 효 과 는 JS 파일 에 문 구 를 추가 하 는 것 입 니 다.

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

효 과 는 다음 과 같 습 니 다:

1.3 상태 표시 줄 배경 색
배경 색 을 수정 하 는 것 은 보통 페이지 상단 배경 색 이 단색 인 장면 에 사용 되 고 페이지 와 일치 하 는 배경 색 으로 수정 하여 페이지 를 더욱 조 화 롭 게 합 니 다.

//          
plus.navigator.setStatusBarBackground('#6495ED');

Android 플랫폼 에 서 는 이 기능 을 지원 하지 않 습 니 다.큰 신 이 있다 면 많이 가르쳐 주세요.
2.털 유리 효과
그림 의 모호 화 는 사람 에 게 몽롱 하고 아름 다운 효 과 를 줄 수 있다.이전에 언급 하지 않 았 던 그림 모호 효 과 를 누 르 십시오.
css 속성 filter:

filter: blur(16px);

blur()의 픽 셀 은 모호 정도 입 니 다.
3.mui 를 사용 하여 빠 른 페이지 구축
앞에서 저 를 가장 괴 롭 혔 던 상태 표시 줄 문제 가 해결 되면 페이지 레이아웃 이 쉬 워 집 니 다.mui 템 플 릿 으로 빠르게 구축 할 수 있 습 니 다.
XX 음악 을 예 로 들 면:
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.2HTML 코드
아래 HTML 코드 는 사용 하 는 mui 프레임 부분 과 상기 상태 표시 줄 관련 부분 입 니 다.이 mui 는 지역 순환 방송 부분 입 니 다.
상단 img 은 배경 그림 입 니 다.바깥쪽 패키지 의 div 가 필요 합 니 다.overflow 속성 을 활용 해 야 완벽 한 효 과 를 얻 을 수 있 습 니 다.
APP 의 header 부분 은 포 지 셔 닝 을 사용 하기 때문에 페이지 의 주체 부분 은 74px 정도 의 padding-top 을 추가 해 야 합 니 다.

  <div class="mui-slider">
       <div class="mui-slider-group">
         <div class="mui-slider-item">
                 
         </div>
         <div 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>
          
          <div class="datu">
            <img src="img/GD.jpg"/>
          </div>
          
          <p class="geci">A Boy - G-DRAGON</p>
          
          
         </div>
         <div class="mui-slider-item">
                 
         </div>
       </div>
       <div class="mui-slider-indicator">
        <div class="mui-indicator"></div>
        <div class="mui-indicator mui-active"></div>
        <div class="mui-indicator"></div>
       </div>
    </div>

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

효과 보이 기:


할 말 이 있다
블 로 거들 이 블 로 그 를 쓰 는 것 도 자신 을 향상 시 키 려 는 것 이 고,또 큰 신의 지 도 를 청 한다.
또 프레임 워 크 가 좋 긴 하지만 블 로 거들 은 네 이 티 브 코드 를 먼저 파악 해 야 한다 고 생각한다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.