摘要：二開發工具與資源平臺微信開發者工具主要用于敲網頁代碼，但是最主要用來進行網頁效果預覽。八總結以上微信小程序旨在實現一些基本功能，也存在一些不合理之處，如對項目有疑問或不同見解的同仁可與本人聯系郵箱。

    相信各位碼農們都有過要調用各大資源網站提供的API的經歷，但是在接入的時候出現許多這樣那樣的問題，最近在做一個業界備受關注的微信小程序項目，使用了多個網站的API接入，接下來我就以“豆瓣電影”小程序的demo與大家分享下我在學習網站API使用的一些心得體會，本文為個人觀點，如有不當之處，懇請批評指正。

    1. [微信web開發者工具]：主要用于敲網頁代碼，但是最主要用來進行網頁效果預覽。我這里用的是微信web開發者工具0.19.191900，現在最新版本是0.20.191900版本，功能基本一樣，沒什么大變化，不過建議使用最新版本，功能功能更強大，操作更方便。
    2. [Atom編輯器]：主要用于布局排版，也是敲代碼的主戰場，真心覺得這個編輯器不錯，快捷輸入和排版，大大提高了開發效率，使用簡單，一學就會。
    3. [微信小程序開發者文檔]：微信小程序開發的文檔，資源庫，以及API規范
    4. [Iconfont-阿里巴巴矢量圖標庫]：提供項目中的所有圖標，資源豐富。
    5. [野狗實時通信云wilddog]：提供項目中數據的存儲以及通信功能，實現微信登錄。
    6. [豆瓣開發者平臺]：豆瓣電影的應用接口和開發規范說明文檔

├── app.js
├── app.json
├── app.wxss
├── pages
│   ├── welcome
│   ├── mine
│   ├── comingSoon
│   └── top250
│   ├── detail
│   ├── search
│   ├── video
│   └── index
│   └── log
├── wilddog-weapp.js
├── images
└── utils
  └── util.js

"pages":[
"pages/welcome/welcome",?           //電影首頁
"pages/mine/mine",? ? ?           ? //我的信息頁
"pages/comingSoon/comingSoon",?   //近期上映列表頁
"pages/inTheaters/inTheaters",?    //熱門電影列表頁
"pages/top250/top250",? ? ?    //top250電影列表頁
"pages/detail/detail",? ?      ? //電影詳情頁
"pages/search/list",? ?       ? //電影搜索頁
"pages/video/video"? ? ?   ? //電影播放頁
]

項目github地址：https://github.com/webstormsh...

說明：由于項目中所有電影數據是通過請求豆瓣官方提供API遠程獲取，微信授權登錄是通過第三方野狗平臺實現，所以加載速度可能稍微有點慢，視頻播放功能由于不能獲得電影視頻資源地址，所以電影播放頁面使用了一個固定的視頻資源地址訪問。

  電影首頁查看
  欄目列表查看
  電影詳情查看
  電影搜索查看
  電影播放暫停彈幕
  登錄退出

1.野狗平臺API實現微信登錄配置

野狗官方API文檔引用：

wilddog.App 對象是野狗 Web SDK 的核心，它維護著應用的全局上下文數據，不同模塊之間需要通過它來
進行交互。同時 App 實例也是我們訪問野狗各個功能模塊的入口，所以初始化 App 實例是我們使用其他任
何 API 接口的前提。要使用野狗的身份認證功能，你的初始化參數中必須包含 authDomain， 代碼如下：

var config = {
  authDomain: ".wilddog.com"
};
wilddog.initializeApp(config);
初始化多個 App 實例
//上面的代碼相當于如下初始化動作
var wilddog = wilddog.initializeApp(config);
//我們還可以使用不同配置聲明多個不同的 App 實例
var configA = {
  authDomain: ".wilddog.com"
};
var a = wilddog.initializeApp(configA, "APP_A");
//通過 a 來訪問 auth
//a.auth().signInXxx().then(...)

