WeChat mini-app tutorial (article 4), mini-app tutorial Article 4

Mini-program tutorial (article 4), mini-program tutorial Article 4

Basic Framework of Applet development and its restrictions and Optimization

Basic Development Framework (MINA Framework)

└ ── Project-folder /·································· project directory

Pages-pages /···································· · page Directory

│ Choose-index /··································· index page

│ Index ── index. js · index page logic

│ Index ── index. wxml · index page Structure

│ Index ── index. wxss · index page style

│ ─ ── Index. json · index page configuration (partial)

│ └-Logs /··································· · logs page

│ ├-Logs. js · logs page logic

│ ├-Logs. wxml · logs Page Structure

│ └-Logs. wxss · logs Page Style

├-Utils /···································· · Public Script directory

│ └ ── Util. js · tool scripts

├ ── App. js · Application program Logic is used to define the logic of the entire application.

It is used to listen for and process the life cycle functions of applets and declare global variables.

├ ── App. json · application configuration (global) global configuration of the entire Applet

Configure the page on which the applet is composed, and configure the background color of the applet window, etc.

└ ── App. wxss · Application public style is used to set the entire application public Style

1. The app function is a global function used to create an application instance. Each application has its own lifecycle.

2. page is also a global function used to create page objects.

3. wxml is an XML syntax, not an HTML syntax. Simply put: wxml ≈ xml + Event System + template engine

4. The json file is a configuration file created on demand. However, app. json must be created

5. All configuration or settings on the page will take precedence over global configuration or settings, that is, the local configuration will overwrite the global configuration.

