web端--鬥圖Tenor api 接入

標籤：些許   nta   href   指定   star   ajax   list   col   arch   

項目中有用到鬥圖表情，需接入Tenor鬥圖庫，

此僅做記錄，便於今後回憶，

如能給你程式之旅帶來些許協助，

不勝榮幸，

大神請繞道，

廢話不多說，

1、擷取秘鑰 或使用提供的秘鑰

1 var apikey = ‘LIVDSRZULELA‘;

2、通過給定秘鑰ajax請求返回指定anon_id

 1 // 擷取tenor anonid 2  3 getAnonId: function () { 4  5     var url = ‘https://api.tenor.com/v1/anonid?key=‘ + ‘LIVDSRZULELA‘; 6  7     this.$ajax({ 8  9         method: ‘GET‘,10 11         url: url12 13     }).then(res => {14 15         this.anonid = res.data.anon_id;16 17     });18 19 },

3、通過給定的anon_id，請求返回gif資料

p(searchTerm )—搜尋索引鍵

lmt – 擷取的gif數組數量

 1 // ajax載入gif方法 2  3 getTenorGif: function (searchText, num) { 4  5     var searchResultList = []; 6  7     var apikey = ‘LIVDSRZULELA‘; 8  9     var lmt = num;10 11     var searchTerm = searchText;12 13     var searchUrl = ‘https://api.tenor.com/v1/search?tag=‘ + searchTerm + ‘&key=‘ + apikey + ‘&limit=‘ + lmt + ‘&anon_id=‘ + this.anonid;14 15     this.$ajax({16 17         method: ‘GET‘,18 19         url: searchUrl20 21     }).then(response => {22 23         // 處理擷取的資料24 25         for (var i = 0; i < response.data.results.length; i++) {26 27             for (var j = 0; j < response.data.results[i].media.length; j++) {28 29                 var json = {nanogif: response.data.results[i].media[j].nanogif.url, tinygif: response.data.results[i].media[j].tinygif.url};30 31                 searchResultList.push(json);32 33             };34 35         };36 37         this.searchResult = searchResultList;38 39     });40 41 }

 

Tenor api地址: https://tenor.com/gifapi/documentation#quickstart

web端--鬥圖Tenor api 接入