首页
学习
活动
专区
圈层
工具
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

第三个页面:构建新闻详情页面

笔记内容:构建新闻详情页面 从文章列表跳转到新闻详情页(组件自定义属性及获取属性) 在编写从文章列表跳转到新闻详情页的代码之前,先来修改一下之前的页面,之前我们编写了两个模板文件,但是还有两个细节没有完善好...class='post-like-font'>{{collection}} 完成以上的修改后,就可以开始编写新闻详情页的代码了...---- 先静后动,先构建新闻详情页面样式 编写post-detail.wxml代码: 新闻详情页面的数据放进数据文件中,然后进行数据绑定: post-data.js文件内容: // 将数据整合成数组类型 var local_database = [ {...我个人觉得开发项目应该先开发出一个能够上线运行的原型,在运营的过程中再逐步去修复bug,迭代版本。

1.9K20
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    第 08 篇:开发博客文章详情页

    ,已同步更新到 HelloGitHub-Team 仓库 点击本文最下方的“阅读原文”即可获取 首页展示的是所有文章的列表,当用户看到感兴趣的文章时,他点击文章的标题或者继续阅读的按钮,应该跳转到文章的详情页面来阅读文章的详细内容...现在让我们来开发博客的详情页面,有了前面的基础,开发流程都是一样的了:首先配置 URL,即把相关的 URL 和视图函数绑定在一起,然后实现视图函数,编写模板并让视图函数渲染模板。...设计文章详情页的 URL 回顾一下我们首页视图的 URL,在 blog\urls.py 文件里,我们写了: blog/urls.py from django.urls import path from...比如我们可以把文章详情页面对应的视图设计成这个样子:当用户访问 /posts/1/ 时,显示的是第一篇文章的内容,而当用户访问 /posts/2/ 时,显示的是第二篇文章的内容,...然而如果你尝试跳转到详情页后,你会发现样式是乱的。这在 博客从“裸奔”到“有皮肤”[3] 时讲过,由于我们是直接复制的模板,还没有正确地处理静态文件。

    45930

    Thinkphp框架搭建企业官网之前期分析

    Thinkphp是一个国产老牌的php开发框架,最初开始于2006年,在07年的时候更名为Thinkphp,在今年由开源中国主办的“2018 年度最受欢迎中国开源软件评选”,荣获开源开发框架榜单的第一位...,thinkphp支持windows、linux、unix等系统,PHP要求5.6版本及以上,遵循apache2开源协议,采用MVC模式,即M:model层-数据库操作层,V:view层-视图层,C:控制器层...、联系方式 产品详情页:产品详情、子级栏目、关于我们、联系方式 新闻列表页:新闻列表、子级栏目、关于我们、联系方式 新闻详情页:新闻详情、子级栏目、关于我们、联系方式 单页面:相关单页面信息、子级栏目、...详情页 我们现在在来看一看网站后台我们需要实现哪些功能:系统设置、轮播图设置、导航设置、产品管理、新闻管理、友链管理、会员管理、管理员管理、日志管理、数据管理、个人中心等功能; 实例功能图如下: ?...版本说明:我们在v1版本中暂时不做登录、注册、个人中心功能; 开发框架:Thinkphp5.0 + layui(开源中国18年评定开源软件第四名); 项目说明:使用thinkphp5.0做后台开发、layui

    1.1K20

    小程序云开发实战七:云开发首页列表跳转详情页

    1:实战六之中,列表页已经完成,现在新建一个详情页,打开app.json,"pages/details/details",,自动生成了一个详情页 ?...4:如何知道要跳转列表图书中的哪个详情页?要在云开发里面写一个特定的id,打开云开发控制台,数据库,需要用到这个下划线是_id的字段 ? 5:给这个字段设置一个值,data-id="{{item....6:下面实现点击详情按钮跳转详情页面,看到想要的具体的内容,看完控制台,因为具体数据是来自于event,currentTarget ?...分割线======分割线=======分割线=======分割线 开始写详情页的一些代码 1:初始化db的实例 const db = wx.cloud.database({}); ?...3:具体展示 在wxml里面写上想要拿到的数据,ok,详情页面展示的数据 ? 4:效果如下 ?

    1.6K50

    小程序云开发实战七:云开发首页列表跳转详情页

    1:实战六之中,列表页已经完成,现在新建一个详情页,打开app.json,"pages/details/details",,自动生成了一个详情页 2:打开首页列表页代码,绑定详情按钮跳转事件 wxml...里面的绑定事件,在控制台打印一下event,方便后续测试 viewitem: function(event) { console.log(event) } 4:如何知道要跳转列表图书中的哪个详情页...要在云开发里面写一个特定的id,打开云开发控制台,数据库,需要用到这个下划线是_id的字段 5:给这个字段设置一个值,data-id="{{item....6:下面实现点击详情按钮跳转详情页面,看到想要的具体的内容,看完控制台,因为具体数据是来自于event,currentTarget 所以js里面声明一下 var id = event.currentTarget.dataset.id...res.data }) } }) }, }) ok,进入页面的时候,可以看到appdata里面的book 3:具体展示 在wxml里面写上想要拿到的数据,ok,详情页面展示的数据

    74242

    小程序开发项目实战:新闻聚合应用

    小程序开发项目实战:新闻聚合应用一、引言随着移动互联网的发展,新闻聚合类应用变得越来越流行,用户通过这些应用可以快速获取到最新的新闻、热点话题及深度报道。...新闻详情页:点击新闻标题后,展示该新闻的详细内容,并且可以进行分享、评论等操作。搜索功能:用户可以根据关键词搜索感兴趣的新闻内容。推送通知:向用户推送重要的新闻更新和热点事件。...id=${newsId}` // 跳转到新闻详情页 }); }});在这个首页实现中,我们使用 wx.request() 来请求后台的新闻数据,并将获取的新闻列表渲染到页面上。...每条新闻都可以点击跳转到详情页。4.2 新闻详情页新闻详情页用于展示每条新闻的详细内容,用户可以在该页面查看完整的新闻内容,并且进行评论或分享。...地址:微信小程序开发实战 《微信小程序新闻聚合应用开发》 本文介绍了如何使用小程序开发新闻聚合类应用,涵盖了数据获取、展示等功能。 地址:微信小程序新闻聚合应用开发

    15800

    php开发小结

    不能依赖框架 作为一个php实习生,为了高效快速的完成公司交待的项目,你很容易的选择一个框架进行开发,这正是外包公司要求你的——效率。...一个项目下来,借用框架其实我们很少会写一些原生的sql语句、理解框架内置函数的原理了,对于一个成长的php开发工程师来说,这是不好了,也是容易误导自己的。...linux服务器学习 有关于开发环境、生产环境服务器部署的这些东西是必学的,linux操作系统命令行的学习作为基础知识是必学的也是很重要的。...学习的方式也很简单,“多用,多敲,多练习”,最好的就是自己购置一台服务器来,可以在阿里云或者腾讯买,在部署开发环境的过程中,对linux命令的使用也会更加熟练。...我个人开发过程中喜欢使用phpstorm上的git插件扩展开对项目的代码进行管理,图像化处理还是比git命令行操作来得简便一些。 基础知识 最后的最后,还是要提一下这个。

    1.4K20
    领券