6. WXSS has most CSS features and has been expanded and modified at the same time. The size unit (rpx) can be adaptive according to the screen width. Currently, only a few selectors are supported (. class/# id/element, element/: after/: before)

7. the file names in each folder are uniform, with only different suffix names, because the json configuration file will eventually integrate all the pages into one page, with the same name, associate the page with the logic js and style.

8. when the application starts, the app under the project directory is automatically executed. js file in app. js creates an application instance by calling the global App ([option]) method. Some specific methods specified by parameters are executed at specific execution times, that is, the lifecycle event method. App. js and app. json are required.

Life Cycle functions of a Applet

Attribute

	Type	Description	Trigger time
OnLaunch	Function	Life Cycle Function-listens to applet Initialization	When the applet Initialization is complete, onLaunch is triggered (only once globally)
OnShow	Function	Life Cycle Function-listener for applet display	OnShow is triggered when the applet is started or enters the foreground display from the background.
OnHide	Function	Lifecycle functions-monitor hidden applets	When a applet enters the background from the foreground, onHide is triggered.
Others	Any	Developers can add any function or data to the Object parameter, and use this to access

Lifecycle Functions

• OnLoad: page loading

• A page is called only once.

• The parameters on the receiving page can be used to obtain the query in wx. navigateTo, wx. redirectTo, and <navigator/>.

• OnShow: page display

• Each time the page is opened, it is called.

• OnReady: the page is rendered for the first time.

• A page is called only once, indicating that the page is ready and can interact with the view layer.

• Set the interface settings, such as wx. setNavigationBarTitle, after onReady.

• OnHide: Page hiding

• It is called when navigateTo or the tab at the bottom switches.

• OnUnload: unmount the page

• It is called when redirectTo or navigateBack is used.

• • Page initial data, lifecycle functions, and event processing functions

  • Attribute

    	Type	Description
    Data	Object	Initial page data
    OnLoad	Function	Lifecycle function-listen to page loading
    OnReady	Function	Life Cycle Function-listener page first rendered
    OnShow	Function	Life Cycle Function-listener page display
    OnHide	Function	Lifecycle functions-hide a listener page
    OnUnload	Function	Life Cycle Function-uninstall the listener page
    OnPullDownRefresh	Function	Page-related event processing functions-listen to user drop-down actions
    OnReachBottom	Function	Processing functions of base-touch events on the page
    Others	Any	Developers can add any function or data to the object parameter, and use this in functions on the page to access

    Page Routing

    All the routes on all pages in the Applet are managed by the framework. The routing trigger mode and page lifecycle functions are as follows:

    Routing Method	Trigger time	Post-route page	Pre-route page
    Initialization	The first page opened by the Applet	OnLoad, onShow
    Open New Page	Call API wx. navigateTo or use components <navigator/>	OnLoad, onShow	OnHide
    Page redirection	Call API wx. redirectTo or use components <navigator/>	OnLoad, onShow	OnUnload
    Page return	Call API wx. navigateBack or press the return button in the upper left corner.	OnShow	OnUnload)
    Tab Switch	Switch tabs in Multi-Tab Mode	Enable onLoad, onshow for the first time; otherwise, onShow	OnHide

    Selector

    Currently, the following selectors are supported:

    Selector	Example	Example description
    . Class	. Intro	Select All components with class = "intro"
    # Id	# Firstname	Select a component with id = "firstname"
    Element	View	Select all view Components
    Element, element	View, checkbox	Select view components and all checkbox components for all documents
    : After	View: after	Insert content behind the view component
    : Before	View: before	Insert content in front of the view component

    Dimension Unit

    Rpx (responsive pixel): adaptive to screen width. Specify that the screen width is 750rpx. For example, if the screen width of iPhone 6 is 375px and there are 750 physical pixels in total, 750rpx = 375px = 750 physical pixel, and 1rpx = 0.5px = 1 physical pixel.

    Rem (root em): specifies that the screen width is 20rem; 1rem = (750/20) rpx.

    Suggestion: when developing small programs, designers can use iPhone6 as the standard for visual drafting.

    Device	Rpx conversion px (screen width/750)	Px is converted to rpx (750/screen width)
    IPhone 5	1rpx = 0.42px	1px = 2.34rpx
    IPhone 6	1rpx = 0.5px	1px = 2rpx
    IPhone6 Plus	1rpx = 0.552px	1px = 1.81rpx

    Javascript restrictions and Optimization

    (1) restrictions:

    • The ability to pass in strings to execute code is disabled.

    For security reasons, the ability to execute code by passing in strings is disabled. Specifically, the native functions disabled include new Function, eval, and Generator. This is also effective to avoid xss problems similar to H5.

    The Disabled functions have a significant impact on our development. They should be converted from string to json. In the past, we used new functions and eval to process cgi return in the background. (Mobile terminals are generally encapsulated in zepto and other frameworks). You need to change the specific implementation of Applet development.

    • APIS related to the browser BOM are none.

    Among these BOM items, the biggest impact on development should be the absence of cookies. Because other functions, such as storage, have similar processing methods for small programs. Cookies are related to background logon in web development. There is no Cookie in the applet. to be compatible with the login management of most web apps, cookies are used. When a applet sends a request, the client can dynamically set a cookie for the request Header to send packets.

    Note that the cookie itself cannot be read and written on the client. Because there is no cookie, The csrf problem in H5 is theoretically fundamentally solved. Whether the applet has other client security problems requires technical and time testing ~

    (2) Optimization

    • Logon:

    In H5, the code is usually obtained through url redirection through authorization; In the applet, the code is obtained through wx. login, which avoids the previous logon redirection problem.

    • Storage:

    The applet uses storage to replace localstorage and sessionstorage in H5. The storage size of each applet is 10 MB, supporting synchronization and Asynchronization.

    • Payment path is no longer limited

    (3) inconvenience

    1) Each page needs to be manually registered in app. json. If the page is not registered, the page is not executed.

    2) there are 5 restrictions on opening pages. during development, you must control the number of opened pages.

    Wxss:

    • Wxss no longer supports media queries

    • Added app flex Layout

    • Introduce the concept of rpx

    Rpx (responsive pixel): adaptive to screen width. Specify that the screen width is 750rpx. For example, if the screen width of iPhone 6 is 375px and there are 750 physical pixels in total, 750rpx = 375px = 750 physical pixel, and 1rpx = 0.5px = 1 physical pixel.

    • The background image cannot be used in wxss. This is related to the framework design philosophy that everything is component.

    • Wxss animation not supported (currently)

    • Multi-layer selector. classA {}-supported;. classA. classB {}-not supported (api description indicates that only single-layer selector is supported, and sometimes multi-layer reconstruction test is supported)

    (4) read-only data in index. js

    In page js, the data must be specified as read-only. The Framework is one-way data binding. The View is not automatically updated when you modify the data. to update the view, you must use the setData () method. When setData () is used to update a View, it is updated only when it is compared with the data in Diff. In this way, if data is directly modified, the data in the data is easily inconsistent with the View.

    • The data set by setData at a time cannot exceed kb. Avoid setting too much data at a time.

    • Templates, which have their own independent scopes.

    • Support for... In ES6... Expand module data.