**定義**  auth()
**說明**獲取 wilddog.Auth 實例，wilddog.Auth 實例只能通過此方法獲取。
**返回值**[wilddog.Auth](https://docs.wilddog.com/auth/Web/api/Auth.html)

**定義**     sync()
**說明**   獲取 wilddog.Sync 實例，wilddog.Sync 實例只能通過此方法獲取。
**返回值**   [wilddog.Sync](https://docs.wilddog.com/sync/Web/api/App.html)

新手由于對微信小程序的的目錄結構以及微信提供的API不熟悉，可能不知道怎樣實現微信授權登錄，在這里為了操作簡便，本人使用了wilddog提供的接口，讓第三方代理實現微信登錄(操作詳情見開發文檔)，而在項目中只需進行如下操作：
將wilddog-weapp-all.js拷貝到根目錄下，并在js中進行如下配置：

App({
onLaunch: function () {
var config = {
syncURL : "https://sywx.wilddogio.com",      //這里寫wilddog中新建的項目域名
authDomain:"sywx.wilddog.com"                  
}
wilddog.initializeApp(config)
this.ref = wilddog.sync().ref("todo")
},
login:function(callback){
console.log(callback);
wilddog.auth().signInWeapp().then(function(user){
callback(user);
wx.showToast({
title: "登錄成功",
})
}).catch(function(err){
wx.showToast({
title: "登錄失敗",
})
})
},

2.豆瓣電影API獲取電影信息
首先，應該要仔細閱讀下豆瓣開發者平臺的API文檔，因為各個網站的提供的接口規范各不相同，所以需要搞明白他們使用的套路，我腦子不太好使，文檔看了整整一天才搞明白；然后，在獲取API鏈接的時候，應該注意不是所有的接口都全部開放的，有的數據無法獲取，我試了好幾個才找到能用的，所以在選擇之前，應該提前測試以下是否可用，一般文檔下面都會一個提供一個測試示例，最后在微信小程序中調用API的步驟可以參看下面項目中的代碼：

//全局變量數據配置 
globalData:{
    userInfo:null,
    doubanBase:"https://api.douban.com",       //豆瓣電影api域名
    inTheaters:"/v2/movie/in_theaters",        //熱門電影URI
    comingSoon:"/v2/movie/coming_soon",       //最近上映URI
    top250:"/v2/movie/top250",                //top250電影URI
    detail:"/v2/movie/subject/",              //電影詳情URI
    search:"/v2/movie/search"                 //電影搜索URI
  }

//拼接請求電影列表的URL并調用獲取方法
  onLoad:function(options){
     var comingSoonURL = app.globalData.doubanBase + app.globalData.comingSoon+ "?start=0&count=10";
    //  console.log(comingSoonURL);
    // 頁面初始化 options為頁面跳轉所帶來的參數
    this.getComingSoonListData(comingSoonURL,"comingSoon","近期上映");
  }

//獲取近期上映電影列表并存放到data中
  getComingSoonListData:function(url,settedKey,categoryTitle){
      wx.showToast({
        title:"加載中",
        icon:"loading",
        duration:10000
      });
      var that = this;
      wx.request({
        url:url,
        method:"GET",
        header:{
          "Content-Type":"json",
        },
           success:function(res){
              that.setData({
                comingSoon:res.data.subjects,
            })
          }
      });
  }

3.微信小程序API實現視頻播放
微信小程序自帶媒體組件 video（視頻）可以對視頻媒體信息進行加載，播放等操作，并且可以對video組件的一些相關屬性進行自定義，以下展示部分video組件的相關屬性：

                              video組件屬性部分列表

屬性名            類型             默認值          說明                                   
src              String                      要播放視頻的資源地址
duration         Number                      指定視頻時長                       
controls         Boolean           true      是否顯示默認播放控件（播放/暫停按鈕、播放進度、時間）
danmu-list       Object Array                彈幕列表
danmu-btn        Boolean          false      是否顯示彈幕按鈕，只在初始化時有效，不能動態變更
autoplay         Boolean          false      是否自動播放
loop             Boolean          false      是否循環播放
muted            Boolean          false      是否靜音播放?

//電影播放頁面的wxml文件


  
  
    
    發送彈幕
     
     
  

//電影播放頁面的交互js文件
// pages/video/video.js
Page({
  data: {
    hiddenVideo:false
  },
  inputValue: "",
  bindInputBlur: function (e) {
    wx.login({
      success: function(res) {},
      fail: function(res) {},
      complete: function(res) {},
    })
    this.inputValue = e.detail.value
  },
  bindSendDanmu: function () {
    this.videoContext.sendDanmu({
      text: this.inputValue,
      color: getRandomColor()
    })
  },
  bindStop:function() {
    this.videoContext.pause();
    this.setData({
    hiddenVideo: true
    });
  },
  bindplay:function(){
    this.videoContext.play();
    this.setData({
      hiddenVideo: false
    });
  },
  
  onReady: function () {
    this.videoContext = wx.createVideoContext("myVideo")
    
  }
})
//隨機生成顏色函數
function getRandomColor() {
  let rgb = []
  for (let i = 0; i < 3; ++i) {
    let color = Math.floor(Math.random() * 256).toString(16)
    color = color.length == 1 ? "0" + color : color
    rgb.push(color)
  }
  return "#" + rgb.join("")
}

4.微信小程序調用野狗API登錄

//微信小程序微信授權登錄獲取用戶信息
  doLogin: function () {
    var that = this;
    wx.showModal({
      title: "登錄",
      content: "是否允許微信授權登錄",
      success: function (res) {
        if (res.confirm) {
          app.login(function (user) {
            console.log(user);
            that.setData({
              userText: user,
              status: "退出",
              displayInfo: "block",
              hiddenInfo: "none"
            })
          })
        }
      }
    })
  }

//退出登錄，清楚本地用戶信息
doLogout:function(){
    var that = this;
    wx.showActionSheet({
      itemList: ["退出", "重新登錄"],
      success: function (res) {
        if (!res.cancel) {
          that.setData({
            userText: "",
            status: "登錄",
            displayInfo: "none",
            hiddenInfo: "block"
          })
        }
      }
    })
  }

1.準確獲取調用API的請求URL
其實，通過API對網站的數據資源進行訪問的最關鍵就是根據業務需求準確無誤的拼接出訪問的URL鏈接，再調用訪問方法將數據存儲到data中，所以我們在拼接url時需要十分小心，注意細節，根據文檔的要求規范URL鏈接形式，以下介紹一個項目中的例子說明：

//全局數據信息
  globalData:{
    userInfo:null,
    doubanBase:"https://api.douban.com",
    inTheaters:"/v2/movie/in_theaters",
    comingSoon:"/v2/movie/coming_soon",
    top250:"/v2/movie/top250",
    detail:"/v2/movie/subject/",
    search:"/v2/movie/search"
  }

// top250電影列表數據請求URL 
// "?start=0&count=10" 表示從0開始，取10條數據
  onLoad:function(options){
// 頁面初始化 options為頁面跳轉所帶來的參數
    var top250URL = app.globalData.doubanBase + app.globalData.top250 + "?start=0&count=10";
     console.log(top250URL );
  }

2.明確傳遞參數與返回值
在進行數據訪問的時候，會帶上一些參數，在使用帶參數的鏈接時，我們應該特別注意頁面跳轉的起始位置，參數從一個頁面傳遞到另一個頁面，傳遞參數的格式要求，接收參數一般時在js的onLoad方法中，可以通過賦值的方式接收參數列表。而在調用方法的完成后一般都會有返回值，在對返回數據進行使用一定要先明確返回數據的類型及結構，返回值類型一般有number，boolean，object，Array等。

//電影搜索API部分文檔信息
Domain:              https://api.douban.com/
Resources URI:       /v2/movie/search?q={text}
Example:            GET /v2/movie/search?q=張藝謀 GET /v2/movie/search?tag=喜劇

//關鍵字搜索電影列表請求URL
//?q=keyword表示將輸入的關鍵字作為參數傳入
  InputTap:function(e){
    var keyword = e.detail.value;
    var searchURL = app.globalData.doubanBase + app.globalData.search + "?q=" + keyword;
    console.log(searchURL);
  }

3.明確this，options，that等概念
在微信小程序的js文件中this關鍵字與在javascript中作用類似，都是指當前對象，但是微信小程序中的當前對象即為當前應用，在pages的頁面獲取方式：

var app = getApp();     /獲取當前應用，之后可用this調用

js文件中的options參數

        
              //點擊跳轉到制定帶有參數的url頁面
         
        
            {{item.title}}
         
                
                {{item.rating.average}}
        
         

options是從其他頁面跳轉到所現在頁面鏈接中傳遞進來的參數，由于不確定傳入參數的數量，這里的對象為一個數組。

// pages/detail/detail.js
//之前頁面跳轉到的頁面，傳遞的參數被options接收
onLoad:function(options){
      var that = this；  //把this對象復制到臨時變量that
      console.log(options);     //打印出optios對象，參數列表
      var detailURL = app.globalData.doubanBase + app.globalData.detail + options.id;
      console.log(detailURL);
  },

上面的代碼中用到了that，主要因為this會隨著執行的上下文隨時會變化，為了能找到原來頁面的對象，在一開始將原始變量復制保存，這樣有效的解決了數據丟失的問題。

4.利用控制臺查看object結構
微信開發者工具不僅可以預覽當前頁面效果，也配備控制臺，可以進行結果輸出，我們在使用api訪問數據的時候，可以通過使用console.log()輸出對象查看對象的屬性結構或者通過這種方式進行斷點調試。以下給大家演示下我項目中控制臺的查看結構操作：

Page({
  data:{},
  inTheaters: [],
  onLoad:function(options){
    var inTheatersURL = app.globalData.doubanBase + app.globalData.inTheaters + "?start=0&count=10";
    console.log(inTheatersURL);      //打印鏈接，控制臺輸出，通過點擊訪問，檢測是否正確
    this.getMovieListData(inTheatersURL, "inTheaters", "熱門電影");
  },

  getMovieListData: function (url, settedKey, categoryTitle) {
    var that = this;
    wx.request({
      url: url,
      method: "GET",
      header: {
        "Content-Type": "json",
      },
      success: function (res) {
          console.log(res.data);    //控制臺打印通過API獲取的object對象，可展開查看結構
        that.setData({
          inTheaters: res.data.subjects
        })
      }
    });
  }

控制臺輸出結果：

https://api.douban.com/v2/movie/in_theaters?start=0&count=10    
Object {count: 10, start: 0, total: 32, subjects: Array[10], title: "正在上映的電影-北京"}count: 10start: 0subjects: Array[10]0: Objectalt: "https://movie.douban.com/subject/26363254/"casts: Array[3]collect_count: 19015directors: Array[1]genres: Array[1]id: "26363254"images: Objectoriginal_title: "戰狼2"rating: Objectsubtype: "movie"title: "戰狼2"year: "2017"__proto__: Object1: Object2: Object3: Object4: Object5: Object6: Object7: Object8: Object9: Objectlength: 10__proto__: Array[0]title: "正在上映的電影-北京"total: 32__proto__: Object

單個對象的截圖：

        
          
            
              
              
              
                
                  
                  {{item.title}}
                  
                  {{item.year}}
                
                
                
                  評分：{{item.rating.average}}
                
                 
                導演：{{item.directors[0]["name"]}}
                
                
                主演：{{item.casts[0].name}}{{item.casts[1].name}}
              
              
            
        
      

5.高效調試代碼
在進行開發過程中，程序出現bug是再正常不過的事，所以快速解決bug也是能力的體現，這里我在開發的過程中，遇到bug的解決辦法一般的步驟是，首先在控制臺查看報錯信息，如果一眼就能反映過來最好，但如果看不懂意思，可以將報錯信息復制粘貼到百度，查看解決辦法，如果再不行的話，可以通過之前介紹的console.log()進行調試。一般做多了之后，只要一看報錯就知道問題出在哪兒，所以多做多練是個不錯的選擇。

以上微信小程序Demo旨在實現一些基本功能，也存在一些不合理之處，如對項目有疑問或不同見解的同仁可與本人聯系(郵箱：15797675808@163.com；QQ：1761775849)。學習是一個不斷總結的過程，我希望我的一些學習心得體會對你有所幫助，但以上為我自己的個人見解，如有不當之處，歡迎評論區批評指正，學習是個不斷改錯的過程。