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

This article mainly introduces the example analysis of the development of WeChat Mini Programs, the article introduces in great detail, has a certain reference value, interested friends must read it!

Sign up for a Mini Program account

1. Log in to Wechat Public platform (https://mp.weixin.qq.com/), sign up for Mini Program account, and fill in the corresponding information as prompted.

2. After successful registration, go to the home page, and click "developer Settings" in the Mini Program release process-> Mini Program Development and Management-> configuration server.

3. You will get an AppID and record the AppID, which will be used later when creating the project.

Note: if we want to experience the Mini Program on the phone as a non-administrator WeChat account, then we also need to operate the "bind developer". That is, in the "user identity"-"developer" module, you need to experience the Mini Program's WeChat account on the binding. The default registration account and experience of this tutorial is to use the administrator Wechat account.

Download Wechat web developer tools

In order to help developers develop simply and efficiently, WeChat Mini Programs launched a new developer tool that integrates the functions of development and debugging, code editing and program release.

1. Download page: https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=201715

According to the system, select the corresponding tool version to download

2. The tool includes three page cards: edit, debug and project.

(1) the editing area can code the current project and add, delete and rename files and other basic operations.

(2) there are three main functional areas for program debugging: simulator, debugging tools and Mini Program operation area.

(3) the project page card has three main functions: display current project details, submit preview and submit upload, and project configuration.

Note: when starting the tool, the developer needs to use the WeChat account that has been successfully bound in the background to scan the QR code to log in. All subsequent operations will be based on this Wechat account.

III. Write examples of Mini Program

1. Instance directory structure

? Test ├─ page │ └─ index │ ├─ index.js │ ├─ index.json │ ├─ index.wxml │ └─ index.wxss ├─ app.js ├─ app.json └─ app.wxss

2. Example file description and source code

A Mini Program contains an app (body) and multiple page (pages)

(1) app is used to describe the overall program, composed of three files, .js suffix is a script file, .json suffix is a configuration file, .wxss suffix is a stylesheet file, which must be placed in the root directory of the project.

App.js is Mini Program script code (must), in this file you can listen to and process Mini Program's life cycle functions, declare global variables, and call the rich API provided by the framework.

? App ({onLaunch: function () {console.log ('App Launch')}, onShow: function () {console.log (' App Show')}, onHide: function () {console.log ('App Hide')}, globalData: {hasLogin: false}})

App.json is the global configuration (required) of the entire Mini Program, which is used to globally configure WeChat Mini Programs, determine the path of the page file, window performance, set network timeout, set multi-tab, and so on. Take an array, each of which is a string, to specify which pages the Mini Program consists of. The [path + page name] of each page in WeChat Mini Programs needs to be written in the pages of app.json, and the first page in pages is the home page of Mini Program.

{"pages": ["page/index/index"], "window": {"navigationBarTextStyle": "black", "navigationBarTitleText": "Welcome Page", "navigationBarBackgroundColor": "# fbf9fe", "backgroundColor": "# fbf9fe"}, "debug": true}

App.wxss is the public stylesheet (optional) for the entire Mini Program.

Page {background-color: # fbf9fe; height: 100%;} .container {display: flex; flex-direction: column; min-height: 100%; justify-content: space-between;}

(2) page is used to describe a page. A page consists of four files. Here, take the home page index as an example. Each Mini Program page is composed of four different suffixes with the same name under the same path, such as index.js, index.wxml, index.wxss and index.json. The files of the .js suffix are script files, the files of the .json suffix are configuration files, the files of the .wxss suffix are stylesheet files, and the files of the .wxml suffix are page structure files.

Index.js is the script file of the page (must), in which we can monitor and process the page's life cycle functions, get Mini Program instances, declare and process data, respond to page interaction events, and so on.

Page ({data: {title:' Mini Program', desc:'Hello Worldwide'})

Index.wxml is a page structure file (required).

Title: {{title}} description: {{desc}}

Index.wxss is a page stylesheet file (optional), and when there is a page stylesheet, the style rules in the page's stylesheet override the style rules in app.wxss. If you do not specify a style sheet for the page, you can also use the style rules specified in app.wxss directly in the structure file of the page.

.header {padding: 80rpx; line-height: 1;} .title {font-size: 52rpx;} .header {margin-top: 10rpx; color: # 888888; font-size: 28rpx;}

Index.json is a page profile (optional), and when there is a profile for the page, the configuration item overrides the same configuration item in app.json 's window on that page. If there is no specified page profile, the default configuration in app.json is used directly on that page. There is no need to specify here.

Tips:

a. To make it easier for developers to reduce configuration items, Mini Program stipulates that the four files describing the page must have the same path and file name

b. Mini Program provides a wealth of API, you can choose according to your own needs (https://mp.weixin.qq.com/debug/wxadoc/dev/api/?t=201715)

IV. Test Mini Program examples

1. Open Wechat web developer tool and select "Local Mini Program Project".

2. Fill in Mini Program's AppID and project name, select the Mini Program instance folder written in step 3, and click "add Project".

3. If the following effect occurs, then congratulations, your first Mini Program project has been written successfully! Click on the left sidebar "Edit", you can also modify the code directly in the right editing window, save (CTRL+S) and refresh (F5) will take effect.

4. If you want to see the effect of Mini Program projects on your phone, click "Project" in the left sidebar, click "Preview" to generate a QR code, open Wechat scan, and you can see it.

The above is all the contents of the article "developing WeChat Mini Programs's example Analysis". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

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.