微信小程序開發者工具為開發者提供了組件和API接口，下面就和大家詳細介紹一下微信小程序開發組件和API接口使用教程，希望對大家有所幫助！
（一）、什么是微信小程序開發組件和API接口
微信小程序開發組件主要是完成小程序視圖部分，包括文字、圖片等操作。
API接口主要是完成小程序邏輯功能部分，包括網絡請求、數據庫存儲、微信支付等功能。
（二）、API接口使用教程
下面就以豆瓣為例，帶大家分析一下API接口使用教程！
1.底部導航：可以通過設置tabBar屬性來實現。
示例代碼如下：
“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。復制官方實例，操作之后，看看效果圖，然后進行修改調整，代碼示例：
<swiper indicator-dots=”{{indicatorDots}}”
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.8833082.com/2294.html）—事件，如圖所示：
{{ message }}
Page({
data: {
message: ‘Hello MINA!’
}
})
Click me!
Page({
tapName: function(event) {
console.log(event)
}
})
以上就是微信小程序開發組件和API接口使用教程，大家可以作為參考，也可以嘗試操作一下。
