第3章资讯类：仿今⽇头条⼩程序
⼩程序开发全案精讲主讲⼈：⼩刚⽼师第3章资讯类：仿今⽇头条⼩程序3.1需求描述及交互分析3.2设计思路和相关知识点3.3新
闻频道滑动效果设计3.4⾸页新闻内容设计⼩程序开发全案精讲第3章资讯类：仿今⽇头条⼩程序3.5⾸页新闻详情页设计3
.6我的界⾯列表式导航设计3.7系统设置⼆级界⾯设计⼩程序开发全案精讲第3章资讯类：仿今⽇头条⼩程序3.1需求描
述及交互分析需求描述（1）新闻频道滑动效果设计，包括底部标签导航设计、新闻检索框设计、新闻频道滑动效果设计；⼩程序开发全案精
讲第3章资讯类：仿今⽇头条⼩程序3.1需求描述及交互分析需求描述（2）⾸页新闻内容设计，包括新闻标题、新闻图⽚以及新闻
评论设计；⼩程序开发全案精讲第3章资讯类：仿今⽇头条⼩程序3.1需求描述及交互分析需求描述（3）⾸页新闻详情页设计
，
显⽰新闻的详细内容，包括标题、发布⼈、发布时间、正⽂内容以及底部评论区域；⼩程序开发全案精讲第3章资讯类：仿今⽇头条
⼩程序3.1需求描述及交互分析需求描述（4）我的界⾯列表式导航式设计，采⽤列表式导航来设计我的界⾯，同时作为⼆级界⾯的导航；微
信⼩程序开发全案精讲第3章资讯类：仿今⽇头条⼩程序3.1需求描述及交互分析需求描述（5）系统设置⼆级界⾯设计；⼩程
制作查询类小程序序开发全案精讲第3章资讯类：仿今⽇头条⼩程序3.1需求描述及交互分析交互分析（1）⾸页、我的底部标签导航，单击不同标签
导航，显⽰对应的导航内容界⾯；（2）新闻频道滑动效果设计，新闻频道可以向左向右滑动，单击不同的新闻频道可以显⽰对应新闻频道内容；（
3）⾸页新闻内容可以点击进去查看完整的新闻内容，展⽰新闻的标题、发布⼈、发布时间以及正⽂等等新闻内容；（4）我的界⾯采⽤列表式导
航设计，通过列表式导航可以进⼊到⼆级界⾯；⼩程序开发全案精讲第3章资讯类：仿今⽇头条⼩程序3.2设计思路及相关知识点
设计思路（1）设计底部标签导航，准备好底部标签导航的图标和建⽴相应的两个页⾯；（2）设计新闻频道滑动效果，需要借助于scroll
-view可滚动视图容器组件，允许⽔平⽅向上进⾏滑动；（3）设计新闻频道页签切换效果，单击新闻频道页签，显⽰相应的内容；（4）设计
⾸页新闻内容列表，设计新闻的标题样式、图⽚的显⽰以及评论；（5）设计⾸页新闻详情界⾯设计，新闻标题、发布⼈、发布时间、关注、正⽂内
容已经评论区域；（6）设计我的界⾯，获取账号信息以及采⽤列表式导航进⾏设计；⼩程序开发全案精讲第3章资讯类：仿今⽇头条
⼩程序3.2设计思路及相关知识点相关知识点（1）app.json配置，这个⽂件来对⼩程序进⾏全局配置，决定页⾯⽂件的路径、
窗⼝表现、设置⽹络超时时间、设置底部标签导航、开启debug开发模式；（2）scroll-view可滚动视图区域组件，采⽤这个组件
可以运⾏⽔平⽅向上或者垂直⽅向上进⾏滚动，来实现新闻频道滑动效果设计；（3）swiper滑块视图容器组件，可以实现海报轮播效果动态
展⽰以及页签内容切换效果；（4）view视图容器组件，⽤来进⾏界⾯的布局、image图⽚组件⽤来展⽰图⽚信息；（5）input输⼊
框组件，⽤来输⼊单⾏⽂本内容；（6）获取账号信息，使⽤UserInfo函数来获取账户信息；（7）wx.navigat
eTo保留当前页⾯，跳转到应⽤内的某个页⾯，使⽤wx.navigateBack可以返回到原页⾯；⼩程序开发全案精讲第3章资
讯类：仿今⽇头条⼩程序3.3新闻频道滑动效果设计新闻频道滑动效果设计⼩程序开发全案精讲第3章资讯类：仿今⽇头条
⼩程序3.4⾸页新闻内容设计⾸页新闻内容设计⼩程序开发全案精讲第3章资讯类：仿今⽇头条⼩程序3.5⾸页新闻详情页
设计⾸页新闻详情页设计⼩程序开发全案精讲第3章资讯类：仿今⽇头条⼩程序3.6我的界⾯列表式导航设计我的界⾯列表式
导航设计⼩程序开发全案精讲第3章资讯类：仿今⽇头条⼩程序3.7系统设置⼆级界⾯设计系统设置⼆级界⾯设计⼩程序开发全
案精讲第3章资讯类：仿今⽇头条⼩程序总结新闻频道滑动效果设计⾸页新闻内容设计⾸页新闻详情页设计我的界⾯列表式导航设计系统设置⼆级界⾯设计⼩程序开发全案精讲谢谢观看

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。