Understand applets

  • What is a applets? Small program is actually a tool, provide convenient services for people; Ready to use, run out, reduce the number of apps on the desktop;

B2C (people and goods) Taobao JD P2P (people and people) wechat QQ C2P (people and services) wechat mini program Alipay mini program

  • What applications are suitable for applets? For some performance requirements are not high, the frequency of use is not high, the application of simple business logic is suitable for a small program application; Such as ticket purchase, payment, mobile phone recharge and so on

Applets file structure

A small program starts with four application entry files:

  • app.js: Sets global variables for some projects
  • app.json: Every new page must be registered in this place, the project’s navigation bar and window interface Settings are relevant
  • app.wxss: Project global style
  • project.config.json: Project configuration file

A page mainly contains the following four files, the name of the four files should be the same, it is best to the folder name of the page as the standard:

  • xxx.wxml: Structure of the page
  • xxx.wxss: Style of the page
  • xxx.json: Configuration file of the page
  • xxx.js: script file for the page

Pages can be nested, but no more than five levels are recommended.

Mobile device resolution with RPX

The applet recommends using RPX units so that you can adapt to any screen

Applets are mobile development, so pay attention to the use of pixels.

  • pt: Visual units (units of length), related to the physical screen size of the device, also called logical resolution (logical units), related to raster rendering on the mobile end
  • px: Usually said pixels, physical resolution, as the screen does not change; The average designer gives a design draft in physical resolution, that is, the iPhone6 is 375 resolution, but the design is 750; becauserpx:px== 2:1, small program design draft to iPhone6 as a reference.

The relation between PT and PX: 1 pt contains multiple px; That is, a logical resolution contains multiple physical pixels. PpI (DPI) : it is calculated that the screen displays a logical resolution containing multiple physical pixels. The larger the value is, the more delicate and clear the image will be displayed. The sum of 320*320+480*480 is calculated by the square root of the screen size times the reader value. Reader value: A retinal screen, in which a logical pixel contains multiple physical pixels. A reader value of 2 is the maximum level of fineness that the eye can see.

That is, RPX is used when the desired element size fits the screen size, px is used otherwise.

The first applet page

  • To create a project, select NoneAppID, save
  • Create a new page

We can directly create a page in this way under the Pages property of the project app.json, save, and you can see a folder named Welcom on the left, which contains the four files required for the page, omit manual registration in app.js, and some Settings have been automatically configured in it. Prevent the following errors:

The solution is to call page({… }) method, equivalent to register, register when only need to write the name of the page, do not need to distinguish which type of page. All methods on this page are in page({… })

In app.json, the array element in the Pages property, which appears in the first position, is the applet’s launch page. You cannot write comments in JSON files. Otherwise, file parsing errors will be reported.

The applet uses the View tag as a container to split the document, similar to the div used in HTML.

The text tag is a text tag that can be selected on the phone only when the text is wrapped in the tag. This tag supports the parsing of escape characters.

Write WXML code

<view class='container'>
  <image class='user-avatar' src='/images/1.png'></image>
  <text class='user-name'>icessun</text>
  <view class='moto-container' bindtap='tapName'>
    <text class='moto'</text> </view> </view>Copy the code

In fact, when writing a page skeleton in WXML, notice that by default the applet wraps a page tag around the skeleton that we are writing, and you can use this tag to set the color of the entire screen.

In applets, flex layout, elastic box model is used

  display: flex;
  flex-direction: column;
  align-items: center;
Copy the code

So the first small program page we prepared, save to run, you can see the effect, the premise is to set this page as the start page, because we have not written the page jump.

Page cycle function

When creating a new page above, we noticed that some methods in the page() method are automatically generated in the js file, as follows:

OnLoad (page loading, a page is called only once)—–>onShow(page display, the page is called every time it opens)—–>onReady(the page completes the first rendering)

The data:{} property in the page() function, which holds the data to be bound to the page, usually sets a variable that receives JSON data loaded from the server and then binds it to the page via data binding.

app.jsLife cycle of

App.js is about the entire applets project methods and properties, similar to the Page Page({… }) function, also need an outer function wrapped around App({… })

App({// When the applet initialization is complete, onLaunch will be triggered (globally only once) onLaunch:function() {}, // When the applet starts, or enters the foreground display from the background, it will trigger onShow onShow:function(options) {}, // When the applet goes from the foreground to the background, it triggers onHide onHide:function() {}, // When a script error occurs or an API call fails, onError will be raised with the error message onError:function(MSG) {}}) // Application globalData: {g_isPlaying:falseG_currentMusicPost: null, // Movie API address doubanBase:'https://api.douban.com'
  }
Copy the code

Of course, you can also set some global variables inside, and then in the other page corresponding JS file through the following way to get the global variables defined inside.

var app = getApp();  
var globalData = app.globalData
Copy the code