微信小程序開發(fā)者工具為開發(fā)者提供了組件和API接口，下面就和大家詳細(xì)介紹一下微信小程序開發(fā)組件和API接口使用教程，希望對(duì)大家有所幫助！
（一）、什么是微信小程序開發(fā)組件和API接口
微信小程序開發(fā)組件主要是完成小程序視圖部分，包括文字、圖片等操作。
API接口主要是完成小程序邏輯功能部分，包括網(wǎng)絡(luò)請(qǐng)求、數(shù)據(jù)庫存儲(chǔ)、微信支付等功能。
（二）、API接口使用教程
下面就以豆瓣為例，帶大家分析一下API接口使用教程！
1.底部導(dǎo)航：可以通過設(shè)置tabBar屬性來實(shí)現(xiàn)。
示例代碼如下：
“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組件來實(shí)現(xiàn)，具體操作：組件-視圖容器-swiper。復(fù)制官方實(shí)例，操作之后，看看效果圖，然后進(jìn)行修改調(diào)整，代碼示例：
<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.展示部分
展示部分我們會(huì)用到視圖容器view、媒體組件image、基礎(chǔ)內(nèi)容組件text等。
4.網(wǎng)絡(luò)請(qǐng)求
網(wǎng)絡(luò)請(qǐng)求可以通過js來實(shí)現(xiàn)，具體操作：API-網(wǎng)絡(luò)-網(wǎng)絡(luò)請(qǐng)求、示例代碼：
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格式，必須要加
}, // 設(shè)置請(qǐng)求的 header ? ? ?success: function(res){
console.log(res.data.subjects);
that.setData({
movies:res.data.subjects
});
}
})
5. 數(shù)據(jù)交互
數(shù)據(jù)交互找到數(shù)據(jù)，綁定文檔，然后再提交給邏輯層，再將邏輯層傳到視圖層。
具體操作流程：框架—視圖層—WXML（http://m.8833082.com/2294.html）—事件，如圖所示：
{{ message }}
Page({
data: {
message: ‘Hello MINA!’
}
})
Click me!
Page({
tapName: function(event) {
console.log(event)
}
})
以上就是微信小程序開發(fā)組件和API接口使用教程，大家可以作為參考，也可以嘗試操作一下。
