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

This article mainly explains "WeChat Mini Programs's development method". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Next, let the editor take you to learn "WeChat Mini Programs's development method"!

1. Preparatory work

Register a Wechat official account with an email that has not registered with the Wechat public platform, apply for an account, fill in the information and submit the corresponding information according to the guidelines, you can have your own Mini Program account. Log in after the registration is complete.

2: log in

We can see the AppID of Mini Program in the menu "Settings"-"Development Settings". The AppID of Mini Program is equivalent to an ID card of Mini Program platform. Later, you will need to use AppID in many places (note that it should be different from the service number or Subscription account's AppID). With Mini Program account, we need a tool to develop Mini Program.

3: install development tools

Go to the developer tools download page and download the corresponding installation package according to your operating system. Open Mini Program developer tools, use Wechat scan code to log in to developer tools, and get ready to develop your first Mini Program!

4: open the first Mini Program

Select the Mini Program project for the new project, select the hard disk path where the code is stored, enter the AppID of the Mini Program you just applied for, and give your project a nice name. Finally, check "create QuickStart Project" (Note: you have to select an empty directory to have this option), click OK, and you will get your first Mini Program. Click the top menu to compile to preview your first Mini Program on IDE.

5: compile preview

Click the compile button on the tool, you can see the performance of this Mini Program in the simulator interface on the left side of the tool, or you can click the Preview button to experience your first Mini Program on your phone by scanning Wechat.

The above sections can be viewed in [start]-[start] in the Wechat open documents.

2. Introduction of the framework

The goal of the Mini Program development framework is to enable developers to develop services with a native APP experience in Wechat in as simple and efficient as possible.

The whole Mini Program framework system is divided into two parts: logic layer (App Service) and view layer (View). Mini Program provides its own view layer description languages WXML and WXSS, as well as a JavaScript-based logic layer framework, and provides a data transfer and event system between the view layer and the logic layer, allowing developers to focus on data and logic.

Data binding of the response

At the core of the framework is a responsive data binding system that makes it very easy to keep the data synchronized with the view. When you modify the data, you only need to modify the data in the logical layer, and the view layer will be updated accordingly.

Page management

The framework manages the entire Mini Program page routing, can achieve seamless switching between pages, and gives the complete life cycle of the page. 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. Developers can combine the basic components to create a powerful WeChat Mini Programs.

Rich API

The 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.

3. Program development

When you have learned HTML+CSS+js and read the Wechat development documentation, you can easily start the development of WeChat Mini Programs.

Entrance

Each Mini Program needs to call the App method in app.js to register the Mini Program instance, bind lifecycle callback functions, error listeners, and the page does not exist listening functions.

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

The whole Mini Program has only one instance of App, which is shared by all pages. Developers can obtain globally unique App instances through the getApp method, obtain data on App or call functions that developers register on App.

/ / xxx.jsconst appInstance = getApp () console.log (appInstance.globalData) / / I am global data

Global configuration

The app.json file under the root directory of Mini Program is used to configure WeChat Mini Programs globally, determine the path of the page file, window performance, set network timeout, set multi-tab, and so on.

For more information, please see [Global configuration]

Page configuration

Each Mini Program page can also use a .json file with the same name to configure the window performance of this page, and the configuration items in the page will override the same configuration items in the window of app.json.

For more information, please see [Page configuration]

Mini Program life cycle

Register for Mini Program. Accept an Object parameter that specifies the life cycle callback of Mini Program, and so on.

Page life cycle

Register a page in Mini Program. Accept an Object type parameter that specifies the initial data of the page, lifecycle callbacks, event handlers, and so on.

module

Bring your own component library weUI

API

Rich api

At this point, I believe you have a deeper understanding of "WeChat Mini Programs's development method". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

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.