WeChat 미니 프로그램의 환영 페이지 제작에 대해

이 글에서는 (소스코드 다운로드) 관련 정보를 포함한 위챗 미니 프로그램 웰컴 페이지 제작을 주로 소개합니다. 웰컴 페이지는 애플리케이션 제작을 시작할 때 참고할 수 있습니다.

WeChat 미니 프로그램 환영 페이지 :

먼저 최종 렌더링을 살펴보겠습니다.

먼저 개발 도구를 열고 빠른 시작 프로젝트를 생성한 후 간단한 수정을 해보세요.

• 하단의 hello world를 버튼 스타일로 변경하세요.

• 상단 스타일을 수정하세요.

  버튼 구현:
• welcome.wxml

 <view class="usermotto">
 <text class="btn">开启小程序之旅</text>
 </view>

welcome.wxss

.usermotto {
 margin-top: 200px;
 border: 1px solid #405f80;
 width: 200rpx;
 height: 80rpx;
 text-align: center;
 border-radius: 5px;
}
.btn{
 font-size: 22rpx;
 font-family: MicroSoft Yahei;
 font-weight: bold;
 line-height: 80rpx;
}

배경 색상 설정:

참고: 가장 바깥쪽 뷰에서 너비와 높이를 100%로 설정하고 배경색이 잘못되었습니다. WeChat은 기본적으로 외부 페이지 레이어로 설정되어 있기 때문입니다.

다음과 같이 작성해야 합니다:

page{
 height: 100%;
 background: #b3d4db;
}

상위 설정:

app.jason

{
 "pages":[
 "pages/welcome/welcome"

 ],
 "window":{
 "backgroundTextStyle":"light",
 "navigationBarBackgroundColor": "#b3d4db",
 "navigationBarTitleText": "欢迎",
 "navigationBarTextStyle":"black"
 }
}

위 내용은 이 글의 전체 내용입니다. 모두의 공부에 도움이 되세요. 더 많은 관련 내용을 보시려면 PHP 중국어 홈페이지를 주목해주세요! wechat 애플릿에서 실시간 원형 진행 막대를 구현하는 방법 WeChat 애플릿 모니터링 제스처 슬라이딩 페이지를 전환하기 위해 wechat 애플릿 개발을 실행하는 wechat 애플릿

위 내용은 WeChat 미니 프로그램의 환영 페이지 제작에 대해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!