知乎日报，微信开发实战

前言看了这么多小程序，我想各位读者对小程序几乎有了一定的了解。本文就不谈介绍了。现在我们必须通过知乎日报的一个小程序来练习它，以加深我们对微信小程序api的理解。

好了，我们开始吧。

首先，我们来看看今天要做的知乎日报的结果。如下图。但由于篇幅问题，今天我只讲主页的完成，它包括与后端的交互、页面布局、数据呈现、事件响应等。，基本上包括如何制作单个页面的所有开发。

知乎每日小程序主页

1.资源准备知乎期刊-短版API:

news -at . zhi Hu . com/API/4/news/latest今日热文news.at.zhihu.com/api/4/news/before/更多往期热文以上两个地址是我们今天要做的主页的API，我们将发起一个请求来获取数据以进行渲染。

2.Home JS接下来，我们将开始编写代码。请保持主页的目录结构与我下面的图片一致。

第一页上有三个文档

好的，首先我们来写一个JS文件。代码如下，我添加了详细的注释。

//index.js//index.js//获取应用程序实例varapp = getapp（）varutils = require（&；#39;../../utils/util . js & amp；#39;);//初始化数据页（{ data: {list:

布局划分

3.1横幅广告首先，让我们寻找文档。将有一个特殊的横幅组件swiper（单击可跳转到文档）。

我们将使用这个swiper组件来编写我们的bannner模块，这里有一个注释。

//index.html横幅模块代码《swiper indicator -dots = & quot；{ { indicatorDots } } & quot自动播放= & quot{ {自动播放} } & quotclass = & quot横幅& quot间隔= & quot{ { interval } } & quot持续时间= & quot{ {持续时间} } & quot& gt& lt！--循环bannner图片开始--》；& lt阻止wx:for = & quot；{ { banner } } & quot& gt& ltswiper -item class = & quot；横幅& quot& gt& ltimage src = & quot{ { item.image } } & quotdata -id = & quot；{ { item.id } } & quotbindtap = & quotbindViewTap & quotclass = & quotbanner -图像& quot宽度= & quot100% & quot；height = & quot100% & quot；/& gt；& lttext class = & quotbanner -标题& quot& gt{ { item.title } } & lt/text & gt；& lt/swiper -item & gt；& lt/block & gt；& lt！--循环bannner图片End --》；& lt/swiper & gt；3.2热气味列表模块实际上，下面的热气味列表也是一个列表循环。这里怎么循环？同样，我们可以查询API文档。使用wx-for属性，但这只是一个属性，我们需要将其添加到标签中以执行它。为了承载这个属性，微信小程序专门定义了一个没有其他功能的标签。

另请注意，微信小程序中有许多默认设置:

所以不要对下面的项目感到惊讶。header，项目来自哪里？

代码如下:

& lt视图class = & quot新闻-项目-容器& quot& gt& lt阻止wx:for = & quot；{ { list } } & quotwx:for -index = & quot；id & quot& gt& lttext wx:if = & quot；{ { item.header } } & quotclass = & quotsub-title & quot；& gt{ { item.header } } & lt/text & gt；& lt导航器wx:else URL = & quot；../细节/细节？id = { { item.id } } & quot& gt& lt视图class = & quot新闻-项目& quot& gt& lt视图class = & quot新闻-项目-左& quot& gt& lttext class = & quot新闻-项目-标题& quot& gt{ { item.title } } & lt/text & gt；& lt/view & gt；& lt视图class = & quot新闻-项目-右& quot& gt& ltimage src = & quot{ { item . images【0】} } & quot；class = & quot新闻-图像& quot/& gt；& lt/view & gt；& lt/view & gt；& lt/navigator & gt；& lt/block & gt；& lt按钮类型= & quot主要& quotclass = & quotload -BTN & quot；size = & quot迷你& quot正在加载= & quot{ {正在加载} } & quotplain = & quot{ { plain } } & quotbindtap = & quotloadMore & quot& gt更大的

4.stylesheet index.wxss这个就不单独说了，和平时写的css几乎没什么区别。最后，将发布源代码供大家下载。

5.写在上一篇短文中，它只是带领大家制作一个与服务器交互的小演示，并加深对微信小程序的理解。后续工作是编码...敬请期待。

【相关建议】

1.下载微信微信官方账号平台源代码。

2.PigCMS（PigCMS）微电商系统运营版（独立微店商城+三级分销系统）

3.微信网王v3.4.5高级商业版微信魔方源代码

这几篇文章你可能也喜欢：

• 暂无相关推荐文章

本文由主机参考刊发，转载请注明：知乎日报，微信开发实战 https://zhujicankao.com/114037.html