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

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

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

├── 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",?           //電影首頁(yè)
"pages/mine/mine",? ? ?           ? //我的信息頁(yè)
"pages/comingSoon/comingSoon",?   //近期上映列表頁(yè)
"pages/inTheaters/inTheaters",?    //熱門(mén)電影列表頁(yè)
"pages/top250/top250",? ? ?    //top250電影列表頁(yè)
"pages/detail/detail",? ?      ? //電影詳情頁(yè)
"pages/search/list",? ?       ? //電影搜索頁(yè)
"pages/video/video"? ? ?   ? //電影播放頁(yè)
]

項(xiàng)目github地址：https://github.com/webstormsh...

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

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

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

野狗官方API文檔引用：

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

var config = {
  authDomain: ".wilddog.com"
};
wilddog.initializeApp(config);
初始化多個(gè) App 實(shí)例
//上面的代碼相當(dāng)于如下初始化動(dòng)作
var wilddog = wilddog.initializeApp(config);
//我們還可以使用不同配置聲明多個(gè)不同的 App 實(shí)例
var configA = {
  authDomain: ".wilddog.com"
};
var a = wilddog.initializeApp(configA, "APP_A");
//通過(guò) a 來(lái)訪(fǎng)問(wèn) auth
//a.auth().signInXxx().then(...)

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

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

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

App({
onLaunch: function () {
var config = {
syncURL : "https://sywx.wilddogio.com",      //這里寫(xiě)wilddog中新建的項(xiàng)目域名
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ì)閱讀下豆瓣開(kāi)發(fā)者平臺(tái)的API文檔，因?yàn)楦鱾€(gè)網(wǎng)站的提供的接口規(guī)范各不相同，所以需要搞明白他們使用的套路，我腦子不太好使，文檔看了整整一天才搞明白；然后，在獲取API鏈接的時(shí)候，應(yīng)該注意不是所有的接口都全部開(kāi)放的，有的數(shù)據(jù)無(wú)法獲取，我試了好幾個(gè)才找到能用的，所以在選擇之前，應(yīng)該提前測(cè)試以下是否可用，一般文檔下面都會(huì)一個(gè)提供一個(gè)測(cè)試示例，最后在微信小程序中調(diào)用API的步驟可以參看下面項(xiàng)目中的代碼：

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

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

                              video組件屬性部分列表

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

//電影播放頁(yè)面的wxml文件


  
  
    
    發(fā)送彈幕
     
     
  

//電影播放頁(yè)面的交互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")
    
  }
})
//隨機(jī)生成顏色函數(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)登錄獲取用戶(hù)信息
  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"
            })
          })
        }
      }
    })
  }

//退出登錄，清楚本地用戶(hù)信息
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的請(qǐng)求URL
其實(shí)，通過(guò)API對(duì)網(wǎng)站的數(shù)據(jù)資源進(jìn)行訪(fǎng)問(wèn)的最關(guān)鍵就是根據(jù)業(yè)務(wù)需求準(zhǔn)確無(wú)誤的拼接出訪(fǎng)問(wèn)的URL鏈接，再調(diào)用訪(fǎng)問(wèn)方法將數(shù)據(jù)存儲(chǔ)到data中，所以我們?cè)谄唇觰rl時(shí)需要十分小心，注意細(xì)節(jié)，根據(jù)文檔的要求規(guī)范URL鏈接形式，以下介紹一個(gè)項(xiàng)目中的例子說(shuō)明：

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

2.明確傳遞參數(shù)與返回值
在進(jìn)行數(shù)據(jù)訪(fǎng)問(wèn)的時(shí)候，會(huì)帶上一些參數(shù)，在使用帶參數(shù)的鏈接時(shí)，我們應(yīng)該特別注意頁(yè)面跳轉(zhuǎn)的起始位置，參數(shù)從一個(gè)頁(yè)面?zhèn)鬟f到另一個(gè)頁(yè)面，傳遞參數(shù)的格式要求，接收參數(shù)一般時(shí)在js的onLoad方法中，可以通過(guò)賦值的方式接收參數(shù)列表。而在調(diào)用方法的完成后一般都會(huì)有返回值，在對(duì)返回?cái)?shù)據(jù)進(jìn)行使用一定要先明確返回?cái)?shù)據(jù)的類(lèi)型及結(jié)構(gòu)，返回值類(lèi)型一般有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)鍵字搜索電影列表請(qǐng)求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中作用類(lèi)似，都是指當(dāng)前對(duì)象，但是微信小程序中的當(dāng)前對(duì)象即為當(dāng)前應(yīng)用，在pages的頁(yè)面獲取方式：

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

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

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

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

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

上面的代碼中用到了that，主要因?yàn)閠his會(huì)隨著執(zhí)行的上下文隨時(shí)會(huì)變化，為了能找到原來(lái)頁(yè)面的對(duì)象，在一開(kāi)始將原始變量復(fù)制保存，這樣有效的解決了數(shù)據(jù)丟失的問(wèn)題。

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

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

  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);    //控制臺(tái)打印通過(guò)API獲取的object對(duì)象，可展開(kāi)查看結(jié)構(gòu)
        that.setData({
          inTheaters: res.data.subjects
        })
      }
    });
  }

控制臺(tái)輸出結(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

單個(gè)對(duì)象的截圖：

        
          
            
              
              
              
                
                  
                  {{item.title}}
                  
                  {{item.year}}
                
                
                
                  評(píng)分：{{item.rating.average}}
                
                 
                導(dǎo)演：{{item.directors[0]["name"]}}
                
                
                主演：{{item.casts[0].name}}{{item.casts[1].name}}
              
              
            
        
      

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

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