Framework for the development of small program analysis summary

 

1.1 micro-channel small directory structure consists of three parts, the frame page file, file tools, global file frame.

1.1.1 First, let me frame the global file. As a global file, it must be placed in the project root directory. It consists of three documents, app.wxss applet public stylesheet, app.json applet public settings, app.js small program logic, they are valid for all pages.

1. app.js used to define global data and functions that can be specified life cycle of the micro channel function applet. In addition, it can define some global functions and data, references to other pages after app.js file can directly use global functions and a library. 

2. app.json function can be set to 16: Configuration Page path (required), the configuration window performance, configuration tab navigation, configure the network timeout, configuration Debug mode, if the plug-in functionality Page (off by default) is enabled, the sub-structure configuration, Worker place the code directory, configuration capabilities (eg players, etc.) need to use back-end configuration to use the plug-in, pre-download subcontracting rules, configuration ipad applet supports screen rotation (off by default), you need to jump small list of programs, global custom component configuration, a small program interface configuration permissions, named sitemap.json position (required).

{
"pages": [
    "pages/index/index",
    "pages/me/me"

  ],
  "window": {
    "BackgroundColor": "# F6F6F6", // window background color
    "BackgroundTextStyle": "light", // style pull-down loading of only supports dark / light
    "NavigationBarBackgroundColor": "# F6F6F6", // navigation bar background color
    "NavigationBarTitleText": "any Meng", // navigation bar title text
    "NavigationBarTextStyle": "black" // Navigation Bar title color
  },
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "Text": "Home"
      },
      {
        "pagePath": "pages/me/me",
        "Text": "personal center"
      }
    ]
  },
  "sitemapLocation": "sitemap.json"
}

Focus here talk about Configuration tab navigation. We need to configure tabBar properties in app.json inside. tabBar is an object, the label can be configured to navigate the text color, the selected color, the background color of the navigation tag position, the tabBar (only bottom / top), and the custom tabBar border color, border color can be arranged on the black or white. Navigate to the tag list stored inside the array, each object list corresponding to the inside of a navigation tag. Each object where you can configure the navigation path, navigation name, the default icon, select the icon.

3. app.wxss file for CSS style has been expanded and used as the CSS. In addition to the default global style, users can also customize some global style app.wxss provided, you can easily use each item.

1.1.2 Framework page file

A small program framework consists of four page document files. Js are the logical page, wxml page structure, wxss json page style and page configuration. They all placed in the pages inside the folder.

1.1.3 Tools file

utils folder which is used to store the toolbar js function, such as some date formatting function to format a function of time and some other commonly used functions. After defining these functions, the registration will come through module.exports defined function name, in other projects ready to use.

tips: Follow-up will focus on talk about sitemap configuration.

Guess you like

Origin www.cnblogs.com/YMoonwind/p/11170079.html