Getting started with wechat applet - structure and writing entry page under the applet directory

1.1.1 files in directory

An applet page consists of four files -- js, wxml, wxss, json

1.1.2 app.js: applet logic (system method deals with global files, that is, functions and data specified in files. In the whole applet, each frame page and file can be obtained by this. )

App.json: applet global configuration (used to configure page information: including setting page path, setting bottom, network, debugging mode, setting the color and font size of navigation head). The configuration of the specific page is modified separately in the JSON file of the page. Any page needs to be registered in app.json. If it is not added in JSON, the page cannot be opened. )

Note: the json priority in the framework is higher than the global json priority.

1.1.3 app.wxss: Global interface beautification code (used to decorate page effect)

matters needing attention:

1. Each page of the applet must have. wxml and. js files. Other two types of files are unnecessary

2. The file name must be the same as the folder name of the page, such as index folder. The file can only be index.wxml, index.wxss, index.js and index.json

1.1.4 app.wxml page structure

1.1.5 pages directory

pages: it mainly stores the page files of the applet. Each folder is a page, and each page contains four files. The file name does not need to write the file suffix, and the framework will automatically find the location


Used to set the status bar, navigation bar, title and window background color of the applet. Note that the backgroundColor sub property in windows represents the background color of the window that refreshes the page when the current page appears, rather than the background color of the current page

1.1.6 utils

Used to store some. js files of the global, a common method

1.2.1 write entry page

Create the welcome folder and the files in the directory


<!-- wxml It's a file for writing the skeleton of an applet -->
<!-- <div> -->
<view class="container">
  <image class="user-avatar" src="/images/IMG_0783.JPG"></image>
  <text class="user-name">Cloud before court</text>
  <view class="moto-container">
    <text class="moto">Start a journey of applets</text>


/* Box center style */
.container {
  display: flex; /*Elastic element*/
  flex-direction: column; /*Column vertical*/
  align-items: center; /*Centered*/
/*Head size*/
.user-avatar {
  width: 200rpx;
  height: 200rpx;
  margin-top: 160rpx;
/* Nickname style */
.user-name {
  font-size: 32rpx;
  font-weight: bold;
/* Button font style */
.moto {
  font-size: 22rpx;
  font-weight: bold;

/* Button box style */
  margin-top: 200rpx;
  border: 1px solid #405f80;
  border-radius:5px;  /*Fillet rectangle*/
  text-align: center; 
  color: 405f80;

/*Overall page height and color*/
  background-color: #b3d4db;


  "pages": [
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#b3d4db ", / * navigation bar Title Color*/
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  "sitemapLocation": "sitemap.json"


.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 200rpx 0;
  box-sizing: border-box;

  font-family: MycroSoft Yahei;

Page effect:

The summary of daily learning is mainly for the sake of future reading. Of course, if you have any good suggestions, please comment.

Tags: Front-end JSON network Windows

Posted on Sun, 03 Nov 2019 14:52:48 -0800 by mccdave