首頁 >微信小程式 >小程式開發 >小程式API可以實現什麼功能?

小程式API可以實現什麼功能?

青灯夜游
青灯夜游轉載
2020-05-06 09:18:033074瀏覽

小程式API可以實現什麼功能?

什麼是微信小程式API,按照百度上的解釋,API是應用程式接口,是一些預先定義的函數,讓開發人員無需訪問源碼就可以訪問一組例程的能力。簡單說就是可以方便調起微信提供的能力,小程式利用API可以實現例如網路請求、資料儲存、影音播放控制,以及微信開放的微信登入、微信支付等功能。

微信小程式框架為開發者提供了一系列的元件和API介面。對於開發文檔,建議先了解其整體框架,了解其提供了哪些元件,再聯想到這些元件會用在哪些產品的哪些功能。對於介面也是一樣,整體了解,而不需要細看。

熟悉了文件的結構,那麼在開發的過程中,開發到相應功能的時候就可以直接找到自己需要用到的地方,在使用的過程中理解和掌握,這樣是我認為更有效率的學習方法。

小程式提供以下元件:

小程式API可以實現什麼功能?

同樣我們先了解微信API的結構: 

小程式API可以實現什麼功能?

了解了文檔結構後,就可以開始實戰了。從簡單的開始,當你需要實現某個介面或功能時,能夠快速定位到應該看哪部分文件。以下透過豆瓣電影小程式開發實例,了解利用API開發可以實現哪些功能。

底部導覽

底部導航的實現,在前面框架中了解是在小程式設定檔實現的,設定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 } ] }

頂部Banner實作 

Banner可以自動左右滑動的元件,透過前面的了解,我們很快就能了解到使用swiper元件。尋找方法:元件—視圖容器—swiper找到文檔,然後複製官方實例:

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

查看效果出現後,再根據自己的需求對照文檔修改屬性實現自己想要的功能即可。

電影展示部分

電影展示部分包含了圖片、文字等,而每部影片的介紹又是一組,不斷循環重複。因此我們會用到視圖容器view、媒體元件image、基礎內容元件text等。這些都是基本的元件,熟悉了文件結構後,在元件目錄下方尋找對應元件用法即可。

網路請求

小程式介面顯示的電影資訊等內容,皆來自網路。豆瓣電影開放了API接口,接口說明頁面:https://developers.douban.com/wiki/?title=movie_v2透過網絡接口獲取數據需要用到網絡請求,當然利用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 }); } })

上面介面即可取得到豆瓣電影的正在上映電影資訊。使用起來也還是很方便的,支援http和https(調試模式下)。

資料互動

有了介面,有了資料。那麼如何將資料顯示到介面,以及如何將介面資料提供給邏輯層,這時我們可以找到資料綁定部分的文件。  

範例程式碼: 

{{ message }} Page({ data: { message:\'Hello MINA!\' } })

這樣很容易就了解如何將邏輯層的資料傳遞給檢視層。那麼如何將視圖層的操作傳給邏輯層呢?小程式的元件提供了事件,框架—視圖層—WXML—事件。以下是簡單的事件使用的實例: 

Click me!Page({ tapName: function(event) {console.log(event) } })

視圖層透過event將相關資料傳送給邏輯層,進行處理。

小程式API介面方便了我們開發小程序,微信公眾平台訊息介面為開發者提供了一種新的訊息處理方式。微信公眾平台訊息介面為開發者提供與使用者進行訊息互動的能力。

推薦:《小程式開發教學

以上是小程式API可以實現什麼功能?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文轉載於:jisuapp.cn。如有侵權,請聯絡admin@php.cn刪除