Wechat applet learning notes 1

Wechat applet ：QuickStart
One 、 .json Suffix JSON The configuration file
.json Sub applet configuration app.json、 Tool configuration project.config.json And page configuration page.json Let's talk about ：
1、app.json
app.json Is the global configuration of the current applet , Including the page path of the applet （pages）、 Interface performance window、 Network timeout networkTimeout、 Bottom tab etc.
pages Accept an array , Each item is a string , Specify which pages the applet consists of . Each item represents the path of the corresponding page ＋ file name
window： Set applet status bar 、 Navigation bar 、 title 、 Window background color .

{
  "window":{ "navigationBarBackgroundColor": "#ffffff", "navigationBarTextStyle": "black", "navigationBarTitleText": " Wechat interface function demonstration ", "backgroundColor": "#eeeeee", "backgroundTextStyle": "light" } }

tabBar Bottom or top of client window tab Bar for switching pages
Pay attention here ： When setting position by top Will not display icon tabBar in list Is an array , discharge 2-5 individual

networkTimeout Set the timeout of various network requests
2、page.json
page.json Every page can use , Configure the window on this page . Priority is higher than app.json high , Will be covered app.json The same setting item in
Page .json Only... Can be set window Related configuration items , So there is no need to write window This key

{
  "navigationBarBackgroundColor": "#ffffff",
  "navigationBarTextStyle": "black",
  "navigationBarTitleText": " Wechat interface function demonstration ",
  "backgroundColor": "#eeeeee",
  "backgroundTextStyle": "light" }

3、project.comfig.json
This is mainly to do some personalized configuration according to their preferences , Such as interface color 、 Compile configuration, etc , When you change the computer and reinstall the tool, you need to reconfigure
therefore

 With that in mind , The applet developer tool generates a  project.config.json, Any configuration you make on the tool will be written to this file , When you re install tools or change your computer to work , You just load the code package of the same project , The developer tool will automatically help you recover to the personalized configuration when you developed the project , It will include the editor's color 、 A series of options such as automatic compression when uploading code .
 It can be used in the project root directory  project.config.json  File to configure the project 
{
  "miniprogramRoot": "./src",
  "qcloudRoot": "./svr",
  "setting": {
    "postcss": true,
    "es6": true,
    "minified": true,
    "urlCheck": false
  }
}

Two 、WXML Template
Web programming HTML+CSS+JS,HLML It is used to describe the current page structure ,CSS Describe what the page looks like ,JS Handle the interaction between pages and users ,WXML similar HTML
The difference is ：html Frequently used div,p,span . Different tags combine different components ,wxml Package commonly used components , Common labels view,button,text etc.

3、 ... and 、WXSS style
similar CSS
Four 、JS Interaction
The latter two things will be talked about slowly