WeChat applet development-create a welcome page

Applet development-create a welcome page. in the previous article, we introduced the basic directory structure of the applet and the role of each file.
This article will create the first page with you. welcome to the page.

Let's take a look at the final: Below is the WXML code of the welcome page:

 
   
      
       
   
    
{UserInfo. nickName }}
     
    
      
   
    
Welcome to Applet development
     
  
 

The following is the WXSS code of the welcome page:

/**index.wxss**/.userinfo {  display: flex;  flex-direction: column;  align-items: center;}.userinfo-avatar {  width: 128rpx;  height: 128rpx;  margin: 20rpx;  border-radius: 50%;}.userinfo-nickname {  color: #aaa;}.userinfo image{  width: 200rpx;  height: 200rpx;  border-radius: 50%;}.usermotto {  margin-top: 200px;  border: 1px solid #405f80;  width: 250rpx;  height: 80rpx;  text-align: center;  border-radius: 5px;}.btn{  font-size: 22rpx;  font-family: MicroSoft Yahei;  font-weight: bold;  line-height: 80rpx;}page{  height: 100%;  background: #ECF8EB;}

Background color settings:

Note: In the most external view, setting the width and height of is invalid when adding background color. By default, a page exists.

Therefore, you need to write as follows:

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

Top settings:

The app. jason code is as follows:

{"Pages": ["pages/welcome"], "window": {"backgroundTextStyle": "light", "navigationBarBackgroundColor": "# ECF8EB ", "navigationBarTitleText": "Welcome", "navigationBarTextStyle": "black "}}

More small program development-create a welcome page related articles, please follow the PHP Chinese network!