最近在做一个模仿今日头条手机APP的小程序。它是基于小程序云开发的。做小程序项目时使用云开发真的很方便。稍后我将讨论云开发。毕竟这个项目是使用云开发的。关于云开发的更多信息，可以去官方文档。

云开发文档。

项目的开发已经进行了一段时间，虽然只是实现了一些功能，但是还是忍不住写了一篇文章来分享一下这期间项目中遇到的成果和问题，我会逐步完善的以后的项目。该项目的源代码如上。觉得不错的可以给个star，模仿头条项目地址。

项目介绍

今日头条应该是现在最流行的新闻应用了。很多人在空闲的时候会浏览头条阅读新闻什么的。我也喜欢浏览头条新闻。正好腾讯也推出了云开发，所以我打算模仿头条的app在实战中也使用云开发功能。

新闻首页

使用云功能从数据库中获取新闻信息，每个标签页都是对应的新闻信息，下拉获取最新信息，拉在线获取更多新闻，推荐页有头条新闻

详情页面

点击首页任意一条新闻，进入对应新闻的详情页面

进入详情页面后显示新闻详情

未登录无法发表评论

登录后才能发表评论

每个评论都可以被喜欢和不喜欢

分享、收藏，点击评论按钮直接进入底部评论页面

评论插入图片

详细项目

下面将详细介绍该项目。虽然使用的云开发节省了很多时间，但前端和后端的东西都需要大量的工作。在这短短的时间里，我并没有完成整个项目，只是实现了首页、详情页、登录页。和其他主要功能

我首先设计了接口需要获取数据的数据库，为后续的数据获取做准备。数据库使用小程序云开发的数据库，将数据存储在云数据库中，使用云函数对数据库进行操作

新闻首页

主页比详细信息页面更简单。头部使用搜索框和搜索按钮。然后是一个包含多个标签页的标签栏。每个标签页显示与标签对应的相关新闻信。选项卡右侧有一个按钮，单击该按钮将弹出一个弹出窗口。这里有一个特别的地方，就是在推荐页面的顶部设置了一条置顶新闻

输入框绑定了一个tap事件，该事件使输入框在不输入值的情况下点击输入框时值发生变化。

标签栏右侧有一个按钮。单击按钮，将出现一个弹出层。上个gif里面有个demo，是新闻类型的选择框。单击关闭按钮关闭弹出层。

最后是首页最重要的新闻展示页面。为了节省项目的时间，这里使用了框架vant。有兴趣的朋友可以了解一下。标签栏中设置了6个标签，但只显示4个标签。如果要显示其他选项卡，可以左右拖动选项卡栏。这里，推荐页面设置为默认激活。由于每个标签页的代码基本相同，只有推荐页的第一列是置顶信息小程序开发相关文章标签，获取的数据不同。下面将详细介绍数据获取的代码。为了提高代码的复用性，这里使用了一个模板，复用的代码写在另一个文件中，使用时可以直接调用。

对应于每个标签创建一个集合。这里我还为头条新闻创建了另一个集合，为每条信息设计了必填字段，方便自己获取和使用数据，因为云数据库可以导入json文件或csv文件，而且每条新闻也需要拉起和加载数据，需要更多的数据，而且自己创建数据既费时又麻烦，所以我这里写了一个爬虫来爬取我需要的数据并保存到一个json文件中。数据被导入数据库。

数据库的这种设计也使得从数据库中获取数据变得更加容易。编写一个函数来获取每个标签的数据。

每条数据的字段如下，它们在将首页上的每条新闻与相应的详情页链接起来起着重要的作用。

在每个选项卡上使用一个模板，并设置一个数据（将需要显示的相应新闻信息传递到不同的页面，以便在页面上显示）。由于默认激活的页面是推荐页面，所以在触发事件时会默认加载推荐页面。数据，并将推荐页面设置为激活页面，这里写了一个加载函数用于数据加载。

