WeChat mini-program development-quickly master the components and API methods, and program development component api

Mini-program development-quickly master the components and API methods, and program development component APIs

The applet framework provides developers with a series of components and APIs.

The widget mainly completes the view part of the applet, such as text and image display. APIS provide logical functions, such as network requests, data storage, audio/video playback control, and open logon and payment functions.

Components

Official documents: https://mp.weixin.qq.com/debug/wxadoc/dev/component/

For development documents, I suggest you first understand the overall framework, the components it provides, and the functions of the products it uses. The same is true for interfaces. You do not need to take a closer look.

Familiar with the structure of the document, you can find the places you need to use when developing the corresponding functions during the development process, and understand and master the features during use, this is a more efficient way to learn.

The applet provides the following components:

API

Official documents: https://mp.weixin.qq.com/debug/wxadoc/dev/api/

Similarly, we first understand the API structure:

After learning about the document structure, we can start to practice. From a simple start, when you need to implement a certain interface or function, you can quickly locate which part of the document should be viewed.

Instance analysis

The following uses the Douban movie APP as an example to analyze how to find documents and develop them quickly.

With the previous knowledge of the mini-APP framework, we can easily analyze how to implement a small program such as Douban movie APP.

Bottom navigation

The implementation of the navigation at the bottom is implemented in the applet configuration file in the previous framework. Set the tabBar attribute. The setting of its specific properties can be quickly found in the document: https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html
The implementation code is as follows:

"TabBar": {"backgroundColor": "#363636", "color": "#666", "selectedColor": "# fff", "list ": [{"pagePath": "pages/index", "text": "under review", "iconPath": "res/images/film.png", "selectedIconPath ": "res/images/film.png" },{ "pagePath": "pages/recommend", "text": "Popular recommendations", "iconPath ": "res/images/hot.png", "selectedIconPath": "res/images/hot.png" },{ "pagePath": "pages/search", "text ": "Video Search", "iconPath": "res/images/search.png", "selectedIconPath": "res/images/search.png"}]}

 

Top Banner implementation

The Banner can automatically Slide left and right components. Based on the previous knowledge, we can quickly learn about the use of swiper components. Search Method: component-view container-swiper find the document, and then copy the official instance:

<swiper indicator-dots="{{indicatorDots}}"  autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">  <block wx:for="{{imgUrls}}">    <swiper-item>      <image src="{{item}}" class="slide-image" width="355" height="150"/>    </swiper-item>  </block></swiper>Page({  data: {    imgUrls: [      'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',      'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',      'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'    ],    indicatorDots: false,    autoplay: false,    interval: 5000,    duration: 1000  }})

 

 

After the results are displayed, modify the attributes of the document as needed to implement the desired functions.

Movie presentation

The presentation of a movie contains pictures, text, and so on. The introduction of each film is a group that repeats repeatedly.
Therefore, we will use the view container view, media component image, and basic content component text. These are basic components. After you are familiar with the document structure, you can find the corresponding component usage under the component directory.

Network request

The movie information displayed on the applet interface is from the network. Douban movie Open API interface, interface description page: https://developers.douban.com/wiki? Title = movie_v2

Network requests are required to obtain data through network interfaces. Of course, js can also be used. However, we have learned that network interfaces are provided, including API-Network-network requests, you can use this interface to request network data.

Sample Code:

Var url = "https://api.douban.com/v2/movie/in_theaters"; wx. request ({url: url, method: 'get', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT header: {'content-type ': 'application/json' // return json format, which must be added}. // set the request header success: function (res) {console. log (res. data. subjects); that. setData ({movies: res. data. subjects });}})

 

The above interface can be used to obtain information about the currently released Douban movies. It is easy to use and supports http and https (in debug mode ).

Data Interaction

With the interface and data. Then, how to display data to the interface, and how to provide the interface data to the logic layer, then we can find the data binding part of the document.
Sample Code:

<view> {{ message }} </view>Page({  data: {    message: 'Hello MINA!'  }})

 

In this way, you can easily learn how to transmit data from the logical layer to the view layer.

So how can I pass operations on the view layer to the logic layer? The applet components provide events, framework-view layer-WXML-events, and find the corresponding documents:
Https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/event.html
The following is an example of simple event usage:

<view id="tapTest" data-hi="WeChat" bindtap="tapName"> Click me! </view>Page({  tapName: function(event) {    console.log(event)  }})

 

The view layer transmits relevant data to the logic layer through event for processing.

These problems have been solved, and I believe that this mini-program has been completely completed, and the framework of the mini-program will be further understood. I believe this method is more attractive and easier to understand than simply reading documents and learning components one by one.