微信小程序开发者工具为开发者提供了组件和API接口，下面就和大家详细介绍一下微信小程序开发组件和API接口使用教程，希望对大家有所帮助！

（一）、什么是微信小程序开发组件和API接口

微信小程序开发组件主要是完成小程序视图部分，包括文字、图片等操作。

API接口主要是完成小程序逻辑功能部分，包括网络请求、数据库存储、微信支付等功能。

（二）、API接口使用教程

下面就以豆瓣为例，带大家分析一下API接口使用教程！

1.底部导航：可以通过设置tabBar属性来实现，可以参考官网文档https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html

示例代码如下：

“tabBar”: {

“backgroundColor”: “#363636”,

“color”:”#666″,

“selectedColor”:”#fff”,

“list”: [{

“pagePath”: “pages/index/index”,

“text”: “正在热映”,

“iconPath”: “res/images/film.png”,

“selectedIconPath”: “res/images/film.png”

},

{

“pagePath”: “pages/recommend/recommend”,

“text”: “热门推荐”,

“iconPath”: “res/images/hot.png”,

“selectedIconPath”: “res/images/hot.png”

},

{

“pagePath”: “pages/search/search”,

“text”: “影片搜索”,

“iconPath”: “res/images/search.png”,

“selectedIconPath”: “res/images/search.png”

}

]

}

2.顶部banner图

顶部banner图可以通过swiper组件来实现，具体操作：组件-视图容器-swiper。复制官方实例，操作之后，看看效果图，然后进行修改调整，代码示例：

autoplay=”{{autoplay}}” interval=”{{interval}}” duration=”{{duration}}”>

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

}

})

3.展示部分

展示部分我们会用到视图容器view、媒体组件image、基础内容组件text等。

4.网络请求

网络请求可以通过js来实现，具体操作：API-网络-网络请求、示例代码：

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’//返回json格式，必须要加

}, // 设置请求的 header      success: function(res){

console.log(res.data.subjects);

that.setData({

movies:res.data.subjects

});

}

})

5. 数据交互

数据交互找到数据，绑定文档，然后再提交给逻辑层，再将逻辑层传到视图层。

具体操作流程：框架—视图层—WXML（http://www.mpgcw.com/2294.html）—事件，如图所示：

{{ message }}

Page({

data: {

message: ‘Hello MINA!’

}

})

Click me!

Page({

tapName: function(event) {

console.log(event)

}

})

以上就是微信小程序开发组件和API接口使用教程，大家可以作为参考，也可以尝试操作一下。