module: function(title) { let counter = this.data.counter // console.log(title) wx.cloud.callFunction({ name: 'module', data: { counter: counter, title: title } }).then(res => { // console.log(res) let cnews = this.data.cnews let data = res.result.data // console.log(data) for(let i = 0; i < data.length; i++) { // console.log(data[i].date) data[i].date = data[i].date.slice(0, 10) cnews.push(data[i]) this.imgCheck(data[i].images, data.new_id, title) } // console.log(data) this.setData({ hiddenLoading: true, cnews: cnews, counter: counter+1 }) }) }

传入一个是当前显示标签的标题。建议使用默认值。如果使用计数，则每次只会加载 5 个新闻条目。从数据库中获取的信息通过云功能解决。

// 云函数入口文件 const cloud = require('wx-server-sdk') cloud.init() const db = cloud.database() // 云函数入口函数 exports.main = async (event, context) => { return await db.collection(event.title).skip((event.counter-1)*5).limit(5).get() }

向云端函数传递两个数据，一个是从对应的集合中获取信息，一个是计算获取到的信息的位置，因为当你拉起加载更多新闻时，需要加载数据，这里我设置每次加载 5 条数据，因此将 1 条数据传递给云函数。每次调用云函数从数据库中获取数据，都会加1，这样每次拉取加载数据时，忽略已经加载的数据，从后面加载数据。每次加载数据，保存数据的数组都会更新一次，首页的.wxml页面会判断并获取数据并使用for循环将数据显示到对应的标签页

头条新闻版块得到的数据其实并没有很特别。我只是从云数据库中取出热门新闻集合中的最新消息，然后将其显示在页面上。

这里也实现了下拉刷新。使用小程序下拉刷新的功能会获取最新数据，并将最新数据插入顶部。由于每次下拉都需要在集合的前面插入数据，这里就不展示了。明显的

onPullDownRefresh: function () { // 监听下拉动作来获取最新新闻信息 wx.showToast({ title: '推荐中', image: '../../../image/加载.png' }) let title = this.data.title; wx.cloud.callFunction({ name: 'module', data: { counter: 1, title: title } }).then(res => { // console.log(res) let cnews = this.data.cnews let datas = res.result.data let data = datas.concat(cnews) this.setData({ hiddenLoading: true, cnews: data, }) }) }

功能中使用了图片识别功能，使用了腾讯的图片识别界面。毕竟不是所有的图片都能显示，所以写了一个函数来检测每条新闻的所有图片。当图片不合格时，删除这条消息。我没有用图片来测试，更不用说展示了，相信大家都懂（猥琐的笑）。

当不同的tab切换时，会有一个事件，这个事件会得到and。并将后面的数据保存到数组中，使用事件中的函数获取对应的数据，判断最近是否加载过数据，如果是上次事件加载的函数，则显示上次保存的事件数据，在wxml中还会判断是否是最后一个激活的页面来显示相应的数据。

之前一直在讲后端，这篇文章也讲到了云开。说实话，有云开发真的很方便。一个人可以处理前端和后端的事情。不过为了方便大家理解，还是说说界面的内容吧。

由于之前已经接管了数据，所以最后要做的就是显示数据，每个数据

{{topAuthor}} 评论{{topComment}} {{topDate}}

{{info.author}} 评论{{info.comments}} {{info.date}}

这里使用的是MVVM思想，将数据绑定到UI界面，在js文件中获取数据后，这里使用数据。

这里，因为每条新闻的图片数量是不确定的，最多只显示三张图片。所以直接固定3个标签，固定大小，没有图片的时候，图片就不会显示了。

详情页面

很多我在主页上已经讲到详情页的东西我就不多说了。不明白的可以去看源码。毕竟，胡说八道是浪费时间。我会尽量挑选出最激动人心的部分来写。

首页上的每条新闻都绑定了一个跳转点击事件。点击新闻时会跳转到详情页，并将id和新闻id作为参数传递给详情页。

showDetail: function(e) { // 点文章显示文章详情 let item = e.currentTarget.dataset.item; let title = this.data.title; // console.log(e) wx.navigateTo({ url:`../detail/detail?contentId=${item}&title=${title}` }) }

点击跳转到详情页面后，会在事件中获取对应的新闻id，并将id存入data中。由于我爬详情页的时候没有爬下来，所以就放了一些简单的内容进去。

在详情页的这一部分，我将页面分为内容部分和评论部分。然后就是使用一个按钮来固定屏幕下方的输入框等按钮

内容部分分为四部分，分别是标题部分、作者头像和昵称、内容部分、点赞和转发部分。

对于第二部分，对于显示图像和昵称，我使用了 flex 浮动布局，并将昵称部分的 flex 设置为 1，以便头像和关注按钮位于两侧。头像使用标签，标签的大小是固定的。毕竟用户上传的图片大小肯定是不一样的。第四部分只要你用4个view来放图片和内容然后用flex布局就可以了。

现在界面布局已经完成，是时候获取数据了。点击新闻进入详情页时，会得到新闻的id sum，这样就可以从云端传递 id（每个doc的id）（集合的名字）的sum数据库取出相应的新闻数据。这里的代码就不贴了，和之前的主页差不多，有需要的可以去源码。

接下来是评论区的内容。个人觉得这个地方挺有意思的，更新数据库的时候存在权限问题。这个问题我之前没有谈过，但我打算放在评论区。

页面底部固定有评论框，包括输入框、跳转评论按钮、收藏按钮、转发按钮。

点击转发按钮，会弹出一个窗口，您可以选择要转发到的通道，并在弹出图层的背景上添加遮罩效果。仅当您单击遮罩或取消按钮时，弹出框才会消失。

这里只实现了转发到微信的功能。只需要调用微信小程序的接口即可。当您点击微信图标时，您可以将其转发给朋友或微信群。

我只是使用 wx:if 作为收集按钮来确定被点击团队的布尔值的倒数。

点击评论按钮直接跳转到评论顶部，用a包裹整个细节

使用它的一个属性-into-view，在点击底部评论按钮时，将评论区的id赋值给-into-view，实现锚点跳转。我在这个地方踩了一个坑，没有设置-into-view的高度，所以效果一直没有出来。由于详情页需要改变评论页的高度，直接设置可以完美的固定这个地方的锚点。点击跳转。

最后是输入框。点击输入框或左侧的输入按钮，弹出评论输入框。当输入框中有值时，发布按钮会改变颜色。未经授权的登录将无法发表评论

这里需要在我的页面点击登录进行授权获取用户信息。

登录功能的实现是将页面上登录按钮的属性设置为open-type=,=

点击登录按钮授权登录会获取用户信息并全局保存用户信息，以便在详情页判断或使用用户信息。

授权可以发布新闻评论。由于用户是登录时获取的，所以评论中有用户和用户。在评论输入框中输入值，用户授权登录后点击发布，数据保存到数据库。下面是评论功能函数

submit: function() { // 实现评论功能，将发布的评论同步到云数据库 let value = this.data.inputValue; let new_id = this.data.new_id; let userInfo = this.data.userInfo // let new_id = '6594157273642172936' if(userInfo){ comments.where({ new_id: new_id }).get({ success: (res) => { // console.log(res) let comms= res.data[0].comments; let people = { content: value, like: 0, avatar: userInfo.avatarUrl, nickname: userInfo.nickname } comms.unshift(people); // console.log(comm) this.setData({ comms: comms, input: '', }) wx.cloud.callFunction({ name: 'updateComments', data: { new_id: new_id, comms: comms } }).then(res =>{ console.log(res) }) } }) } }

我在评论区只为数据库创建了一个集合，开头的新闻会起作用。每个人都有一个。新闻的每条评论都被设置为一个对象。毕竟评论还包括头像昵称、点赞数、评论内容。等待。这样设置评论库的好处是，只要在一个集合中获取新闻id，就可以获得该新闻对应的评论。

刚开始更新数据库的时候，并没有使用云功能，而是直接用js更新数据。返回的信息显示请求成功但数量为0，但是我在数据库中查看时发现数据没有更新成功。我查了以下文档，发现是权限问题，因为数据的修改只能由数据的管理者或者创建者来做，数据是自己手动录入云数据库的。在js中直接更新数据库时，不是创建者而是创建者。小程序没有管理员权限，因此无权修改数据。由于创建者不可能修改数据，只有管理员才能修改，所以这里我使用云功能来修改数据。这一点，云功能的权限等级大家应该都清楚。这是官方文档的描述。

从官方文档中可以看出云功能的强大，甚至不能乱用云功能。毕竟，权威是最高的。

既然可以评论，点赞功能是必不可少的。虽然like是一个很普通的功能，但是涉及到云数据，具体实现还是很有意思的。

每条评论都可以被点赞一次，再次点击会有所不同。评论区点赞 我这里写的功能是绑定点赞按钮的。由于每条评论都绑定了同一个like函数，所以要区分是哪条评论被点赞了，所以设置data-item="{{}}"i（用for循环生成显示评论）也对应位置评论保存在数据库中，方便区分被点赞的评论。

当被点赞时，点赞按钮会变成红色按钮，数据库中的点赞也会加一。再次点赞按钮恢复，点赞也会恢复。其实like功能还是很有意思的。这完全是我个人的想法。可能会有一些不好的地方，但还是推荐大家看看。下面是具体的实现代码

addLike: function(e) { // 点击点赞图标增加点赞数同时保存到数据库 let item = e.currentTarget.dataset.item; let new_id = this.data.new_id; let comms = this.data.comms; let likeItem = this.data.likeItem; let likebool = 'likeItem['+item+'].bool' let liken = 'likeItem['+item+'].n' if(typeof(likeItem[item]) == "undefined"){ this.setData({ [likebool]: false, [liken]: 0, }) } if(likeItem[item]){ likeItem[item].n += 1; if(likeItem[item].n%2){ comms[item].like += 1; }else{ comms[item].like -= 1; } likeItem[item].bool = !(likeItem[item].bool); }else{ likeItem[item].bool = true; likeItem[item].n = 0; comms[item].like += 1; } this.setData({ comms: comms, likeItem: likeItem }) // console.log(comms) wx.cloud.callFunction({ name: 'updateComments', data: { new_id: new_id, comms: comms } }).then(res =>{ // console.log(res) }) },

在评论输入框的下侧边栏中，有一个复选框按钮，图片按钮等。这里我使用flex布局很容易得到它，这样我就实现了在评论中插入图片的功能，并将图片保存到同时云。其实评论插入图片还是有待优化的，等我写完文章再继续优化。

我使用的是小程序云开发的文件上传接口wx..。上传图片后，会生成一张。我会在当前评论对象下保存（也就是图片地址），同时更新本地数据，然后通过一个if判断当前评论中是否包含图片，如果有，将图片显示在评论。这里就不贴代码了，有需要的可以看源码。

来源地址：云开发仿头条地址

由于项目有点大，所以我只是在短时间内实现了一些功能，其他功能我会在后续实现。其实我写这个项目是为了实际的云开发，也体会到了云开发的好处。欢迎大家指出项目中的一些不足，有好的建议也可以联系我。大家互相学习