2021 最新仿掘金微信小程序（02-云函数首页动态渲染）

本章节主要实现以下功能

使用云函数搭建后台
首页动态渲染
首页数据分页加载
封装文章内容渲染组件
转发到微信好友
转发到朋友圈

用到的技术

结构部分
- scroll-view 原生组件
- picker 原生组件
- jj-item 自定义组件
css部分
- less
- flex
逻辑功能部分
- 小程序点击事件 tap 在我之前的文章中有对生命周期做过详细解释
- 小程序下拉刷 PullDownRefresh
- 小程序上拉加载下一页 onReachBottom
- 转发到微信好友
- 转发到朋友圈

使用云函数搭建后台

所谓云函数其实就是后台接口函数，也是目前比较火的 serverless概念。小程序中的云函数可以让工程师跳过繁琐的后台搭建工作，如购买云服务器，搭建开发环境，设置安全，控制并发，并直接实现了微信小程序的授权工作。用它！

新建云函数

鼠标右键 新建云函数，填写函数的姓名（也是接口的名称）

因为首页使用到了两个云函数，所以我们新建两个

category 获取首页栏目分类数据
recommend_all_feed 获取首页内容数据

云函数安装依赖

新建完云函数中，能看到 index.js, 我们这里就把它看成是一个普通的后台node文件即可

其中 package.json 中 dependencies 字段内有看到 wx-server-sdk

{
  "dependencies": {
    "wx-server-sdk": "~2.3.3"
  }
}

这就表示 每一次新建完云函数后，都需要我们自己安装依赖，否则运行失败

这里输入 npm install 安装依赖，如果我们想要使用其他的npm 包，也可以直接安装和使用

云函数 category 功能

category 云函数的工作是用来获取首页上的栏目分类数据的

主要流程是

使用axios发送异步请求，获取掘金首页上真实的html ￣□￣｜｜
使用 cheerio 来解析掘金返回的html结构，组装成数组
需要注意的是以上两个包都需要先执行 npm 安装

20210325 081925

其中，返回的数据格式如下

2021-03-25 081951

云函数 recommend_all_feed 功能

recommend_all_feed 的功能是获取首页内容数据

安装依赖

npm i  axios

代码如下

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

// 云函数入口函数
exports.main = async (event, context) => {
  // 获取小程序中携带的参数
  const {id_type,sort_type,cursor,limit,cate_id,url}=event;
  // 获取掘金首页内容数据
  const result=await axios.post(url,{id_type,sort_type,cursor,limit,cate_id});

  return {
    data:result.data.data,
    cursor:result.data.cursor,
    has_more:result.data.has_more,
  }
}