Summary of basic knowledge of WeChat applet development and basic knowledge of Program Development

Summary of basic knowledge of Applet development and basic knowledge of Program Development

A applet is superior to the previous account types in terms of functions, documentation, and related support. It provides interfaces available to many native programs, this makes our applets break through the limitations of H5 page applications in many aspects, and is closer to the features of native programs. Therefore, small programs have a great prospect of imagination. It provides its own view layer description language WXML and WXSS, as well as a JavaScript-based logic layer framework, and provides data transmission and event systems between the view layer and the logic layer, developers can easily focus on data and logic.

1. directory structure of the Applet

The directory structure of the applet is as follows.

Project-level files include app. js, app. json, and app. wxss. Where.jsThe suffix is a script file,.jsonThe suffix file is the configuration file,.wxssThe suffix is the style sheet file.

The page level can contain many pages, such as index and detail. Each page contains. js ,. json ,. wxml ,. wxss files, where. wxml is a page view file, which is an HTML page with custom tags.

App. js is the script code of a small program. In this file, we can listen to and process the life cycle functions of the applet, declare global variables, and call the rich APIs provided by the framework.

App. json is a global configuration for the entire applet. In this file, we can configure the page that the applet consists of, configure the background color of the applet window, configure the navigation bar style, and configure the default title.

App. wxss is the public style table of the entire applet. We can directly use the style rules declared in app. wxss on the class attribute of the page component.

A applet consists of three objects and must be placed in the root directory of the project.

 

The path + Page name of each page in the applet must be written in pages in app. json, and the first page in pages is the homepage of the applet.

Each applet page consists of four different suffix files with the same name in the same path, such as index. js, index. wxml, index. wxss, and index. json..jsThe suffix file is a script file,.jsonThe suffix file is the configuration file,.wxssThe suffix is a style sheet file,.wxmlA file with a suffix is a page structure file.

Index. json is the page configuration file: The page configuration file is unnecessary. When there is a page configuration file, the configuration item will overwrite the same configuration item in the window of app. json on this page. If no page configuration file is specified, the default configuration in app. json is directly used on the page.

 

App Service)

The logic layer of the applet development framework is written by JavaScript.

The logic layer sends the data to the view layer after processing, and receives event feedback from the view layer. Based on JavaScript, we made some modifications to facilitate the development of small programs.

• Add the App and Page methods to register programs and pages.
• The getApp and getCurrentPages methods are added to obtain the App instance and the current page stack respectively.
• Provides a wide range of APIS, such as user data, scanning, and payment capabilities.
• Each page has an independent scope and provides modularity capabilities.
• Because the framework is not running in a browser, JavaScript cannot be used in some web capabilities, such as document and window.
• All the code written by the developer will eventually be packaged into JavaScript and run at the startup of the applet until the applet is destroyed. Similar to ServiceWorker, the logic layer is also called App Service.

View Layer

The view layer of the Framework is written in WXML and WXSS and displayed by components.

The data in the logic layer is converted into a view, and the view layer events are sent to the logic layer.

WXML (WeiXin Markup language) is used to describe the structure of a page.

WXSS (WeiXin Style Sheet) is used to describe the page Style.

A Component is a basic Component of a view.

 

Basic Components

The Framework provides developers with a series of basic components that can be quickly developed by combining these basic components.

What is a component:

• A component is a basic component of the view layer.
• The component comes with some features and styles.

• A component usually includesStart tagAndEnd tag,AttributeUsed to modify this component,ContentWithin two tags.

  <tagname property="value">  Content goes here ...</tagename>

  Note: All components and attributes are in lower case, with a hyphen-Connection

API

The framework provides a wide range of native APIs for you to easily tune up the capabilities provided, such as getting user information, local storage, and payment functions.

Note:

• An API starting with wx. on is an API that listens to an event and accepts a CALLBACK function as a parameter. When this event is triggered, the CALLBACK function is called.
• Unless otherwise specified, all other API interfaces accept an OBJECT as a parameter.
• You can specifysuccess,fail,completeTo receive interface call results.

Parameter Name	Type	Required	Description
Success	Function	No	Callback Function for successful API call
Fail	Function	No	Callback Function for interface call failure
Complete	Function	No	The callback function after the interface call ends. (The callback function is executed if the call succeeds or fails)

 

2. Mini-program interface function list

The framework provides a wide range of native APIs for you to easily tune up the capabilities provided, such as getting user information, local storage, and payment functions.

1) Network API list:

Wx. request initiate a network request
Wx. uploadFile Upload File
Wx. downloadFile
Wx. connectSocket create WebSocket connection
Wx. onSocketOpen listener WebSocket open
Wx. onSocketError listening for WebSocket errors
Wx. sendSocketMessage send WebSocket message
Wx. onSocketMessage accept WebSocket messages
Wx. closeSocket disable WebSocket connection
Wx. onSocketClose listener WebSocket closed

 

2) Media API list:

Wx. chooseImage select an image from the album or take a photo
Wx. previewImage preview Image
Wx. startRecord start recording
Wx. stopRecord
Wx. playVoice play voice
Wx. pauseVoice pause voice playback
Wx. stopVoice
Wx. getBackgroundAudioPlayerState
Wx. playBackgroundAudio play music
Wx. pauseBackgroundAudio pause playing music
Wx. seekBackgroundAudio controls the music playing progress
Wx. stopBackgroundAudio stop playing music
Wx. onBackgroundAudioPlay listens to music and starts playing
Wx. onBackgroundAudioPause listens to music pause
Wx. onBackgroundAudioStop listens to music ends
Wx. chooseVideo select a video from the album or take a video

 

