directory

Introduction to wechat applets

Applets and ordinary web development differences

1, you can use wechat Web developer tools to create a project, need to enter the AppID

2. Click the compile button on the tool, and you can see the performance of this small program in the simulator interface on the left side of the tool. You can also click the preview button to experience your first small program on the phone by scanning wechat.

3. Different types of files are generated in the file directory bar on the right

JSON configuration

Introduction to wechat applets

Official documents of wechat applets

Applets and ordinary web development differences

Wechat applet and wechat are essentially the same, they are both Web apps.

The main development language of small program is JavaScript, and the development of small program is very similar to the common web development. Moving from web development to applets is not expensive for front-end developers, but there are a few differences.

The web development rendering thread and script thread are mutually exclusive, which is why long script runs can cause the page to become unresponsive, whereas in applets the two are kept separate and run on separate threads. Web developers can use the DOM API exposed by various browsers for DOM selection and manipulation. As mentioned above, the logic layer of the applet is separate from the render layer. The logic layer runs in JSCore and does not have a full browser object, so it lacks the DOM API and BOM API. This difference results in some libraries familiar to front-end development, such as jQuery, Zepto, etc., not running in small programs. The JSCore environment is also different from the NodeJS environment, so some NPM packages will not run in applets.

Web developers need to face a variety of browsers, IE, Chrome, QQ browsers on the PC side, Safari, Chrome and various WebViews in iOS and Android system on the mobile side. In the process of small program development, we need to face the wechat client of the two major operating systems iOS and Android, as well as the small program developer tools for auxiliary development.

 

An applets AppID is an ID card for the applets platform

1, you can use wechat Web developer tools to create a project, need to enter the AppID

2. Click the compile button on the tool, and you can see the performance of this small program in the simulator interface on the left side of the tool. You can also click the preview button to experience your first small program on the phone by scanning wechat.

3. Different types of files are generated in the file directory bar on the right

  1. .jsonThe suffixJSONThe configuration file
  2. .wxmlThe suffixWXMLTemplate file
  3. .wxssThe suffixWXSSThe style file
  4. .jsThe suffixJSScript logic file

Pages file: stores pages, where INDEX is the home page and logs are log files

Home page Log file

Utils file: Holds public code snippets and writes public methods

App.js: Entry file for the entire applet. The applet has only one entry file

App. json: Controls the configuration of the entire applet structure, providing a place for common Settings

App.wxss: The general style of the provider, which is global

Project.config. json: Modify some configurations according to the details in the view or manually modify project.config.json

 

JSON configuration

JSON is a data format, not a programming language, and plays the role of static configuration in applets.

app.json

App. json is the global configuration of the current applet, including all page paths, interface performance, network timeout, bottom TAB, etc.

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  },
  "sitemapLocation": "sitemap.json"
}
Copy the code
  1. pagesField — Used to describe all the page paths of the current applet. This is to let the wechat client know which directory your applet page is currently defined in.
  2. windowField – defines the top background color of all pages of the applet, text color definition, etc.

 

attribute type mandatory describe
pages String Array is Setting the page Path
window Object no Sets the window appearance of the default page
tabBar Object no Sets the performance of the bottom TAB
networkTimeout Object no Set the network timeout period
debug Boolean no Set whether to enable the debug mode

window

Used to set the status bar, navigation bar, title, window background color.

attribute type The default value describe
navigationBarBackgroundColor HexColor # 000000 Navigation bar background color, such as “#000000”
navigationBarTextStyle String white The navigation bar title color can be black or white only
navigationBarTitleText String   Navigation bar title text content
backgroundColor HexColor #ffffff Background color of the window
backgroundTextStyle String dark Dropdown background font, loading diagram style, only support dark/ Light
enablePullDownRefresh Boolean false Whether to enable drop-down refresh. For details, seePage-related event handlers.
onReachBottomDistance Number 50 Distance to the bottom of the page when the pull-up event is triggered, in unit of px

project.config.json

  

Usually when you use a tool, you will have to customize it to your preferences, such as the color of the interface, the configuration of the compiler, and so on. When you reinstall the tool on a different computer, you will have to reconfigure it.

With this in mind, the applets developer tool generates a project.config.json file in the root directory of each project, and any configuration you make on the tool is written to this file. When you reinstall the tool or change computers to work, you simply load the same project code package. The developer tool will automatically restore the customization you had when you were developing the project, including options for editor colors, automatic compression when uploading code, and so on.

 

logs.json

 

Page configuration Page. json: this page. Json is actually used to represent logs.json in the Pages /logs directory, which is related to applets page configuration.

If your entire applet is blue, you can declare the top color blue in app.json. This may not be the case, as each page in your applet may have a different color to distinguish between different functional modules, so we provide page.json, which allows developers to independently define the properties of each page, such as the color of the top, whether to allow a pull-down refresh, etc.

 

JSON syntax

JSON values can be in only one of the following data formats. Any other format will trigger an error, such as undefined in JavaScript.

  1. Numbers, including floating-point and integer numbers
  2. String, which needs to be enclosed in double quotation marks
  3. Bool值，true 或者 false
  4. Array, needs to be wrapped in square brackets []
  5. Object that needs to be wrapped in braces {}
  6. Null

Also note that annotations cannot be used in JSON files, and attempts to add annotations will raise an error.

 

 

Learn together and make progress together. If there are any mistakes, please comment