微信小程序開發—快速掌握組件及API的方法

微信小程序框架爲開發者提供了一系列的組件和API接口。

組件主要完成小程序的視圖部分，例如文字、圖片顯示。API主要完成邏輯功能，例如網絡請求、數據存儲、音視頻播放控制，以及微信開放的微信登陸、微信支付等功能。

組件

官方文檔：https://mp.weixin.qq.com/debug/wxadoc/dev/component/

對於開發文檔，我的建議先了解其總體框架，瞭解其提供了哪些組件，再聯想到這些組件會用在哪些產品的哪些功能。對於接口也是同樣，總體瞭解，而不須要細看。

熟悉了文檔的結構，那麼在開發的過程當中，開發到相應功能的時候就能夠直接找到本身須要用到的地方，在使用的過程當中理解和掌握，這樣是我認爲更有效率的學習方法。

小程序提供了以下組件： 

API

官方文檔：https://mp.weixin.qq.com/debug/wxadoc/dev/api/

一樣咱們先了解微信API的結構： 

瞭解了文檔結構後，咱們就能夠開始實戰了。從簡單的開始，當你須要實現某個界面或功能時，可以快速定位到應該看哪部分文檔。

實例分析

下面以豆瓣電影APP爲例，分析如何去查找文檔並快速開發。

經過前面對小程序框架的瞭解，咱們很容易就能夠分析出如何實現豆瓣電影APP這樣一個小程序。

底部導航

底部導航的實現，在前面框架了解是在小程序配置文件實現的，設置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"
    }
    ]
  }

 

頂部Banner實現

Banner能夠自動左右滑動的組件，經過前面的瞭解，咱們能夠很快了解到使用swiper組件。查找方法：組件—視圖容器—swiper找到文檔，而後複製官方實例：

<swiper indicator-dots="{{indicatorDots}}"
  autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
  <block wx:for="{{imgUrls}}">
    <swiper-item>
      <image src="{{item}}" class="slide-image" width="355" height="150"/>
    </swiper-item>
  </block>
</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（調試模式下）。

數據交互

有了界面，有了數據。那麼如何將數據顯示到界面，以及如何將界面數據提供給邏輯層，這時咱們能夠找到數據綁定部分的文檔。 
示例代碼：

<view> {{ message }} </view>

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

 

這樣很容易就瞭解瞭如何將邏輯層的數據傳給視圖層。

那麼如何將視圖層的操做傳給邏輯層呢？小程序的組件提供了事件，框架—視圖層—WXML—事件，找到相應的文檔： 
https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/event.html 
下面是簡單的事件使用的實例：

<view id="tapTest" data-hi="WeChat" bindtap="tapName"> Click me! </view>

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

 

視圖層經過event將相關數據傳輸給邏輯層，進行處理。

這些問題解決了，相信這個小程序也完成的八九不離十，對小程序的框架了解也會更深刻一步。相信這種方式比純粹的看文檔、逐個組件的來學習更有吸引力，也更容易深刻理解。