Applet code constitutes

In the last chapter, through the development of tools to quickly create a QuickStart project. You may notice that the project generated inside the different types of files:

1. .json Suffix  JSON profile
2. .wxml Suffix  WXML template file
3. .wxss Suffix  WXSS style file
4. .js Suffix  JS script logic file

Next we look at the role of each of these four documents.

 

 

[1] JSON configuration

JSON is a data format, not a programming language, role in the applet, JSON played statically configured.

We can see in the root directory of a project  app.json and  project.config.json, in addition  pages/logs directory there is a  logs.json, we turn to explain their purpose.

(1) Small Configuration app.json

  app.json The current global configuration applets, including all of the pages path applet interface performance, network timeout, the bottom of the tab and so on. QuickStart project inside the  app.json configuration as follows:

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  },
  "sitemapLocation": "sitemap.json"
}

 We would like to explain the meaning of the configuration of each item:

1. pagesField - all used to describe the current applet Page path, which is to allow the client to know the current micro-channel your applet page which is defined in the directory.
2. windowField - definition of applet background color of the top of all pages, text color definitions.

(2) can be divided into global configuration file and setting a single page

  ① global configuration: under the root directory of small  app.json files used for small micro-channel global configuration program, the decision of the page file path, show window, set the network timeout, set up a multi-tab and so on.

{
   / * String, required, Page path list * / 
  " Pages and the " : [
     " Pages and the / index / index " ,
     " Pages and the / logs / logs "
  ],
  / * Object, optional, the overall performance of the default window * / 
  " window " : {
     / * String, defaults dark, dropdown background font, loading chart styles, supports only dark and Light * / 
    " backgroundTextStyle " : " Light " ,
     / * HexColor, defaults # 000000, navigation bar background color, such as 000000 # * / 
    " navigationBarBackgroundColor " : " #fff " ,
     / * String, default is empty, the navigation bar title text * / 
    " navigationBarTitleText " : " Oda blog " ,
     / *navigationBarTextStyle, string, default white, the color of the navigation bar title, only supports black and White * / 
    " navigationBarTextStyle " : " black "
  },
  / * Indicates a position sitemap.json; default 'sitemap.json' i.e. in the name of the same directory app.json sitemap.json file * / 
  " sitemapLocation " : " sitemap.json " 
}

  ② page layout: each small page program can also use the same name as the  .json file to configure the window performance this page, the page configuration items will be covered by  app.json the  window same configuration items. ()

(3) global configuration attributes

  The small root directory  app.json file used to program the micro channel small global configuration. Contents of the file into a JSON object with the following attributes:

  Configuration Item

 

  

   pages：

    It is used to specify which pages consisting of applets, each of which corresponds to the path of a page (including file name) information. File names do not have to write the file extension, the framework will automatically go looking for a position  .json,  .js,  .wxml,  .wxss to process four files. An array of first term represents the applet initial page (home page). Applet add / reduce page, you need to modify the pages array. Such as the development directory:

 

  

  

  window

  The status bar is used to set applet, navigation bar, title, window background color.   

Attributes	Types of	Defaults	description	Minimum version
navigationBarBackgroundColor	HexColor	#000000	Navigation bar background color, such as #000000
navigationBarTextStyle	string	white	Navigation Bar title color, only supports  black / white
navigationBarTitleText	string		Navigation bar title text
navigationStyle	string	default	Navigation bar style, only supports the following values: default default style custom custom navigation bar, leaving only the upper right corner of capsules button. See note 2.	6.6.0 Client WeChat
backgroundColor	HexColor	#ffffff	Background color of the window
backgroundTextStyle	string	dark	Loading the pull-down style, only supports  dark / light
backgroundColorTop	string	#ffffff	The background color of the top of the window, only iOS support	WeChat client 6.5.16
backgroundColorBottom	string	#ffffff	The background color of the bottom of the window, only iOS support	WeChat client 6.5.16
enablePullDownRefresh	boolean	false	Whether to open the global pull-down refresh. See  Page.onPullDownRefresh
onReachBottomDistance	number	50	Distance from the bottom of the page, the unit is bottoming px pull the trigger on the event page. See  Page.onReachBottom
pageOrientation	string	portrait	Set screen rotation support  auto/  portrait /  landscape  See  the display area in response to changes in	2.4.0 (auto) / 2.5.0(landscape)

 

kill

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

.