前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >【实战】小程序云开发,云函数中使用Router(附源码)

【实战】小程序云开发,云函数中使用Router(附源码)

原创
作者头像
张张
修改2020-01-03 16:41:16
1.2K0
修改2020-01-03 16:41:16
举报
文章被收录于专栏:前端全栈开发者

最近在做自己的小程序《看啥好呢》,这个小程序是使用云开发的方式开发的,功能特别简单,就是获取豆瓣、大麦网的数据展示,虽然功能简单,但还是记录下开发过程和一些技术点,大约会有两篇博文产出,这是第二篇。GitHub地址

在上一篇《实战:在小程序中获取用户所在城市信息》中,介绍了如何获取用户所在城市,这一篇就介绍一下小程序云函数开发的一些东西。

1. 项目结构

小程序《看啥好呢》全部数据都来自豆瓣网和大麦网,整个项目结构如下

整个项目结构
整个项目结构

电影、电视模块下的每个分类,只是改变豆瓣网同一个接口某个字段即可,本地好看模块是拿的大麦网的接口,而电影详情页是使用 Cherrio 实现豆瓣电影详情页网页解析拿到的数据。

项目目录结构

项目目录结构
项目目录结构

2. 项目开发

由于电影、电视列表模块用的都是同一个接口,只是某些参数不同,而详情页是解析网页方式,不是走的接口,所以处理逻辑与列表不相同,怎么样在一个云函数中处理不同的逻辑呢。

从上面的项目目录结构可以看出,我为整个项目只划分了两个云函数,分别是damai和douban,在damai中处理来自大麦网的数据,douban中处理来自豆瓣的数据。

2.1 Router模块

在前端中,Router 可以处理不同的请求分支,于是在云函数中也可以使用 Router,下面使用了 tcb-router,它是一个基于 koa 风格的小程序·云开发云函数轻量级类路由库,主要用于优化服务端函数处理逻辑。

douban/index.js

代码语言:txt
复制
// 云函数入口文件
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();
}

云函数目录结构如下

代码语言:txt
复制
/douban
----/node_modules
----index.js
----list.js
----detail.js
----package.json

2.2 HTTP请求

HTTP请求方面,小程序云函数中常用的是 request-promise,它是一个 Promise 分格的HTTP请求库,使用它还必须安装它的依赖,两个包都要安装

代码语言:txt
复制
npm install --save request
npm install --save request-promise

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

代码语言:txt
复制
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 当中,在调用云函数的时候传递,下面是电影列表页面调用云函数的代码

代码语言:txt
复制
let {id, type} = this.data
wx.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 是请求的路由,第二个参数开始即是请求需要的参数。

2.3 Cherrio实现详情页解析

cheerio 是一个 jQuery Core 的子集,其实现了 jQuery Core 中浏览器无关的 DOM 操作 API,以下是一个简单的示例:

代码语言:txt
复制
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() ,在使用的时候需要注意。

下面是电影、电视的详情页处理逻辑

代码语言:txt
复制
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,是一个很好的学习项目。

全文完。


如果对你有一点点帮助,可以点个关注。

作者简介:做工程不做码农(微信公众号同名),Web前端工程师,7年开发经验,坐标杭州,聚焦大前端技术的公众号,分享我的原创或精选文章,欢迎关注。我的个人微信(dunizb),欢迎添加好友进一步交流。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
作者已关闭评论
0 条评论
热度
最新
推荐阅读
目录
  • 1. 项目结构
  • 2. 项目开发
    • 2.1 Router模块
      • 2.2 HTTP请求
        • 2.3 Cherrio实现详情页解析
        相关产品与服务
        云函数
        云函数(Serverless Cloud Function,SCF)是腾讯云为企业和开发者们提供的无服务器执行环境,帮助您在无需购买和管理服务器的情况下运行代码。您只需使用平台支持的语言编写核心代码并设置代码运行的条件,即可在腾讯云基础设施上弹性、安全地运行代码。云函数是实时文件处理和数据处理等场景下理想的计算平台。
        领券
        问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档