微信小程序开发—快速掌握组件及API的方法

微信小程序框架为开发者提供了一系列的组件和API接口。

组件主要完成小程序的视图部分，例如文字、图片显示。API主要完成逻辑功能，例如网络请求、数据存储、音视频播放控制，以及微信开放的微信登录、微信支付等功能。

组件

官方文档：https://mp.weixin.qq.com/debug/wxadoc/dev/component/

小程序提供了如下组件：

API

官方文档：https://mp.weixin.qq.com/debug/wxadoc/dev/api/

同样我们先了解微信API的结构：

了解了文档结构后，我们就可以开始实战了。从简单的开始，当你需要实现某个界面或功能时，能够快速定位到应该看哪部分文档。

底部导航

底部导航的实现，是在小程序配置文件实现的，设置tabBar属性。对于其具体属性的设置可以快速定位到文档：https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html
其实现代码如下：

 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可以自动左右滑动的组件，通过前面的了解，我们可以很快了解到使用swiper组件。查找方法：组件—视图容器—swiper找到文档，然后复制官方实例：

 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 })

网络请求

小程序界面显示的电影信息等内容，均是来自网络。豆瓣电影开放了API接口，接口说明页面：https://developers.douban.com/wiki/?title=movie_v2

通过网络接口获取数据需要用到网络请求，当然利用js也可以实现，但我们前面了解了微信提供了网络方面的接口，API—网络—网络请求，通过这个接口可以进行网络数据的请求。

示例代码：

 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     })

上面接口使用起来也还是很方便的，支持http和https（调试模式下）。

数据交互

有了界面，有了数据。那么如何将数据显示到界面，以及如何将界面数据提供给逻辑层，这时我们可以找到数据绑定部分的文档。
示例代码：

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

这样很容易就了解了如何将逻辑层的数据传给视图层。

事件的使用方式

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

在组件中绑定一个事件处理函数。如bindtap，当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数。

在相应的Page定义中写上相应的事件处理函数，参数是event。

下面是简单的事件使用的实例：

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 })