WeChat 개발 시작하기 (7) weui.wxss 사용 방법

WeUI란 무엇인가요?

WeUI는 공식 디자인팀에서 미니 프로그램용으로 맞춤 제작한 기본 스타일 라이브러리로 WeChat 시각 디자인 사양을 준수합니다.

WeUI는 공식 제품이기 때문에 여기서는 WeUI를 기본으로 두었습니다. 10월 28일 IDE 업데이트 이후 IDE는 CSS를 인식 및 참조할 수 없으며, CSS에서 스타일을 가져오는 기능도 차단합니다. network.파일을 삭제하고 CSS 사이에 명확한 선을 그립니다.

》》》WeUI 소개

1. WeUI를 다운로드하세요
   weui.wxss
   참고로 [weui- wxss/dist /style/] 디렉터리, [weui-wxss/src] 디렉터리에 다운로드하지 마세요

2. weui.wxss를 미니 프로그램의 루트 디렉터리에 복사하세요
   

3. app.wxss 또는 페이지 wxss에서 weui.wxss 가져오기

   /**app.wxss**/
   @import 'weui.wxss';

4. 위에서는 weui.wxss를 성공적으로 소개했으며, weui도 단일 구성 요소 소개 스타일을 제공하며 프로세스는 위와 동일합니다.

》》》WeUI 사용 방법

1. 루트 구성 요소는 class="page"

   <view class="page">
   </view>

2. 를 사용합니다.

   페이지 스켈레톤 구성 요소는 class="pagexxx"(두 개의 밑줄 참고)를 사용합니다.

   <view class="page">
   <!--页头-->
   <view class="pagehd"></view>
   <!--主体-->
   <view class="pagebd"></view>
   <!--没有页脚-->
   </view>

3. 다른 구성 요소는 weui-로 시작되고 그 뒤에 구성 요소 이름이 옵니다(예: class="weui -footer"

   <view class="weui-footer">我是页脚</view>

4. view.weui-footer 컴포넌트와 같은 하위 컴포넌트 스타일에도 링크 및 저작권 정보가 있습니다.

   <view class="weui-footer">
   <view class="weui-footerlinks">
       <navigator url="" class="weui-footerlink">小黄象</navigator>
   </view>
   <view class="weui-footertext">Copyright © 精品专栏组</view>
   </view>

   컴포넌트와 서브컴포넌트는 밑줄 2개로 연결되어 있으므로 "-"를 사용할 때와 사용할 때를 구분할 필요가 있습니다.

다음 그림은 weui.wxss로 제작 커뮤니티 칼럼 미니 프로그램 버전이 개선되고 있습니다

[관련 추천]

위챗 공개 계정 플랫폼 소스코드 다운로드

2.

WeChat 투표 소스 코드

3.

WeChat Lala Takeaway 2.2.4 WeChat Rubik's Cube 소스 코드의 복호화된 오픈 소스 버전

위 내용은 WeChat 개발 시작하기 (7) weui.wxss 사용 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!