WeChat applet development - a quick way to master components and APIs

The WeChat applet framework provides developers with a series of components and API interfaces.

The component mainly completes the view part of the applet, such as text and picture display. The API mainly completes logical functions, such as network request, data storage, audio and video playback control, and WeChat login, WeChat payment and other functions opened by WeChat.

components

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

The applet provides the following components:

API

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

Similarly, let's first understand the structure of WeChat API:

After understanding the document structure, we can start the actual combat. From a simple start, when you need to implement a certain interface or function, you can quickly locate which part of the document you should look at.

Bottom navigation

The implementation of bottom navigation is implemented in the applet configuration file, and the tabBar property is set. For the setting of its specific properties, you can quickly locate the document: https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html
The implementation code is as follows:

 1 "tabBar": {
 2     "backgroundColor": "#363636",
 3     "color":"#666",
 4     "selectedColor":"#fff",
 5     "list": [{
 6       "pagePath": "pages/index/index",
 7       "text": "正在热映",
 8       "iconPath": "res/images/film.png",
 9       "selectedIconPath": "res/images/film.png"
10     },
11     {
12       "pagePath": "pages/recommend/recommend",
13       "text": "热门推荐",
14       "iconPath": "res/images/hot.png",
15       "selectedIconPath": "res/images/hot.png"
16     },
17     {
18       "pagePath": "pages/search/search",
19       "text": "影片搜索",
20       "iconPath": "res/images/search.png",
21       "selectedIconPath": "res/images/search.png"
22     }
23     ]
24   }

Banner can automatically slide left and right components, through the previous understanding, we can quickly understand the use of swiper components. Find method: component - view container - swiper to find the document, and then copy the official example:

 1 <swiper indicator-dots="{{indicatorDots}}"
 2   autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
 3   <block wx:for="{{imgUrls}}">
 4     <swiper-item>
 5       <image src="{{item}}" class="slide-image" width="355" height="150"/>
 6     </swiper-item>
 7   </block>
 8 </swiper>
 9 
10 Page({
11   data: {
12     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'
13     ],
14     indicatorDots: false,
15     autoplay: false,
16     interval: 5000,
17     duration: 1000
18   }
19 })

network request

The movie information and other content displayed on the applet interface are all from the Internet. Douban Movie has opened an API interface, the interface description page: https://developers.douban.com/wiki/?title=movie_v2

Obtaining data through a network interface requires network requests. Of course, js can also be used. However, we learned earlier that WeChat provides a network interface, API-network-network request, through which network data requests can be made.

Sample code:

 1 var url="https://api.douban.com/v2/movie/in_theaters";
 2     wx.request({
 3       url: url,
 4       method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
 5       header: {
 6         'Content-Type':'application/json'//返回json格式，必须要加
 7       }, // 设置请求的 header
 8       success: function(res){
 9         console.log(res.data.subjects);
10         that.setData({
11           movies:res.data.subjects
12         });
13       }
14     })

The above interface is also very convenient to use, and supports http and https (in debug mode).

Data interaction

With the interface, there is the data. So how to display data to the interface, and how to provide interface data to the logic layer, then we can find the documentation of the data binding part.
Sample code:

1 <view> {{ message }} </view>
2 
3 Page({
4   data: {
5     message: 'Hello MINA!'
6   }
7 })

This makes it easy to understand how to pass data from the logic layer to the view layer.

How events are used

https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/event.html

Bind an event handler to the component. For example bindtap, when the user clicks the component, the corresponding event handler will be found in the Page corresponding to the page.

Write the corresponding event handler function in the corresponding Page definition, and the parameter is event.

Here is an example of a simple event usage:

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