Shulou(Shulou.com)06/01 Report--

This article introduces the relevant knowledge of "what is the basic knowledge of WeChat Mini Programs's development". In the operation of actual cases, many people will encounter such a dilemma. Next, let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Basic knowledge MINA framework

To facilitate WeChat Mini Programs's development, Wechat provides Mini Program with a MINA framework, which integrates a large number of native components as well as API. Through this framework, we can easily and quickly complete the relevant Mini Program development work.

The MINA framework provides its own view layer description languages WXML and WXSS, as well as a logic layer framework based on JavaScript, and provides data transmission and event systems between the view layer and the logic layer, so we mainly focus on data and logic.

Data binding of the response

The core of the framework is a responsive data binding system.

The whole system is divided into two parts: view layer (View) and logic layer (App Service).

Through the framework, it is easy to keep the data in sync with the view. When we modify the data, we only need to modify the data in the logical layer, and the view layer will be updated accordingly.

Through the following example:

Hello {{name}}! Click me! / / This is our App Service.// Register a Page.Page ({data: 'Baixing', onChangeName: function (e) {/ / sent data change to view this.setData ({name:' MINA'})})

The above binds the name in the logical layer data to the name in the view layer through the framework, so "Hello Baixing!" is displayed when the page is opened.

When the button is clicked, the view layer sends the onChangeName event to the logic layer, and the logic layer finds the corresponding event handler. The logical layer performs the operation of setData (), changing the name from Baixing to MINA, because the data is bound to the view layer, so the view layer automatically changes to "Hello MINA!".

Page management

The framework manages the page routing of Mini Program, which can achieve seamless switching between pages and give the page a complete life cycle. All developers need to do is register the data, methods and life cycle functions of the page into the framework, and leave all other complex operations to the framework.

Basic component

The framework provides a set of basic components with Wechat style and special logic. By combining the basic components, we can easily create a powerful WeChat Mini Programs. For more information, please see the WeChat Mini Programs component documentation.

Rich API

MINA framework provides rich native API of Wechat, which can easily call up the capabilities provided by Wechat, such as access to user information, local storage, payment functions and so on.

Mini Program directory structure

Mini Program contains an app that describes the overall program and a number of page that describe their respective pages.

The body of a Mini Program consists of three files, which must be placed in the root directory of the project:

File functions app.js Mini Program launch entry file app.json Mini Program public settings, such as registered routing information app.wxss Mini Program public style sheet

A Mini Program page consists of four files, namely:

The file functions the specific logical functions of the js page, such as the logical method of page sharing, such as the structure of the wxml page. The various components provided by the MINA framework are used in this wxss page style sheet, similar to the CSS file developed by Web, to control the specific display style of the page. The json page configuration is used to configure the unique functions provided by the MINA framework, such as whether the pull refresh is enabled or not.

Note: the above four files must have the same path and file name.

The operating mechanism of Mini Program

Note that Mini Program has no concept of restarting. The main operating mechanism is as follows:

When Mini Program enters the background, the client will maintain its running state for a period of time, and after a certain period of time (5 minutes of warm official documents), Wechat will actively destroy it.

The topped Mini Program will not be destroyed by Wechat voluntarily.

Mini Program will also be destroyed when receiving a system memory warning.

Development practice

I have talked a lot about the principle, but if there is no practical practice, it is just empty talk. The following will be an accounting Mini Program as the development practice, this Mini Program is used to record daily expenses and specific spending instructions.

Before you begin, please download the Mini Program development tools.

Create a project

Here, because there is no application for AppID, the non-AppID development mode is chosen. If you want to use AppID for development, you can configure it through WeChat Mini Programs's official website. I won't go into details here, but refer to WeChat Mini Programs's official website for details.

We fill in the project name, select the project directory, click add Project, and enter the development interface of the created project, as follows:

Under the editing tab on the left, you can edit the code.

Under the debugging tab, you can carry out debugging work, such as breakpoint debugging, viewing current storage information, simulation coordinates, and so on.

Under the project tab, you can configure the current program running options, such as switching the basic library version, generating a Mini Program preview, and so on.

Create a page

Our program mainly has two pages, one is to show all the accounting records of the home page, and the other is to add accounting page. Under the development tools editing tab, click add New, and enter the file you want to create.

In the (Pages) directory above, there are four different file formats under each different page directory. In the part of basic knowledge, we have explained the specific functions of different formats, so I won't repeat them here. Then let's get into the actual coding work.

Write code 1. The specific functions of the home page include:

Statistics on the total cost

Show the summary information of each record

The main logic code of the page is as follows:

Import {loadAllRecord, deleteRecordById} from'.. /.. / services/tallyService.js'var app = getApp () Page ({data: {userInfo: {}, list: [], totalMoney: 0},... / load the saved daily expense record and count the total amount spent. FetchData () {wx.showLoading ({title: 'loading data...',}) var self = this loadAllRecords ((list) = > {var totalMoney = 0 list.forEach ((item) = > {totalMoney + = Number (item.money)}) self.setData ({list, totalMoney}) self.customerData.isFirstShow = false setTimeout () = > {wx.hideLoading ()} 1000)})}.)

The page structure code is as follows:

{{userInfo.nickName}} Total cost: {{totalMoney}} Yuan {{item.detail}} {{item.money}} Yuan {{item.time}} write down 2. Record the main functions of the page:

It is used to record the specific amount and details of the expenditure.

The main logic code of the page is as follows:

Import {addNewRecord} from'.. /.. / services/tallyService.js'var app = getApp () Page ({... OnSaveRecord () {let record = {money: this.customerData.money, detail: this.customerData.detail} addNewRecord (record, (res) = > {console.log (res) wx.navigateBack ({})

The page structure code is as follows:

Amount: expense record: keep 3. Record the Dao class

The main logic code is as follows:

Var records = [] import {formatTime} from'.. / utils/util.js'function addNewRecord ({money, detail}, callback) {let id = records.length let time = formatTime (new Date ()) let record = {id, money, detail, time} records.push (record) if (typeof callback = 'function') {callback (true)} function loadAllRecord (callback) {if (typeof callback =' function') {callback (records)} module.exports = {addNewRecord LoadAllRecord} this is the end of the introduction of "what is the basic knowledge of WeChat Mini Programs's development"? Thank you for your reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.