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

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

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

├── 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...

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

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

1.野狗平臺API實現(xiàn)微信登錄配置

野狗官方API文檔引用：

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

var config = {
  authDomain: ".wilddog.com"
};
wilddog.initializeApp(config);
初始化多個 App 實例
//上面的代碼相當(dāng)于如下初始化動作
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)

新手由于對微信小程序的的目錄結(jié)構(gòu)以及微信提供的API不熟悉，可能不知道怎樣實現(xiàn)微信授權(quán)登錄，在這里為了操作簡便，本人使用了wilddog提供的接口，讓第三方代理實現(xiàn)微信登錄(操作詳情見開發(fā)文檔)，而在項目中只需進行如下操作：
將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獲取電影信息
首先，應(yīng)該要仔細(xì)閱讀下豆瓣開發(fā)者平臺的API文檔，因為各個網(wǎng)站的提供的接口規(guī)范各不相同，所以需要搞明白他們使用的套路，我腦子不太好使，文檔看了整整一天才搞明白；然后，在獲取API鏈接的時候，應(yīng)該注意不是所有的接口都全部開放的，有的數(shù)據(jù)無法獲取，我試了好幾個才找到能用的，所以在選擇之前，應(yīng)該提前測試以下是否可用，一般文檔下面都會一個提供一個測試示例，最后在微信小程序中調(diào)用API的步驟可以參看下面項目中的代碼：

//全局變量數(shù)據(jù)配置 
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并調(diào)用獲取方法
  onLoad:function(options){
     var comingSoonURL = app.globalData.doubanBase + app.globalData.comingSoon+ "?start=0&count=10";
    //  console.log(comingSoonURL);
    // 頁面初始化 options為頁面跳轉(zhuǎn)所帶來的參數(shù)
    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實現(xiàn)視頻播放
微信小程序自帶媒體組件 video（視頻）可以對視頻媒體信息進行加載，播放等操作，并且可以對video組件的一些相關(guān)屬性進行自定義，以下展示部分video組件的相關(guān)屬性：

                              video組件屬性部分列表

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

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


  
  
    
    發(fā)送彈幕
     
     
  

//電影播放頁面的交互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")
    
  }
})
//隨機生成顏色函數(shù)
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.微信小程序調(diào)用野狗API登錄

//微信小程序微信授權(quán)登錄獲取用戶信息
  doLogin: function () {
    var that = this;
    wx.showModal({
      title: "登錄",
      content: "是否允許微信授權(quán)登錄",
      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.準(zhǔn)確獲取調(diào)用API的請求URL
其實，通過API對網(wǎng)站的數(shù)據(jù)資源進行訪問的最關(guān)鍵就是根據(jù)業(yè)務(wù)需求準(zhǔn)確無誤的拼接出訪問的URL鏈接，再調(diào)用訪問方法將數(shù)據(jù)存儲到data中，所以我們在拼接url時需要十分小心，注意細(xì)節(jié)，根據(jù)文檔的要求規(guī)范URL鏈接形式，以下介紹一個項目中的例子說明：

//全局?jǐn)?shù)據(jù)信息
  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電影列表數(shù)據(jù)請求URL 
// "?start=0&count=10" 表示從0開始，取10條數(shù)據(jù)
  onLoad:function(options){
// 頁面初始化 options為頁面跳轉(zhuǎn)所帶來的參數(shù)
    var top250URL = app.globalData.doubanBase + app.globalData.top250 + "?start=0&count=10";
     console.log(top250URL );
  }

2.明確傳遞參數(shù)與返回值
在進行數(shù)據(jù)訪問的時候，會帶上一些參數(shù)，在使用帶參數(shù)的鏈接時，我們應(yīng)該特別注意頁面跳轉(zhuǎn)的起始位置，參數(shù)從一個頁面?zhèn)鬟f到另一個頁面，傳遞參數(shù)的格式要求，接收參數(shù)一般時在js的onLoad方法中，可以通過賦值的方式接收參數(shù)列表。而在調(diào)用方法的完成后一般都會有返回值，在對返回數(shù)據(jù)進行使用一定要先明確返回數(shù)據(jù)的類型及結(jié)構(gòu)，返回值類型一般有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=喜劇

//關(guān)鍵字搜索電影列表請求URL
//?q=keyword表示將輸入的關(guān)鍵字作為參數(shù)傳入
  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關(guān)鍵字與在javascript中作用類似，都是指當(dāng)前對象，但是微信小程序中的當(dāng)前對象即為當(dāng)前應(yīng)用，在pages的頁面獲取方式：

var app = getApp();     /獲取當(dāng)前應(yīng)用，之后可用this調(diào)用

js文件中的options參數(shù)

        
              //點擊跳轉(zhuǎn)到制定帶有參數(shù)的url頁面
         
        
            {{item.title}}
         
                
                {{item.rating.average}}
        
         

options是從其他頁面跳轉(zhuǎn)到所現(xiàn)在頁面鏈接中傳遞進來的參數(shù)，由于不確定傳入?yún)?shù)的數(shù)量，這里的對象為一個數(shù)組。

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

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

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

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對象，可展開查看結(jié)構(gòu)
        that.setData({
          inTheaters: res.data.subjects
        })
      }
    });
  }

控制臺輸出結(jié)果：

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: "戰(zhàn)狼2"rating: Objectsubtype: "movie"title: "戰(zhàn)狼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}}
                
                 
                導(dǎo)演：{{item.directors[0]["name"]}}
                
                
                主演：{{item.casts[0].name}}{{item.casts[1].name}}
              
              
            
        
      

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

以上微信小程序Demo旨在實現(xiàn)一些基本功能，也存在一些不合理之處，如對項目有疑問或不同見解的同仁可與本人聯(lián)系(郵箱：[email protected]；QQ：1761775849)。學(xué)習(xí)是一個不斷總結(jié)的過程，我希望我的一些學(xué)習(xí)心得體會對你有所幫助，但以上為我自己的個人見解，如有不當(dāng)之處，歡迎評論區(qū)批評指正，學(xué)習(xí)是個不斷改錯的過程。