微信小程序開發(fā)者工具為開發(fā)者提供了組件和API接口，下面就和大家詳細介紹一下微信小程序開發(fā)組件和API接口使用教程，希望對大家有所幫助！

（一）、什么是微信小程序開發(fā)組件和API接口

微信小程序開發(fā)組件主要是完成小程序視圖部分，包括文字、圖片等操作。

API接口主要是完成小程序邏輯功能部分，包括網絡請求、數(shù)據庫存儲、微信支付等功能。

（二）、API接口使用教程

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

1.底部導航：可以通過設置tabBar屬性來實現(xiàn)，可以參考官網文檔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組件來實現(xiàn)，具體操作：組件-視圖容器-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來實現(xiàn)，具體操作：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. 數(shù)據交互

數(shù)據交互找到數(shù)據，綁定文檔，然后再提交給邏輯層，再將邏輯層傳到視圖層。

具體操作流程：框架—視圖層—WXML（http://www.mpgcw.com/2294.html）—事件，如圖所示：

{{ message }}

Page({

data: {

message: ‘Hello MINA!’

}

})

Click me!

Page({

tapName: function(event) {

console.log(event)

}

})

以上就是微信小程序開發(fā)組件和API接口使用教程，大家可以作為參考，也可以嘗試操作一下。