3) file API list:

Wx. saveFile
Wx. getSavedFileList
Wx. getSavedFileInfo
Wx. removeSavedFile delete saved file information
Wx. openDocument open the file

 

4) data API list:

Wx. getStorage get local data cache
Wx. getStorageSync get local data cache
Wx. setStorage set local data cache
Wx. setStorageSync set local data cache
Wx. getStorageInfo get information about local cache
Wx. getStorageInfoSync obtains information about the local cache.
Wx. removeStorage Delete local cache content
Wx. removeStorageSync Delete local cache content
Wx. clearStorage clears the local data cache
Wx. clearStorageSync clears the local data cache

 

5) Location API list:

Wx. getLocation get current location
Wx. chooseLocation open the map and select a location
Wx. openLocation open the built-in Map
Wx. createMapContext map component control

 

6) device API list:

Wx. getNetworkType get the network type
Wx. onNetworkStatusChange listens for network status changes
Wx. getSystemInfo get system information
Wx. getSystemInfoSync get system information
Wx. onAccelerometerChange monitors acceleration data
Wx. startAccelerometer starts listening for acceleration data
Wx. stopAccelerometer stops monitoring acceleration data
Wx. onCompassChange listens to the compass data
Wx. startCompass starts to listen to the compass data
Wx. stopCompass
Wx. setClipboardData sets the clipboard content
Wx. getClipboardData get the clipboard content
Wx. makePhoneCall: Call
Wx. scanCode Scan

 

7) interface API list:

Wx. showToast display prompt box
Wx. showLoading: display the loading prompt box
Wx. hideToast hide the prompt box
Wx. hideLoading hide the prompt box
Wx. showModal display mode pop-up window
Wx. showActionSheet display menu list
Wx. setNavigationBarTitle: Set the title of the current page
Wx. showNavigationBarLoading: displays the navigation bar loading animation.
Wx. hideNavigationBarLoading hide navigation bar loading Animation
Wx. navigateTo new window open page
Wx. redirectTo open the page in the original window
Wx. switchTab switch to the tabbar page
Wx. navigateBack returned to the previous page
Wx. createAnimation Animation
Wx. createContext create drawing Context
Wx. drawCanvas plotting
Wx. stopPullDownRefresh stop pull-down refresh Animation

 

8) WXML node information API list:

Wx. createSelectorQuery create query request
SelectorQuery. select a single node based on the selector
SelectorQuery. selectAll select all nodes based on the selector
SelectorQuery. selectViewport: select the display area
NodesRef. boundingClientRect Get layout position and size
NodesRef. scroloffset to obtain the scroll position
NodesRef. fields
SelectorQuery.exe c: Execute the query request

 

9) open interfaces:

Wx. login
Wx. getUserInfo get user information
Wx. chooseAddress: Get the user's shipping address
Wx. requestPayment initiate payment
Wx. addCard add coupons
Wx. openCard open coupon

 

3. Related Processing code 1) register the program processing code

App({  onLaunch: function(options) {    // Do something initial when launch.  },  onShow: function(options) {      // Do something when show.  },  onHide: function() {      // Do something when hide.  },  onError: function(msg) {    console.log(msg)  },  globalData: 'I am global data'})

2) registration page processing code

//index.jsPage({  data: {    text: "This is page data."  },  onLoad: function(options) {    // Do some initialize when page load.  },  onReady: function() {    // Do something when page ready.  },  onShow: function() {    // Do something when page show.  },  onHide: function() {    // Do something when page hide.  },  onUnload: function() {    // Do something when page close.  },  onPullDownRefresh: function() {    // Do something when pull down.  },  onReachBottom: function() {    // Do something when page reach bottom.  },  onShareAppMessage: function () {   // return custom share data when user share.  },  onPageScroll: function() {    // Do something when page scroll  },  // Event handler.  viewTap: function() {    this.setData({      text: 'Set some data for updating view.'    })  },  customData: {    hi: 'MINA'  }})

3) Modular JS Functions

// common.jsfunction sayHello(name) {  console.log(`Hello ${name} !`)}function sayGoodbye(name) {  console.log(`Goodbye ${name} !`)}module.exports.sayHello = sayHelloexports.sayGoodbye = sayGoodbye

Userequire(path)Introduce public code

var common = require('common.js')Page({  helloMINA: function() {    common.sayHello('MINA')  },  goodbyeMINA: function() {    common.sayGoodbye('MINA')  }})

 

4) Network Data Request Processing code

// Click the search button to call the function search: function (e) {var that = this; // display the wx in the loading prompt box before the data is loaded. showToast ({title: 'loading... ', Icon: 'loading', duration: 10000}); // initiate a request. Note that wx. request initiates an HTTPS request wx. request ({url: url + "? City = "+ that. data. inputValue + "& key =" + apiKey, data: {}, header: {'content-type': 'application/json'}, success: function (res) {var data = res. data; // send data from the logic layer to the view layer, and change the corresponding this. data value that. setData ({restation: data. result, condition: false}); // hide the wx in the loading dialog box after the data is loaded successfully. hideToast ();}})}