手摸手带你利用云函数轻松实现一个热点资讯小程序

原文地址 https://cloud.tencent.com/developer/article/1609581

第一步,环境配置

打开微信小程序开发IDE,创建一个小程序项目,AppID需要自己去小程序官网注册一个,然后后端服务注意选择小程序-云开发

注意,以前的老版本IDE,在蓝色框那里会有一个腾讯云的选项。实际上都是使用的腾讯云服务,统一选择小程序-云开发就好。

image

然后点击新建。不出所料,应该会出现这样一个界面。

image

可以看到,微信开发者工具的脚手架已经为我们创建好了一些模板代码,今天,猪脚就是我们的cloudfunctions部分,即如何利用腾讯云为我们即将写的新闻小程序提供数据服务。

在开发之前,我们发现控制台报了一个错误,提示我们没有开通云服务。我们发现微信开发者工具的顶部工具栏中,云开发那个按钮是灰色的,点击进去,提示我们开通,表示我们没有开通云开发服务,点击它,新建一个。

image

配置完毕之后,你可能会关系费用问题,不用担心,默认的配置是完全免费的,如果你用户量不太大,基本上够你的日常需求了,对个人开发者来说,相当的有好。

第二步:云函数开发及部署

云服务开通完毕,接下来可以部署下脚手架为我们提供的云函数,可以看到cloudfunctions文件夹提示未选择环境,我们右键点击,选择我们刚才开通的那个云开发环境。然后展开目录,对准login这个目录,右键,选择

image

然后,关闭IDE,重启IDE,在点击第一个按钮,获取openid,此时可以看到获取openid是成功的了。

image

这里表示我们的云开发环境从开通到部署的链路已经打通了,接下来的事情,当然是写自己的云函数了。我们是要做一个新闻咨询的小程序,所以,一般来说,找一个自己经常看的觉得内容质量不错的新闻内网站看看人家提供了什么接口没,分两步走:

1、如果有提供了接口,我们在云函数中直接调用接口,拿到数据,喂给小程序前端即可,这种最方便了。

2、通常情况下是没有接口的,此时怎么办?一个思路是使用云函数去爬取新闻网站的内容,存放到云开发db上面,然后小程序端来读云开发db中的内容,亦或者直接通过通过爬虫程序生成一个json返回给小程序端,不通过存储db这个过程。其缺点是没有缓存数据,每次都要经过爬虫去爬,用户可能等很久才能看到新闻,体验并不好。目前,云开发套件里面有提供db服务,所以,既然提供了,当然就直接拿来使用了,提升用户体验的事,当然就得干了。

本文为了简便期间,目的就是为了介绍如何在小程序中使用腾讯云的云函数功能,因此,就不介绍db的存储了。那么,开始吧。

新建云函数

直接对这cloudfunctions那个文件夹点击新建云函数,成功之后就会看到目录里面有脚手架生成的一些框架代码了。

// 云函数入口文件
const cloud = require('wx-server-sdk')
cloud.init()

// 云函数入口函数
exports.main = async (event, context) => {
  const wxContext = cloud.getWXContext()
  return {
    event,
    data:data
  }
}

大多看到是这种,其中wxContext是小程序的上下文,这里可以拿到小程序的AppID等等一些常量信息。

然后,event这个参数是干嘛,event其实就是小程序端传递给这边的参数:

getNews:function(){
    wx.cloud.callFunction({
      name: 'news',
      data: {
        hot_type:'views',//hot_type 可接受参数 views(浏览数) | likes(点赞数) | comments(评论数)
        category:'Article',//category 可接受参数 Article | GanHuo | Girl
        count:20
      },
      success: res => {
        console.log('[云函数] [news] 调用')
        console.log(res)
        this.setData({
          news:res.result.data
        })
      },
      fail: err => {
        console.error('[云函数] [news] 调用失败', err)
      }
    })
  },

比如,我在小程序端调用news这个云函数,传递data为

{
  hot_type:'views',//hot_type 可接受参数 views(浏览数) | likes(点赞数) | comments(评论数)
  category:'Article',//category 可接受参数 Article | GanHuo | Girl
  count:20
}

那么这个event其实就是这个object。

好了,了解了脚手架为我们创建的一些模板及其参数之后,我们就可以编写业务逻辑了。

获取新闻逻辑

获取新闻需要发送网络请求,这里我们直接使用axios,但是微信小程序这里没有提供,所以我们需要在云函数的目录中去执行

npm i axios

注意,一定是在你生成的按个云函数的目录中去执行npm i

然后,就可以愉快的写网路请求了。

// 云函数入口文件
const cloud = require('wx-server-sdk')
const axios = require('axios')
cloud.init()

async function getNews(category,hot_type,count) {
  console.log('start getNews')
  let data = {}
  try {
    const url = `https://gank.io/api/v2/hot/${hot_type}/category/${category}/count/${count}`
    console.log(url)
    var res = await axios.get(url)
    data = res.data.data
  } catch (err) {
    console.log(err)
  }
  return data
}
// 云函数入口函数
exports.main = async (event, context) => {
  const wxContext = cloud.getWXContext()
  const data =  await getNews(event.category,event.hot_type,event.count)
  console.log(data)
  return {
    event,
    data:data
  }
}

如上,我在云函数中加了一个getNews的方法,接受的三个参数是小程序端传递过来的。然后拿到请求结果之后,在返回给小程序端。需要注意的是,返回的body是这样的。

image

而我们真正从云函数拿到的结果包裹在内层的result中。

至此,手把手带你使用云函数进行小程序开发已经结束了,相信这个简单的demo可以带你打开对如何利用云函数开发更多有趣的小程序的大门。

比如,你可以做一个小游戏,利用云函数作为中转请求你的后台,让云函数实现权限校验,来保护你自己的服务器。

比如,你可以做一个亲子相册,利用云函数,存储图片到腾讯云存储

亦或者,你可以做聊天室...

本项目的代码地址在此

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 159,219评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,363评论 1 293
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,933评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,020评论 0 206
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,400评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,640评论 1 219
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,896评论 2 313
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,597评论 0 199
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,327评论 1 244
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,581评论 2 246
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,072评论 1 261
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,399评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,054评论 3 236
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,083评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,849评论 0 195
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,672评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,585评论 2 270

推荐阅读更多精彩内容