{"componentChunkName":"component---src-templates-blog-detail-tsx","path":"/blog/2020-04-09-serverless-scf","result":{"data":{"currentBlog":{"id":"1deff4fb-c4ce-52d7-9a92-a6e33ab35714","frontmatter":{"thumbnail":"https://img.serverlesscloud.cn/2020522/1590168389721-%E4%BC%81%E4%B8%9A%E5%BE%AE%E4%BF%A1%E6%88%AA%E5%9B%BE_15901683546214.png","authors":["brzhang"],"categories":["user-stories"],"date":"2020-04-09T00:00:00.000Z","title":"手把手带你利用云函数 SCF 轻松实现一个热点资讯小程序","description":"新技能，手把手带你利用云函数轻松实现一个热点资讯小程序","authorslink":["https://cloud.tencent.com/developer/article/1609581"],"translators":null,"translatorslink":null,"tags":["云函数","小程序"],"keywords":"Serverless","outdated":null},"wordCount":{"words":208,"sentences":42,"paragraphs":42},"fileAbsolutePath":"/opt/build/repo/content/blog/2020-04-09-serverless-scf.md","fields":{"slug":"/blog/2020-04-09-serverless-scf/","keywords":["go","java","serverless","云函数","函数","serverless","程序","event"]},"html":"<h2 id=\"第一步，环境配置\"><a href=\"#%E7%AC%AC%E4%B8%80%E6%AD%A5%EF%BC%8C%E7%8E%AF%E5%A2%83%E9%85%8D%E7%BD%AE\" aria-label=\"第一步，环境配置 permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>第一步，环境配置</h2>\n<p>打开微信<a href=\"https://cloud.tencent.com/solution/la?from=10908\">小程序开发</a> IDE，创建一个小程序项目，AppID 需要自己去小程序官网注册一个，然后后端服务注意选择<a href=\"https://cloud.tencent.com/product/tcb?from=10908\">小程序-云开发</a>。</p>\n<p>注意，以前的老版本 IDE，在蓝色框那里会有一个<strong>腾讯云</strong>的选项。实际上都是使用的腾讯云服务，统一选择小程序-云开发就好。</p>\n<p><img src=\"https://img.serverlesscloud.cn/2020522/1590168390127-%E4%BC%81%E4%B8%9A%E5%BE%AE%E4%BF%A1%E6%88%AA%E5%9B%BE_15901683546214.png\" alt=\"serverless\"></p>\n<p>点击<strong>新建</strong>，会出现这样一个界面：</p>\n<p><img src=\"https://img.serverlesscloud.cn/2020522/1590168390210-%E4%BC%81%E4%B8%9A%E5%BE%AE%E4%BF%A1%E6%88%AA%E5%9B%BE_15901683546214.png\" alt=\"serverless\"></p>\n<p>可以看到，微信开发者工具的脚手架已经为我们创建好了一些模板代码，今天，猪脚就是我们的 <strong>cloudfunctions</strong> 部分，即如何利用<strong>腾讯云</strong>为我们即将写的新闻小程序提供数据服务。</p>\n<p>在开发之前，我们发现控制台报了一个错误，提示我们没有开通云服务。我们发现微信开发者工具的顶部工具栏中，云开发那个按钮是灰色的，点击进去，提示我们开通，表示我们没有开通云开发服务，点击它，新建一个。</p>\n<p><img src=\"https://img.serverlesscloud.cn/2020522/1590168390129-%E4%BC%81%E4%B8%9A%E5%BE%AE%E4%BF%A1%E6%88%AA%E5%9B%BE_15901683546214.png\" alt=\"serverless\"></p>\n<p>配置完毕之后，你可能会关系费用问题，不用担心，默认的配置是完全免费的，如果你用户量不太大，基本上够你的日常需求了，对个人开发者来说，相当的友好。</p>\n<p><img src=\"https://img.serverlesscloud.cn/2020522/1590168389290-%E4%BC%81%E4%B8%9A%E5%BE%AE%E4%BF%A1%E6%88%AA%E5%9B%BE_15901683546214.png\" alt=\"serverless\"></p>\n<h2 id=\"第二步：云函数开发及部署\"><a href=\"#%E7%AC%AC%E4%BA%8C%E6%AD%A5%EF%BC%9A%E4%BA%91%E5%87%BD%E6%95%B0%E5%BC%80%E5%8F%91%E5%8F%8A%E9%83%A8%E7%BD%B2\" aria-label=\"第二步：云函数开发及部署 permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>第二步：云函数开发及部署</h2>\n<p>云服务开通完毕，接下来可以部署下脚手架为我们提供的云函数，可以看到 cloudfunctions 文件夹提示未选择环境，我们右键点击，选择我们刚才开通的那个云开发环境。然后展开目录，对准 login 这个目录，右键，选择</p>\n<p><img src=\"https://img.serverlesscloud.cn/2020522/1590168390283-%E4%BC%81%E4%B8%9A%E5%BE%AE%E4%BF%A1%E6%88%AA%E5%9B%BE_15901683546214.png\" alt=\"serverless\"></p>\n<p>然后，关闭 IDE，重启 IDE，在点击第一个按钮，获取 openid，此时可以看到获取 openid 是成功的了。</p>\n<p><img src=\"https://img.serverlesscloud.cn/2020522/1590168389247-%E4%BC%81%E4%B8%9A%E5%BE%AE%E4%BF%A1%E6%88%AA%E5%9B%BE_15901683546214.png\" alt=\"serverless\"></p>\n<p>这里表示我们的云开发环境从开通到部署的链路已经打通了，接下来的事情，当然是写自己的云函数了。我们是要做一个新闻咨询的小程序，所以，一般来说，找一个自己经常看的觉得内容质量不错的新闻内网站看看人家提供了什么接口没，分两步走：</p>\n<ol>\n<li><strong>如果有提供了接口</strong>，我们在云函数中直接调用接口，拿到数据，喂给小程序前端即可，这种最方便了。</li>\n<li><strong>通常情况下是没有接口的</strong>，此时怎么办？一个思路是使用云函数去爬取新闻网站的内容，存放到云开发 db 上面，然后小程序端来读云开发 db 中的内容，亦或者直接通过通过爬虫程序生成一个 json 返回给小程序端，不通过存储 db 这个过程。其缺点是没有缓存数据，每次都要经过爬虫去爬，用户可能等很久才能看到新闻，体验并不好。目前，云开发套件里面有提供 db 服务，所以，既然提供了，当然就直接拿来使用了，提升用户体验的事，当然就得干了。</li>\n</ol>\n<p>本文为了简便期间，目的就是为了介绍如何在小程序中使用腾讯云的云函数功能，因此，就不介绍 db 的存储了。那么，开始吧。</p>\n<h3 id=\"新建云函数\"><a href=\"#%E6%96%B0%E5%BB%BA%E4%BA%91%E5%87%BD%E6%95%B0\" aria-label=\"新建云函数 permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>新建云函数</h3>\n<p>直接对这 cloudfunctions 那个文件夹点击新建云函数，成功之后就会看到目录里面有脚手架生成的一些框架代码了。</p>\n<div\n              class=\"gatsby-code-button-container\"\n              data-toaster-id=\"7540049542005777000\"\n              data-toaster-class=\"gatsby-code-button-toaster\"\n              data-toaster-text-class=\"gatsby-code-button-toaster-text\"\n              data-toaster-text=\"代码复制成功\"\n              data-toaster-duration=\"3500\"\n              onClick=\"copyToClipboard(`// 云函数入口文件\nconst cloud = require('wx-server-sdk')\ncloud.init()\n\n// 云函数入口函数\nexports.main = async (event, context) => {\n  const wxContext = cloud.getWXContext()\n  return {\n    event,\n    data:data\n  }\n}`, `7540049542005777000`)\"\n            >\n              <div\n                class=\"gatsby-code-button\"\n                data-tooltip=\"\"\n              >\n                复制代码<svg class=\"gatsby-code-button-icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path fill=\"none\" d=\"M0 0h24v24H0V0z\"/><path d=\"M16 1H2v16h2V3h12V1zm-1 4l6 6v12H6V5h9zm-1 7h5.5L14 6.5V12z\"/></svg>\n              </div>\n            </div>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token comment\">// 云函数入口文件</span>\n<span class=\"token keyword\">const</span> cloud <span class=\"token operator\">=</span> <span class=\"token function\">require</span><span class=\"token punctuation\">(</span><span class=\"token string\">'wx-server-sdk'</span><span class=\"token punctuation\">)</span>\ncloud<span class=\"token punctuation\">.</span><span class=\"token function\">init</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span>\n\n<span class=\"token comment\">// 云函数入口函数</span>\nexports<span class=\"token punctuation\">.</span><span class=\"token function-variable function\">main</span> <span class=\"token operator\">=</span> <span class=\"token keyword\">async</span> <span class=\"token punctuation\">(</span><span class=\"token parameter\">event<span class=\"token punctuation\">,</span> context</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n  <span class=\"token keyword\">const</span> wxContext <span class=\"token operator\">=</span> cloud<span class=\"token punctuation\">.</span><span class=\"token function\">getWXContext</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span>\n  <span class=\"token keyword\">return</span> <span class=\"token punctuation\">{</span>\n    event<span class=\"token punctuation\">,</span>\n    data<span class=\"token punctuation\">:</span>data\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span></code></pre></div>\n<p>大多看到是这种，其中 wxContext 是小程序的上下文，这里可以拿到小程序的 AppID 等等一些常量信息。</p>\n<p>然后，event 这个参数是干嘛，event 其实就是小程序端传递给这边的参数：</p>\n<div\n              class=\"gatsby-code-button-container\"\n              data-toaster-id=\"13975210384919780000\"\n              data-toaster-class=\"gatsby-code-button-toaster\"\n              data-toaster-text-class=\"gatsby-code-button-toaster-text\"\n              data-toaster-text=\"代码复制成功\"\n              data-toaster-duration=\"3500\"\n              onClick=\"copyToClipboard(`getNews:function(){\n    wx.cloud.callFunction({\n      name: 'news',\n      data: {\n        hot_type:'views',//hot_type 可接受参数 views（浏览数） | likes（点赞数） | comments（评论数）\n        category:'Article',//category 可接受参数 Article | GanHuo | Girl\n        count:20\n      },\n      success: res => {\n        console.log('[云函数] [news] 调用')\n        console.log(res)\n        this.setData({\n          news:res.result.data\n        })\n      },\n      fail: err => {\n        console.error('[云函数] [news] 调用失败', err)\n      }\n    })\n  },`, `13975210384919780000`)\"\n            >\n              <div\n                class=\"gatsby-code-button\"\n                data-tooltip=\"\"\n              >\n                复制代码<svg class=\"gatsby-code-button-icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path fill=\"none\" d=\"M0 0h24v24H0V0z\"/><path d=\"M16 1H2v16h2V3h12V1zm-1 4l6 6v12H6V5h9zm-1 7h5.5L14 6.5V12z\"/></svg>\n              </div>\n            </div>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token function-variable function\">getNews</span><span class=\"token punctuation\">:</span><span class=\"token keyword\">function</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">{</span>\n    wx<span class=\"token punctuation\">.</span>cloud<span class=\"token punctuation\">.</span><span class=\"token function\">callFunction</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n      name<span class=\"token punctuation\">:</span> <span class=\"token string\">'news'</span><span class=\"token punctuation\">,</span>\n      data<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n        hot_type<span class=\"token punctuation\">:</span><span class=\"token string\">'views'</span><span class=\"token punctuation\">,</span><span class=\"token comment\">//hot_type 可接受参数 views（浏览数） | likes（点赞数） | comments（评论数）</span>\n        category<span class=\"token punctuation\">:</span><span class=\"token string\">'Article'</span><span class=\"token punctuation\">,</span><span class=\"token comment\">//category 可接受参数 Article | GanHuo | Girl</span>\n        count<span class=\"token punctuation\">:</span><span class=\"token number\">20</span>\n      <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n      <span class=\"token function-variable function\">success</span><span class=\"token punctuation\">:</span> <span class=\"token parameter\">res</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n        console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span><span class=\"token string\">'[云函数] [news] 调用'</span><span class=\"token punctuation\">)</span>\n        console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span>res<span class=\"token punctuation\">)</span>\n        <span class=\"token keyword\">this</span><span class=\"token punctuation\">.</span><span class=\"token function\">setData</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n          news<span class=\"token punctuation\">:</span>res<span class=\"token punctuation\">.</span>result<span class=\"token punctuation\">.</span>data\n        <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span>\n      <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n      <span class=\"token function-variable function\">fail</span><span class=\"token punctuation\">:</span> <span class=\"token parameter\">err</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n        console<span class=\"token punctuation\">.</span><span class=\"token function\">error</span><span class=\"token punctuation\">(</span><span class=\"token string\">'[云函数] [news] 调用失败'</span><span class=\"token punctuation\">,</span> err<span class=\"token punctuation\">)</span>\n      <span class=\"token punctuation\">}</span>\n    <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span>\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span></code></pre></div>\n<p>比如，我在小程序端调用 news 这个云函数，传递 data 为</p>\n<div\n              class=\"gatsby-code-button-container\"\n              data-toaster-id=\"10814272700122940000\"\n              data-toaster-class=\"gatsby-code-button-toaster\"\n              data-toaster-text-class=\"gatsby-code-button-toaster-text\"\n              data-toaster-text=\"代码复制成功\"\n              data-toaster-duration=\"3500\"\n              onClick=\"copyToClipboard(`{\n  hot_type:'views',//hot_type 可接受参数 views（浏览数） | likes（点赞数） | comments（评论数）\n  category:'Article',//category 可接受参数 Article | GanHuo | Girl\n  count:20\n}`, `10814272700122940000`)\"\n            >\n              <div\n                class=\"gatsby-code-button\"\n                data-tooltip=\"\"\n              >\n                复制代码<svg class=\"gatsby-code-button-icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path fill=\"none\" d=\"M0 0h24v24H0V0z\"/><path d=\"M16 1H2v16h2V3h12V1zm-1 4l6 6v12H6V5h9zm-1 7h5.5L14 6.5V12z\"/></svg>\n              </div>\n            </div>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token punctuation\">{</span>\n  hot_type<span class=\"token punctuation\">:</span><span class=\"token string\">'views'</span><span class=\"token punctuation\">,</span><span class=\"token comment\">//hot_type 可接受参数 views（浏览数） | likes（点赞数） | comments（评论数）</span>\n  category<span class=\"token punctuation\">:</span><span class=\"token string\">'Article'</span><span class=\"token punctuation\">,</span><span class=\"token comment\">//category 可接受参数 Article | GanHuo | Girl</span>\n  count<span class=\"token punctuation\">:</span><span class=\"token number\">20</span>\n<span class=\"token punctuation\">}</span></code></pre></div>\n<p>那么这个 event 其实就是这个 object。</p>\n<p>好了，了解了脚手架为我们创建的一些模板及其参数之后，我们就可以编写业务逻辑了。</p>\n<h3 id=\"获取新闻逻辑\"><a href=\"#%E8%8E%B7%E5%8F%96%E6%96%B0%E9%97%BB%E9%80%BB%E8%BE%91\" aria-label=\"获取新闻逻辑 permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>获取新闻逻辑</h3>\n<p>获取新闻需要发送网络请求，这里我们直接使用 axios，但是微信小程序这里没有提供，所以我们需要在云函数的目录中去执行</p>\n<div\n              class=\"gatsby-code-button-container\"\n              data-toaster-id=\"90670489364069920000\"\n              data-toaster-class=\"gatsby-code-button-toaster\"\n              data-toaster-text-class=\"gatsby-code-button-toaster-text\"\n              data-toaster-text=\"代码复制成功\"\n              data-toaster-duration=\"3500\"\n              onClick=\"copyToClipboard(`npm i axios`, `90670489364069920000`)\"\n            >\n              <div\n                class=\"gatsby-code-button\"\n                data-tooltip=\"\"\n              >\n                复制代码<svg class=\"gatsby-code-button-icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path fill=\"none\" d=\"M0 0h24v24H0V0z\"/><path d=\"M16 1H2v16h2V3h12V1zm-1 4l6 6v12H6V5h9zm-1 7h5.5L14 6.5V12z\"/></svg>\n              </div>\n            </div>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\">npm i axios</code></pre></div>\n<p>注意，一定是在你生成的按个云函数的目录中去执行 <code class=\"language-text\">npm i</code></p>\n<p>然后，就可以愉快的写网路请求了。</p>\n<div\n              class=\"gatsby-code-button-container\"\n              data-toaster-id=\"24768004403631050000\"\n              data-toaster-class=\"gatsby-code-button-toaster\"\n              data-toaster-text-class=\"gatsby-code-button-toaster-text\"\n              data-toaster-text=\"代码复制成功\"\n              data-toaster-duration=\"3500\"\n              onClick=\"copyToClipboard(`// 云函数入口文件\nconst cloud = require('wx-server-sdk')\nconst axios = require('axios')\ncloud.init()\n\nasync function getNews(category,hot_type,count) {\n  console.log('start getNews')\n  let data = {}\n  try {\n    const url = \\`https://gank.io/api/v2/hot/\\${hot_type}/category/\\${category}/count/\\${count}\\`\n    console.log(url)\n    var res = await axios.get(url)\n    data = res.data.data\n  } catch (err) {\n    console.log(err)\n  }\n  return data\n}\n// 云函数入口函数\nexports.main = async (event, context) => {\n  const wxContext = cloud.getWXContext()\n  const data =  await getNews(event.category,event.hot_type,event.count)\n  console.log(data)\n  return {\n    event,\n    data:data\n  }\n}`, `24768004403631050000`)\"\n            >\n              <div\n                class=\"gatsby-code-button\"\n                data-tooltip=\"\"\n              >\n                复制代码<svg class=\"gatsby-code-button-icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path fill=\"none\" d=\"M0 0h24v24H0V0z\"/><path d=\"M16 1H2v16h2V3h12V1zm-1 4l6 6v12H6V5h9zm-1 7h5.5L14 6.5V12z\"/></svg>\n              </div>\n            </div>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token comment\">// 云函数入口文件</span>\n<span class=\"token keyword\">const</span> cloud <span class=\"token operator\">=</span> <span class=\"token function\">require</span><span class=\"token punctuation\">(</span><span class=\"token string\">'wx-server-sdk'</span><span class=\"token punctuation\">)</span>\n<span class=\"token keyword\">const</span> axios <span class=\"token operator\">=</span> <span class=\"token function\">require</span><span class=\"token punctuation\">(</span><span class=\"token string\">'axios'</span><span class=\"token punctuation\">)</span>\ncloud<span class=\"token punctuation\">.</span><span class=\"token function\">init</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span>\n\n<span class=\"token keyword\">async</span> <span class=\"token keyword\">function</span> <span class=\"token function\">getNews</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">category<span class=\"token punctuation\">,</span>hot_type<span class=\"token punctuation\">,</span>count</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n  console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span><span class=\"token string\">'start getNews'</span><span class=\"token punctuation\">)</span>\n  <span class=\"token keyword\">let</span> data <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span>\n  <span class=\"token keyword\">try</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token keyword\">const</span> url <span class=\"token operator\">=</span> <span class=\"token template-string\"><span class=\"token template-punctuation string\">`</span><span class=\"token string\">https://gank.io/api/v2/hot/</span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${</span>hot_type<span class=\"token interpolation-punctuation punctuation\">}</span></span><span class=\"token string\">/category/</span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${</span>category<span class=\"token interpolation-punctuation punctuation\">}</span></span><span class=\"token string\">/count/</span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${</span>count<span class=\"token interpolation-punctuation punctuation\">}</span></span><span class=\"token template-punctuation string\">`</span></span>\n    console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span>url<span class=\"token punctuation\">)</span>\n    <span class=\"token keyword\">var</span> res <span class=\"token operator\">=</span> <span class=\"token keyword\">await</span> axios<span class=\"token punctuation\">.</span><span class=\"token function\">get</span><span class=\"token punctuation\">(</span>url<span class=\"token punctuation\">)</span>\n    data <span class=\"token operator\">=</span> res<span class=\"token punctuation\">.</span>data<span class=\"token punctuation\">.</span>data\n  <span class=\"token punctuation\">}</span> <span class=\"token keyword\">catch</span> <span class=\"token punctuation\">(</span>err<span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n    console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span>err<span class=\"token punctuation\">)</span>\n  <span class=\"token punctuation\">}</span>\n  <span class=\"token keyword\">return</span> data\n<span class=\"token punctuation\">}</span>\n<span class=\"token comment\">// 云函数入口函数</span>\nexports<span class=\"token punctuation\">.</span><span class=\"token function-variable function\">main</span> <span class=\"token operator\">=</span> <span class=\"token keyword\">async</span> <span class=\"token punctuation\">(</span><span class=\"token parameter\">event<span class=\"token punctuation\">,</span> context</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n  <span class=\"token keyword\">const</span> wxContext <span class=\"token operator\">=</span> cloud<span class=\"token punctuation\">.</span><span class=\"token function\">getWXContext</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span>\n  <span class=\"token keyword\">const</span> data <span class=\"token operator\">=</span>  <span class=\"token keyword\">await</span> <span class=\"token function\">getNews</span><span class=\"token punctuation\">(</span>event<span class=\"token punctuation\">.</span>category<span class=\"token punctuation\">,</span>event<span class=\"token punctuation\">.</span>hot_type<span class=\"token punctuation\">,</span>event<span class=\"token punctuation\">.</span>count<span class=\"token punctuation\">)</span>\n  console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span>data<span class=\"token punctuation\">)</span>\n  <span class=\"token keyword\">return</span> <span class=\"token punctuation\">{</span>\n    event<span class=\"token punctuation\">,</span>\n    data<span class=\"token punctuation\">:</span>data\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span></code></pre></div>\n<p>如上，我在云函数中加了一个 getNews 的方法，接受的三个参数是小程序端传递过来的。然后拿到请求结果之后，在返回给小程序端。需要注意的是，返回的 body 是这样的。</p>\n<p><img src=\"https://img.serverlesscloud.cn/2020522/1590168389721-%E4%BC%81%E4%B8%9A%E5%BE%AE%E4%BF%A1%E6%88%AA%E5%9B%BE_15901683546214.png\" alt=\"serverless\"></p>\n<p>而我们真正从云函数拿到的结果包裹在内层的 result 中。</p>\n<p>至此，手把手带你使用云函数进行小程序开发已经结束了，相信这个简单的 demo 可以带你打开对如何利用云函数开发更多有趣的小程序的大门。</p>\n<p>比如，你可以做一个小游戏，利用云函数作为中转请求你的后台，让云函数实现权限校验，来保护你自己的服务器。</p>\n<p>比如，你可以做一个亲子相册，利用云函数，存储图片到<a href=\"https://cloud.tencent.com/product/cos?from=10908\">腾讯云存储</a>。</p>\n<p>亦或者，你可以做聊天室...</p>\n<hr>\n<div id='scf-deploy-iframe-or-md'></div>\n<hr>\n<blockquote>\n<p><strong>传送门：</strong></p>\n<ul>\n<li>GitHub: <a href=\"https://github.com/serverless/serverless/blob/master/README_CN.md\">github.com/serverless</a></li>\n<li>官网：<a href=\"https://serverless.com/\">serverless.com</a></li>\n</ul>\n</blockquote>\n<p>欢迎访问：<a href=\"https://serverlesscloud.cn/\">Serverless 中文网</a>，您可以在 <a href=\"https://serverlesscloud.cn/best-practice\">最佳实践</a> 里体验更多关于 Serverless 应用的开发！</p>","tableOfContents":"<ul>\n<li><a href=\"/blog/2020-04-09-serverless-scf/#%E7%AC%AC%E4%B8%80%E6%AD%A5%EF%BC%8C%E7%8E%AF%E5%A2%83%E9%85%8D%E7%BD%AE\">第一步，环境配置</a></li>\n<li>\n<p><a href=\"/blog/2020-04-09-serverless-scf/#%E7%AC%AC%E4%BA%8C%E6%AD%A5%EF%BC%9A%E4%BA%91%E5%87%BD%E6%95%B0%E5%BC%80%E5%8F%91%E5%8F%8A%E9%83%A8%E7%BD%B2\">第二步：云函数开发及部署</a></p>\n<ul>\n<li><a href=\"/blog/2020-04-09-serverless-scf/#%E6%96%B0%E5%BB%BA%E4%BA%91%E5%87%BD%E6%95%B0\">新建云函数</a></li>\n<li><a href=\"/blog/2020-04-09-serverless-scf/#%E8%8E%B7%E5%8F%96%E6%96%B0%E9%97%BB%E9%80%BB%E8%BE%91\">获取新闻逻辑</a></li>\n</ul>\n</li>\n</ul>"},"previousBlog":{"id":"66fbf753-e21e-50af-9fb0-8d6ff3611176","frontmatter":{"thumbnail":"https://img.serverlesscloud.cn/2020522/1590170625843-%E4%BC%81%E4%B8%9A%E5%BE%AE%E4%BF%A1%E6%88%AA%E5%9B%BE_15901706165494.png","authors":["galenye"],"categories":["user-stories"],"date":"2020-04-09T00:00:00.000Z","title":"利用 Serverless，实现 COS & CDN Combo Handler","description":"小 S 维护的一个前端系统，单个页面中有数个没有依赖关系的 js, css 需要加载，此时浏览器会分别去请求对应的文件。此时小 S 收到 Leader 给的一个任务：优化前端的静态资源请求，尽量做合并。","authorslink":["https://cloud.tencent.com/developer/article/1610316"],"translators":null,"translatorslink":null,"tags":["Serverless","对象存储"],"keywords":"Serverless,COS,CDN","outdated":true},"wordCount":{"words":367,"sentences":52,"paragraphs":49},"fileAbsolutePath":"/opt/build/repo/content/blog/2020-04-09-serverless-combo-handler.md","fields":{"slug":"/blog/2020-04-09-serverless-combo-handler/","keywords":["java","serverless","combo","cdn","Serverless"]}},"nextBlog":{"id":"289c1d4d-1c87-50d3-8d31-d66dab070c24","frontmatter":{"thumbnail":"https://img.serverlesscloud.cn/202049/1586404016355-fengmian.jpg","authors":["serverless 社区"],"categories":["news"],"date":"2020-04-08T00:00:00.000Z","title":"腾讯云 Serverless Framework 正式发布公告","description":"今天，我们很高兴地宣布，腾讯云 Serverless Framework 已正式发布。这是由腾讯云提供的专为中国开发人员定制的 Serverless Framework 版本。","authorslink":null,"translators":null,"translatorslink":null,"tags":["Serverless","Meetup"],"keywords":"Serverless 发布动态,Serverless 发布,Serverless 功能,Serverless 特性","outdated":null},"wordCount":{"words":123,"sentences":21,"paragraphs":21},"fileAbsolutePath":"/opt/build/repo/content/blog/2020-04-07-sfga.md","fields":{"slug":"/blog/2020-04-07-sfga/","keywords":["serverless","Serverless","开发人员","Framework","实时","腾讯","开发","部署","serverless"]}},"recommendBlogs":{"edges":[{"node":{"id":"4300b21c-7209-5256-86ff-0d38e3daec9b","frontmatter":{"thumbnail":"https://main.qcloudimg.com/raw/14f1c8eed372e76c1b139703b2f6d0fa.jpg","authors":["KieranMcCarthy"],"categories":["user-stories","engineering-culture"],"date":"2018-01-09T00:00:00.000Z","title":"我是如何在四年时间里，从厨师转行为 Serverless 应用开发者","description":"我是厨师出身，现在成为了一名 Serverless 应用开发者。","authorslink":["https://serverless.com/author/kieranmccarthy/"],"translators":["Aceyclee"],"translatorslink":["https://www.zhihu.com/people/Aceyclee"],"tags":["应用开发","Serverless"],"keywords":"Serverless 应用开发,Serverless 管理,厨师转行为 Serverless 应用开发者","outdated":null},"wordCount":{"words":285,"sentences":38,"paragraphs":36},"fileAbsolutePath":"/opt/build/repo/content/blog/2018-01-09-from-chef-to-serverless-developer-in-4-years.md","fields":{"slug":"/blog/2018-01-09-from-chef-to-serverless-developer-in-4-years/","keywords":["无服务器","无服务器开发","云函数","学习","Serverless","构建","Framework","开发者","服务器","应用","学位","简历"]}}},{"node":{"id":"713a0563-4bf9-5721-bacb-3b4ef609fe4a","frontmatter":{"thumbnail":"https://s3-us-west-2.amazonaws.com/assets.blog.serverless.com/camp-fire/camp-fire-housing-thumb.jpg","authors":["EricWyne"],"categories":["guides-and-tutorials","user-stories"],"date":"2018-12-05T00:00:00.000Z","title":"Serverless Twitter 机器人帮助为坎普山火受灾者安置住房","description":"加利福尼亚州的坎普山火致使数千人流离失所，为此，我构建了一个简单的 Serverless Twitter 机器人来帮助将受灾者安置在临时住房！","authorslink":["https://serverless.com/author/ericwyne/"],"translators":["Aceyclee"],"translatorslink":["zhihu.com/people/Aceyclee"],"tags":null,"keywords":null,"outdated":null},"wordCount":{"words":157,"sentences":26,"paragraphs":26},"fileAbsolutePath":"/opt/build/repo/content/blog/2018-12-05-serverless-twitter-camp-fire.md","fields":{"slug":"/blog/2018-12-05-serverless-twitter-camp-fire/","keywords":["serverless","无服务器","云函数","Serverless","org","住房","Twitter","函数","受灾","机器人","山火"]}}},{"node":{"id":"98602143-b837-5f50-a24f-3b1ec76044d7","frontmatter":{"thumbnail":"https://s3-us-west-2.amazonaws.com/assets.blog.serverless.com/sqquid/sqquid-serverless-thumb.jpg","authors":["RonPeled"],"categories":["user-stories"],"date":"2018-12-17T00:00:00.000Z","title":"SQQUID：100% 无服务器初创公司","description":"SQQUID 将 AWS Lambda 和无服务器框架用于其核心产品和营销网站。我们来看看一个完全无服务器的初创公司是怎样的。","authorslink":null,"translators":null,"translatorslink":null,"tags":null,"keywords":null,"outdated":null},"wordCount":{"words":266,"sentences":42,"paragraphs":42},"fileAbsolutePath":"/opt/build/repo/content/blog/2018-12-17-sqquid-one-hundred-percent-serverless.md","fields":{"slug":"/blog/2018-12-17-sqquid-one-hundred-percent-serverless/","keywords":["go","serverless","无服务器","无服务器架构","服务器","架构","Lambda","集成","FaaS","串行","系统"]}}},{"node":{"id":"29dc2e58-d2ba-56f9-aee1-d21b0bc62e0e","frontmatter":{"thumbnail":"https://s3-us-west-2.amazonaws.com/assets.blog.serverless.com/ao-com-story/ao-serverless-thumbnail.png","authors":["NickGottlieb"],"categories":["user-stories"],"date":"2019-04-24T00:00:00.000Z","title":"AO.com：逐渐转向无服务器优先","description":"AO.com 的 SCV 团队率先尝试无服务器服务。折服于无服务器框架的快速周转时间和低维护成本，整个团队逐渐转向无服务器优先。","authorslink":null,"translators":null,"translatorslink":null,"tags":null,"keywords":null,"outdated":null},"wordCount":{"words":236,"sentences":42,"paragraphs":35},"fileAbsolutePath":"/opt/build/repo/content/blog/2019-04-24-ao-serverless-first.md","fields":{"slug":"/blog/2019-04-24-ao-serverless-first/","keywords":["serverless","无服务器","服务器","团队","Lambda","功能","构建"]}}},{"node":{"id":"752d08d1-387a-5bde-acf3-98141baab294","frontmatter":{"thumbnail":"https://img.serverlesscloud.cn/2020414/1586871710979-%E5%85%AC%E5%85%B1%E7%94%A8.png","authors":["Anycodes"],"categories":["user-stories"],"date":"2019-06-20T00:00:00.000Z","title":"如何用 Serverless 为 Python 云函数打包依赖","description":"在使用无服务器云函数SCF时通常会遇到导入第三方库的问题，很多小伙伴比较头疼是：应该如何打包进去？这里，推荐几个不错的方法。","authorslink":["https://zhuanlan.zhihu.com/ServerlessGo"],"translators":null,"translatorslink":null,"tags":["云函数","Serverless"],"keywords":"Serverless,Serverless应用,无服务器云函数","outdated":null},"wordCount":{"words":81,"sentences":43,"paragraphs":43},"fileAbsolutePath":"/opt/build/repo/content/blog/2019-06-20-for-python-cloud-functions.md","fields":{"slug":"/blog/2019-06-20-for-python-cloud-functions/","keywords":["java","serverless","无服务器","无服务器云函数","云函数","serverlesscloud","安装","serverless","pillowtest"]}}},{"node":{"id":"2dc78814-9d77-555b-a1bb-ad202c8ec2d1","frontmatter":{"thumbnail":"https://s3-us-west-2.amazonaws.com/assets.blog.serverless.com/cloudforecast/thumbnail.png","authors":["FrancoisLagier"],"categories":["user-stories"],"date":"2019-08-07T00:00:00.000Z","title":"Serverless：初创企业的理想选择？（CloudForecast 案例分析）","description":"CloudForecast 是 2018 年成立的一家独立初创企业，本文将介绍他们决定选择 Serverless 的原因。","authorslink":["https://serverless.com/author/francoislagier/"],"translators":["Aceyclee"],"translatorslink":["zhihu.com/people/Aceyclee"],"tags":null,"keywords":null,"outdated":null},"wordCount":{"words":211,"sentences":29,"paragraphs":29},"fileAbsolutePath":"/opt/build/repo/content/blog/2019-08-07-serverless-for-startups.md","fields":{"slug":"/blog/2019-08-07-serverless-for-startups/","keywords":["serverless","云函数","serverless","函数","Serverless","utm","Framework","blog","CloudForecast","cloudforecast"]}}},{"node":{"id":"97450b07-658b-5207-8216-1c7b9b51b115","frontmatter":{"thumbnail":"https://img.serverlesscloud.cn/2020114/1578988490344-v2-8b2cd2c5275aa2c5a3c5083a148a7a9f_1200x500.jpg","authors":["Anycodes"],"categories":["user-stories"],"date":"2019-09-01T00:00:00.000Z","title":"如何通过 Serverless 与自然语言处理，让搜索引擎「看」到你的博客","description":"Serverless 与自然语言处理结合的一个小应用","authorslink":["https://www.zhihu.com/people/liuyu-43-97"],"translators":null,"translatorslink":null,"tags":["个人博客","serverless"],"keywords":"Serverless 自然语言处理","outdated":null},"wordCount":{"words":106,"sentences":34,"paragraphs":34},"fileAbsolutePath":"/opt/build/repo/content/blog/2019-09-01-search-engine-blog.md","fields":{"slug":"/blog/2019-09-01-search-engine-blog/","keywords":["serverless","云函数","keywords","serverlesscloud","summary"]}}},{"node":{"id":"ae4fd2f8-515c-5aec-b584-38427ef33f7e","frontmatter":{"thumbnail":"https://img.serverlesscloud.cn/2020114/1578989800047-part-00492-780.jpg","authors":["Anycodes"],"categories":["guides-and-tutorials","user-stories"],"date":"2019-09-16T00:00:00.000Z","title":"突破传统 OJ 瓶颈，「判题姬」接入云函数","description":"通过 Serverless 实现在线编程","authorslink":["https://www.zhihu.com/people/liuyu-43-97"],"translators":null,"translatorslink":null,"tags":["在线编程","云函数"],"keywords":"Serverless 在线编程,Serverless OJ","outdated":null},"wordCount":{"words":169,"sentences":30,"paragraphs":30},"fileAbsolutePath":"/opt/build/repo/content/blog/2019-09-16-online-Judge.md","fields":{"slug":"/blog/2019-09-16-online-Judge/","keywords":["python","serverless","云函数","代码","函数","serverless"]}}}],"totalCount":64}},"pageContext":{"isCreatedByStatefulCreatePages":false,"blogId":"1deff4fb-c4ce-52d7-9a92-a6e33ab35714","previousBlogId":"66fbf753-e21e-50af-9fb0-8d6ff3611176","nextBlogId":"289c1d4d-1c87-50d3-8d31-d66dab070c24","categories":["user-stories"]}}}