WeChat application number (WeChat mini-APP) Development tutorial, mini-app tutorial

Application Number (mini-Program) Development tutorial, mini-program tutorial

 

TIPS:

Http://wxopen.notedown.cn/

Here, the mini-program api is reproduced.

Chapter 3: applet project structure and configuration

Find the created demo folder and import the project to your editor. The Sublime Text editor is used here.

At this time, you need to change the structure according to your project requirements. The project root directory contains several tabBar pages rendered on the home page and some app configuration files, for example, the tabBar of the Name box project contains three switching menus:

First, find the app. json file, open and configure these menus, and configure the tabBar. Then, change the configuration file to your own one.

App. json contains several configuration items:

• Pages: This is a compiled js file. The suffix. js is not required here. You can configure the correct path to apply the file normally (if the application fails to restart the developer tool, a page error will be reported directly ).

• Window: Configure some styles at the top of the page. This document is detailed.

• TabBar: Specifies the configuration items at the bottom.

• NetworkTimeout: it is useless for the moment. We recommend that you read the document.

• Add and modify the configurations as required.

• IconPath and selectedIconPath: Click to highlight the picture at the bottom menu button.

• "Text": you can remove it. If you remove it all, you will find that the tabar height at the bottom will be much reduced.

After the Json file is configured, create a file based on the project,

Demo: stores fake data. This development tool supports require. The fake data uses. js files,

The json data structure is consistent. Expose the data.

Then you can fetch the data require, which is convenient to use;

Images: Image path;

Page: pages other than tabar;

Servise: Service Delivery layer (used when debugging real data with the background );

Wxss: some common css files.

We can see that each page is associated with three different suffixes. Pages, css, and js can only follow this currently. It is a specification of the application number.

Wxss files are style files you have written, or you can directly write styles in them.

JavaScript files must be configured in pages to take effect.

Next chapter: Develop the homepage of the applet.

Chapter 4: Develop the mini-app Homepage

After various preparation and configuration, I came to the homepage for development. First, you need to implement the home page as follows:

There are many Template business cards and templates are required.

The basic components to be provided here are generally input (search box ),

Action-sheet (the right side is a bottom drop-down menu, which must be a drop-down menu ),

Scroll-view (ABC jump on the right), (there are still some problems with this implementation, and it is under attack ).

View is a block element and a style of the entire search box.

• Name Card Holder: Because this project focuses on the business card function, it is used in many places, so you need to separate the business card from the template.

• Template: defines a Template. The name of the Template is actually a scope.

• Block: loop control, a lot of business cards, must be recycled out, similar to the loop of a front-end framework that operates a lot of data.

• Custom attribute data is supported, which is used to determine online and offline business cards.

View contains some data introduction, which supports the three-object operator.

It is very convenient to introduce a template. Like the name, data is the data filled by nameData.

All data is bound to the central point.

Specific data retrieval operations are based on your data structure:

The data structure here is the same as the json data structure,

If you want to upload the data to the page

this.setData({nameData:card_list_name.data.cards,timeData:card_list_time.data.cards});

Because the page traverses nameData and timeData

Let's take a look at the printed data structure and parse and transmit it according to your structure.

You can also see some data operations here. (Operations must be performed based on the defined json data format)

Business card styles are used in common.css for many pages. This common.css is required for all pages and some initialization settings. It can be mapped to the global APP only after being referenced in pp. wxss.

Search box: bindChange indicates a change event in the input box. There is still a small problem with the support of the provided bindchange. Currently, this event can be triggered only when the focus is lost. Please wait for the improvement in the future and implement the function first.

BindInputChange: function (e) {// var self = this when a search event occurs; // this is bound, which provides windowvar Text = e. detail. value. toUpperCase (); // obtain the input content if (Text = "") {// if the input is empty, display the content otherwise show_letter = "block ";} else {show_letter = "none";} this. setData ({show_letter: show_letter, showSheet: true}); var res = nameData; get the passed data if (data_type = "name ") {} else if (data_type = "time") {res = timeData ;}; for (var k in res) {// for-in loop to get data Cardsvar data = res [k]. cards; for (var I = 0; I <data. length; I ++) {// compare the keywords to be searched in a loop If (data [I]. userName! = Null & data [I]. userName. indexOf (Text )! =-1) {data [I] ["display"] = "block "; // There is a value assignment display} else {data [I] ["display"] = "none"; // The Value assignment does not exist }}}}

Menu Bar: Click the menu bar and use the provided drop-down menu component action-sheet. The conditions for triggering the menu are as follows.

Starting from binding events:

BindButtonTapSheet: function (e) {// retrieve the bottom drop-down menu bar}

It is still necessary to make a good decision before it can be transferred.

Js Configuration:

Data initialization Data:

If this parameter is set to false, the call event cannot be called.

You have to remove it after it is called:

Cancel the event directly. (It can be divided into the exterior and the bottom of the menu bar)

// Well, it's that simple. The implementation is simple, and the experience is indeed very good.

A loading effect is also required (No animation is required for the time being, so we will consider it later .)

Loading layout

The outermost view of the Home Page

Lifecycle

Onload:function(e){this.setData({toastDisplay:”block”,htmlWrapDisplay:”none”})},onShow:function(e){this.setData({toastDisplay:”none”,htmlWrapDisplay:”block”})}

The entry is loaded.

Scan and call the photo taking function directly. You can see that the provided photo api is very fast to use. You only need to configure it as needed.

After clicking scan, you can see the following results in the developer tool.

Here, the dom length is limited, and the page structure is too long to be rendered. The company sorting is temporarily removed.

The ABC jump on the left (still in progress ).

There is also a left-slide function to delete business cards. It is really a pity that this function is not provided on the mobile end. I have to spend some time writing it myself (which will be improved later ).

QQ chat group, group number: 533707831:

 

Related reading: application number development tutorial-Article 1