微信小程序开发项目实战（微课版）课件全套 黄龙泉 项目1--10 初识微信小程序---新闻数据接口.pptx

;;;小程序的开发过程;;;;;;;;;项目一初识微信小程序;;;;;;;;;;;;;;;;项目一初识微信小程序;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;Flex弹性模型布局;Flex弹性模型布局;Flex布局相关属性;Flex布局相关属性;Flex布局相关属性;Flex布局相关属性;Flex布局相关属性;Flex项目布局属性;;;;;;案例初始化;;;;;打卡名称-输入框组件;;打卡地点-地理位置API;打卡时间-picker组件;打卡时间-picker组件;重复日期-条件运算符;;;项目四商城首页模块开发;软件开发步骤;如何做好软件需求分析？;如何做好软件需求分析？;;;;产品页功能需求;购物车功能需求;个人中心页功能需求;页面;功能需求的作用;;;;微信云开发;云数据库;小程序技术架构;小程序技术架构;小程序后端开发主要使用服务器端语言和框架，如Node.js、Java、PHP等，通过接口和数据库来实现数据的交互和存储。;新建页面文件;小程序默认导航栏是黑底白字的效果，可以通过app.json中的window属性进行重新配置来定义导航栏效果。;;;;;属性;【示例4-3】使用tabBar组件，完成“梅园”小程序底部导航，

实现页面切换效果。效果所下图所示。;swiper组件的设计;表swiper组件属性;作用：在WXML页面中跳转的导航。;属性;【示例4-5】利用Flex弹性盒模型实现“梅园”小程序图片导航功能。完成效果如下图所示。;scroll-view组件的设计;表页面配置选项;图“推荐美景”功能;;公共样式的设计;公共样式的设计;;;项目四商城首页模块开发;简单来说，整个动画实现过程需要以下三步：

（1）创建一个动画实例?animation。

（2）调用实例的方法来描述动画。

（3）最后通过动画实例的export方法导出动画数据传递给组件的?animation?属性。;表wx.createAnimation接口属性;Animation动画实例;从小程序基础库2.9.0开始支持一种更友好的动画创建方式，用于代替旧的wx.createAnimation。它具有更好的性能和更可控的接口。在页面或自定义组件中，当需要进行关键帧动画时，可以使用this.animate接口：;this.animate(#container,[

{opacity:1.0,rotate:0,backgroundColor:#FF0000},

{opacity:0.5,rotate:45,backgroundColor:#00FF00},

{opacity:0.0,rotate:90,backgroundColor:#FF0000},

],5000,function(){

this.clearAnimation(#container,{opacity:true,rotate:true},function(){

console.log(清除了#container上的opacity和rotate属性)

})

}.bind(this));核心功能：商品展示是电子商城吸引用户的关键。

购物体验：提供类似现实超市的商品浏览体验。

视觉美化：通过商品展示增加商品的吸引力。

技术实现：采用弹性布局展示必威体育精装版产品。;;;;新闻功能开发流程;新闻列表页面分成筛选区域和卡片式新闻区域两部分。

筛选区域主要用于新闻分类筛选和时间排序功能，卡片式新闻区域用于显示新闻列表。

本项目配套源代码提供了新闻页面，读者可以使用微信开发者工具打开该页面，查看项目的运行结果，如图所示。

;新闻列表页面分成筛选区域和卡片式新闻区域两部分。

筛选区域主要用于新闻分类筛选和时间排序功能，卡片式新闻区域用于显示新闻列表。

本项目配套源代码提供了新闻页面，读者可以使用微信开发者工具打开该页面，查看项目的运行结果，如图所示。

;;课后练习;;;;MOCK数据;模拟数据的定义;模拟数据的定义;模拟数据的定义;模拟数据的定义;新闻列表页面数据绑定;筛选功能的设计;筛选功能的实现;下拉刷新示例;上拉触底示例;上拉触底示例;;页面跳转API;;;;新闻详情页面的设计;获取对应的详情数据;实现新闻详情页面的收藏和取消收藏功能。打开pages/newsDetail/newsDetail.wxml文件，为收藏图片添加条件渲染，根据isCollected的值判断是否有收藏。分别为两张图片绑定取消收藏和添加收藏事件。;转发分享功能的实现;;;