About the production of the welcome page in WeChat mini program

This article mainly introduces the production of WeChat applet welcome page including (source code download) related information. The welcome page is implemented here, which will be used when starting to make applications. Friends who need it can refer to it

WeChat Mini Program Welcome Page:

Let’s take a look at the final rendering:

##First open the development tools and create a quick start project, it’s simple Modify it.

• Rename the Index folder to welcome;

• Change the hello world at the bottom Add a background color to a button-like style;

• ; Modify the top style;

Button implementation:

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

Background color settings:

Note: Setting the width and height to 100% in the outermost view and adding a background color are invalid. Because WeChat defaults to a layer of pages outside.

So you need to write it like this:

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

Top settings:

app.jason

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

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

The above is the entire content of this article. I hope it will be helpful to everyone’s study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

How to implement real-time circular progress bar in WeChat applet

WeChat applet monitors gesture sliding Implementation of switching pages

WeChat applet development running WeChat applet

The above is the detailed content of About the production of the welcome page in WeChat mini program. For more information, please follow other related articles on the PHP Chinese website!