[wechat applet] 6.1 applet configuration file

6.1 Applet configuration file

An applet application will include two basic configuration files .

One is global app.json Applet configuration | Wechat open documents (qq.com) And the page itself page.json

Be careful ： Comments... Cannot appear in the configuration file

6.1.1 Global configuration app.json

pages Field —— Used to describe all page paths of the current applet , This is to let wechat customers know which directory your applet page is currently defined in

app. json Is the global configuration of the current applet , Including all the page paths of the applet 、 Interface performance 、 Network timeout 、 Bottom stab etc. .

Common quick start projects Inside app.json To configure

{
    
  "pages":[
     /* There are several sub pages in a few lines */
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle":"black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

Tips @[email protected]

6.1.1.1 Create sub page method :

1. Right-click on the newly built
   
   

2. Code save

   Source code

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

   Add a line of sub page code

   {
         
     "pages":[
       "pages/index/index",
       "pages/logs/logs",
       /* Add this line of code */
       "pages/demo02/demo02"
     ],
     "window":{
         
       "backgroundTextStyle":"light",
       "navigationBarBackgroundColor": "#fff",
       "navigationBarTitleText": "Weixin",
       "navigationBarTextStyle":"black"
     },
     "style": "v2",
     "sitemapLocation": "sitemap.json"
   }
   

   ctrl+s After the save
   

6.1.1.2 The relationship between the code line position and the page

6.1.1.3 window Field

Define the background color at the top of all pages of the applet , Text color definition, etc
1. navigationBarBackgroundColor（ Navigation bar background color ）

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
    
  ],
  "window":{
    "backgroundTextStyle":"light",
      /* Navigation bar background color */
    "navigationBarBackgroundColor": "#ffff",
    "navigationBarTitleText": "weixin",
    "navigationBarTextStyle":"black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

take #ffff Change to #0094ff result ：

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
    
  ],
  "window":{
    "backgroundTextStyle":"light",
      /* Navigation bar background color */
    "navigationBarBackgroundColor": "#0094ff",
    "navigationBarTitleText": "weixin",
    "navigationBarTextStyle":"black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

2. navigationBarTitleText（ Navigation bar title text ）

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
    
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#0094ff",
      /* Navigation bar title text */
    "navigationBarTitleText": "weixin",
    "navigationBarTextStyle":"black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

take weixin Change to My application result ：

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
    
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#0094ff",
      /* Navigation bar title text */
    "navigationBarTitleText": " My application ",
    "navigationBarTextStyle":"black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

3. navigationBarTextStyle（ Navigation bar Title Color ）

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
    
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#0094ff",
    "navigationBarTitleText": " My application ",
      /* Navigation bar Title Color */
    "navigationBarTextStyle":"black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

take black Change to white result ：

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#0094ff",
    "navigationBarTitleText": " My application ",
      /* Navigation bar Title Color */
    "navigationBarTextStyle":"white"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

take white Change to yellow result ：

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
    
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#0094ff",
    "navigationBarTitleText": " My application ",
      /* Navigation bar Title Color */
    "navigationBarTextStyle":"yellow" #  Report errors 
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

Thus note The contents of the error report can be obtained , Only color black and white
4. enablePullDownRefresh（ Whether to enable global drop-down refresh ）

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
    
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#0094ff",
    "navigationBarTitleText": " My application ",
    "navigationBarTextStyle":"white",
      /* Whether to enable global drop-down refresh */
    "enablePullDownRefresh":true
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

effect ：

5. backgroundTextStyle（ The drop-down loading The style of ）

    {
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
    
  ],
  "window":{
      /* The drop-down loading Color */
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#0094ff",
    "navigationBarTitleText": " My application ",
    "navigationBarTextStyle":"white",
    "enablePullDownRefresh":true
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

（ Now pull down loading White ） take light Change it to dark result ：

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
    
  ],
  "window":{
      /* The drop-down loading Color */
    "backgroundTextStyle":"dark",
    "navigationBarBackgroundColor": "#0094ff",
    "navigationBarTitleText": " My application ",
    "navigationBarTextStyle":"white",
    "enablePullDownRefresh":true
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

6. backgroundColor（ Background color of window ）

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
    
  ],
  "window":{
    "backgroundTextStyle":"dark",
    "navigationBarBackgroundColor": "#0094ff",
    "navigationBarTitleText": " My application ",
    "navigationBarTextStyle":"white",
    "enablePullDownRefresh":true,
    "backgroundColor":"#ff0000"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

effect ：