A small program directory structure

  • Applets contain a description of the entire programappAnd multiple descriptions of their pagespage
  • appContains three parts:app.js 、app.json,app.wxss
  • eachpageContains four parts:page.js 、page.json,page.wxss,page.wxml
  • wxmlFile: corresponds to the front endhtmlFile that expresses the structure of the page
  • wxssFile: corresponds to the front endcssFile used to describe the page style
  • jsFile: Used to express page logic
  • jsonFile: Used to express the configuration
  • In addition to the above files, applets also come with project configuration filesproject.config.jsonAnd page index profilesitemap.json
  • Directory structure

Second, small program framework

Render layer and logic layer

  • The applets runtime environment includes a rendering layer and a logic layer, both of which work on different threads.

Rendering layer

  • The rendering layer consists ofWXMLandWXSS. Under the rendering layer, WXML will be converted into JS objects, and when the data changes, the logical layer will pass the data to the rendering layer, and then render after comparing the differences. Events bound in the render layer trigger functions in the logic layer for logical processing.

Logic layer

  • The logical layer consists ofJS. inJSThe file inAppandPageMethod for program registration and page registration. Logic processing is performed at the corresponding periods of the program and page through lifecycle functions.WXMLThe event bound toJSCorresponding function in.

Three, small program components

Applets component

  • Applets officially provide component libraries, which contain many useful everyday components, including views, forms, media components, and so on

Custom Components

  • throughComponenConstructor, which allows developers to customize components, specifying properties, data, methods, and so on.
  • throughbehaviors, the developer can extract generic code and inject it into the desired components, similar tomixins
  • inlifetimesField allows you to set life cycle functions for components
  • Communication between components can be throughWXMLData binding and event listening are complete, in addition to which the parent component can passthis.selectComponentMethod gets a child component instance to access its data and methods

Four, small program ability

  • Applets officials provide developers with many built-in capabilities, including networking, storage, hardware connectivity, user login, and so on, which greatly expand the role of applets.

Five, implement a small program

The development of preparation

  • The first step in developing a small program is to need a small programAppID.AppIDNeed to pass throughThe official addressTo apply for
  • Small program development has special tools, the official download address, according to their own hardware download corresponding installation package installation

To do applet implementation

  • Directory structure:utilsBelow is the generic code,pagesDivided into four pages, respectively for the home page, to-do list, to-do details and add to-do

  • Home page

  • To-do list page

  • To-do Details page

  • Add a to-do page

  • Small procedures to achieve the function of adding and deleting to-do items, and throughwx.getStorageSync('key')andwx.setStorageSync('key', data)Store it locally

Applets publishing

  • The developer submits the code when it is finished
  • After being reviewed by the management, it can be submitted to the official review
  • After the official approval, the online version can be released
  • The small program in the article can search Lin Yiwen’s study book to see