Software Innovation Lab: WeChat Mini Program Development-Configuration File Code Writing

statement

1) Part of the content of this article is compiled from the information on the Internet. If you accidentally infringe on everyone's rights, you can still contact the blogger to delete it.

2) The blogger is Mengxin on the road. If there is any inappropriateness in the article, please point it out and make progress together, thank you.
 

App.json file code writing

Create a new small program, open it app.json, as shown in the figure below, it

is not difficult to find that it []represents an array, {}an object, and ""a key-value pair.

The key-value pairs are ,separated instead of ;,

.jsonComments cannot be used in the middle of the model,

For other specific reference to search engines such as Baidu,
 

Windows coding

In the initialization app.jsoncode,

There is a Windoncode description of the object,

  "window":{
    
    
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle":"black"
  }

Among them
backgroundTextStyle,: drop-down background font, loading diagram style, only supports dark/light,

navigationBarBackgroundColor: The background color of the navigation bar, such as #000000,

navigationBarTitleText: The title text content of the navigation bar,

navigationBarTextStyle: Navigation bar title color, only black/white is supported,

The example is shown in the figure below.

When we are writing code, the developer tools are accompanied by annotations, which is very convenient.

 

Page code writing

PageThere will be two lines of code in the initialized object, representing two paths,

"pages":[
    "pages/index/index",
    "pages/logs/logs"
]

The paths of all pages of the WeChat Mini Program will be presented here. Currently, there are only two pages in the Mini Program, namely indexand logs,

At the bottom, we can see that the current page is a indexpage,
 

Click on the avatar to jump to the logspage,
 

It can be found that the title of the navigation bar of this page is called View Startup Log , not Weixin like the first page .

Here to explain, the attributes we defined in app.jsonthe windowobject are common to all pages. If you want to make specific changes to some pages, you can .jsonadd statements to the file to which the page belongs , such as the logs.jsoncode in the figure above .

{
    
    
  "navigationBarTitleText": "查看启动日志",
  "usingComponents": {
    
    }
}

 

Code for the bottom touch bar

Find the folder where the applet is located, create a imagesfolder,

 

Insert a few pictures inside, which will update the folder and the pictures in the developer tool.

 

Then app.jsondefine a new object in tabBarand add the following code,

"tabBar": {
    
    
  "list": [
    {
    
    
      "pagePath": "pages/index/index",
      "text": "首页",
      "iconPath": "images/1.jpg",
      "selectedIconPath": "images/2.jpg"
    },
    {
    
    
      "pagePath": "pages/logs/logs",
      "text": "日志",
      "iconPath": "images/3.png",
      "selectedIconPath": "images/4.jpg"
    }
  ]
}

 

among them,

pagePathIt is the path of the page that the user will jump to after clicking,

iconPathIs the path of the bottom icon,

selectedIconPathIt is the path of the icon that changes the icon style after selection,

The final preview is as shown below,


 

Obviously, compared to before, there is an extra touch bar at the bottom, and when you click on different pages, the displayed icons are also different...