北京快乐8官网|北京快乐8选一秘诀

【實戰】小程序云開發之云函數開發

最近在做自己的小程序《看啥好呢》,這個小程序是使用云開發的方式開發的,功能特別簡單,就是獲取豆瓣、大麥網的數據展示,雖然功能簡單,但還是記錄下開發過程和一些技術點,大約會有兩篇博文產出,這是第二篇。GitHub地址

在上一篇《實戰:在小程序中獲取用戶所在城市信息》中,介紹了如何獲取用戶所在城市,這一篇就介紹一下小程序云函數開發的一些東西。

項目結構

小程序《看啥好呢》全部數據都來自豆瓣網和大麥網,整個項目結構如下

電影、電視模塊下的每個分類,只是改變豆瓣網同一個接口某個字段即可,本地好看模塊是拿的大麥網的接口,而電影詳情頁是使用 Cherrio 實現豆瓣電影詳情頁網頁解析拿到的數據。

項目目錄結構

項目開發

由于電影、電視列表模塊用的都是同一個接口,只是某些參數不同,而詳情頁是解析網頁方式,不是走的接口,所以處理邏輯與列表不相同,怎么樣在一個云函數中處理不同的邏輯呢。

從上面的項目目錄結構可以看出,我為整個項目只劃分了兩個云函數,分別是damai和douban,在damai中處理來自大麥網的數據,douban中處理來自豆瓣的數據。

router 模塊

在前端中,Router 可以處理不同的請求分支,于是在云函數中也可以使用 Router,下面使用了tcb-router,它是一個基于 koa 風格的小程序·云開發云函數輕量級類路由庫,主要用于優化服務端函數處理邏輯。

douban/index.js

// 云函數入口文件const cloud = require('wx-server-sdk')const TcbRouter = require('tcb-router')cloud.init()// 云函數入口函數exports.main = async (event, context) => { const app = new TcbRouter({ event }) /** 查詢列表 */ app.router('list', async (ctx, next) => { const list = require('./list.js') ctx.body = list.main(event, context) }) /** 查詢詳情 */ app.router('detail', async (ctx, next) => { const detail = require('./detail.js') ctx.body = detail.main(event, context) }) return app.serve();}

云函數目錄結構如下

/douban----/node_modules----index.js----list.js----detail.js----package.jsonHTTP 請求

HTTP請求方面,小程序云函數中常用的是request-promise,它是一個 Promise 分格的HTTP請求庫,使用它還必須安裝它的依賴,兩個包都要安裝

npm install --save requestnpm install --save request-promise

下面看看電影列表是怎么處理的,douban/list.js

const rp = require('request-promise')exports.main = async (event, context) => { const type = event.type const tag = encodeURI(event.tag) const limit = event.limit || 50 const start = event.start || 0 const options = { uri: \`https://movie.douban.com/j/search\_subjects?type=${type}&tag=${tag}&page\_limit=${limit}&page\_start=${start}\`, headers: { 'Host': 'movie.douban.com', 'Referer': 'https://movie.douban.com/' }, json: true } return rp(options).then(res => res).catch(err => { console.log(err) })}

請求參數都放在 event 當中,在調用云函數的時候傳遞,下面是電影列表頁面調用云函數的代碼

let {id, type} = this.datawx.cloud.callFunction({ name: 'douban', data: { $url: 'list', type, tag: id == 'hot' ? '熱門' : '最新' }}).then(res => { const result = res.result this.setData({ dataList: result.subjects }, () => { wx.hideLoading() })}).catch(err => { console.log(err) wx.showToast({ title: '出錯了', icon: 'none' }) wx.hideLoading()})

從調用云函數的 data 屬性中的第一個參數$url是請求的路由,第二個參數開始即是請求需要的參數。

Cherrio 實現詳情頁解析

cheerio是一個 jQuery Core 的子集,其實現了 jQuery Core 中瀏覽器無關的 DOM 操作 API,以下是一個簡單的示例:

var cheerio = require('cheerio');// 通過 load 方法把 HTML 代碼轉換成一個 jQuery 對象var $ = cheerio.load('<h2 class="title">Hello world</h2>');// 可以使用與 jQuery 一樣的語法來操作$('h2.title').text('Hello there!');$('h2').addClass('welcome');console.log($.html());// 將輸出 <h2 class="title welcome">Hello there!</h2>

簡單來說,cheerio 就是服務器端的 jQuery,去掉了 jQuery 的一些效果類和請求類等等功能后,僅保留核心對 dom 操作的部分,因此能夠對 dom 進行和 jQuery 一樣方便的操作。它是我們篩選數據的利器——把多余的 html 標簽去掉,只留下我們想要的內容的重要工具。需要注意的是,cheerio 并不支持所有 jQuery 的查詢語法,比如$('a:first')會報錯 ,只能寫成$('a').first(),在使用的時候需要注意。

下面是電影、電視的詳情頁處理邏輯

const rp = require('request-promise')const cheerio = require('cheerio')exports.main = async (event, context) => { const subjectId = event.id const baseUrl = 'https://movie.douban.com/j' const options = { uri: \`${baseUrl}/subject\_abstract?subject\_id=${subjectId}\`, headers: { 'Host': 'movie.douban.com', 'Referer': 'https://movie.douban.com/' }, json: true } return rp(options).then((res) => { return rp(\`https://movie.douban.com/subject/${subjectId}/\`) .then((html) => { const $ = cheerio.load(html) const plot = $('#link-report').find('span').text(); //.replace(/\\s/g, '') res.subject.plot = plot return res }).catch((err) => { console.log(err) }); }).catch((err) => { console.log(err) });}

完整源碼已開源GitHub,是一個很好的學習項目。

免責聲明:本文僅代表文章作者的個人觀點,與本站無關。其原創性、真實性以及文中陳述文字和內容未經本站證實,對本文以及其中全部或者部分內容文字的真實性、完整性和原創性本站不作任何保證或承諾,請讀者僅作參考,并自行核實相關內容。

http://www.kzguv.com.cn/style/images/nopic.gif
?
分享
評論
首頁
北京快乐8官网 琼崖海南麻将最新版下载 3g篮球比分直播 福州微信麻将群 青海十一选五 球探篮球比分播网 26选5开奖结果 排球比分直播网址 电竞比分网1zpla 14场胜负 欢乐麻将怎么开好友房 今日竞彩足球推荐分析 股票配资平台 甘肃十一选五一定牛 江苏七星麻将有没有鬼 单机四人麻将安卓 黑龙江11选5