《微信小程序开发入门与项目实战》高职全套教学课件.pptx

项目1微信小程序入门.pptx

项目2开发环境搭建及开发工具介绍.pptx

项目3从“HelloWechat”开启微信小程序之旅.pptx

项目4新闻列表页面设计.pptx

项目5天气预报查询实现.pptx

项目6美好时光视频相册制作.pptx

项目7小程序电子书架设计.pptx

项目8学生学籍卡展示.pptx

项目9会议邀请函设计.pptx

项目10设计实现模拟时钟.pptx

项目11推箱子游戏设计.pptx

项目12综合项目——校园点餐小程序.pptx;项目1微信小程序入门;项目1微信小程序入门;;1.1知识准备;1.1.1微信小程序概述;1.1.1微信小程序概述;1.1.1微信小程序概述;1.1.1微信小程序概述;1.1.2开发团队管理;1.2项目实施;任务1微信小程序开发前准备;任务1微信小程序开发前准备;任务1微信小程序开发前准备;任务1微信小程序开发前准备;任务2人员组织结构分配;任务2人员组织结构分配;任务2人员组织结构分配;拓展训练;搭建环境创建项目;项目小结;项目2开发环境搭建及开发工具介绍;项目2开发环境搭建及开发工具介绍;;2.1知识准备;2.1.1开发环境搭建;2.1.2创建首歌微信小程序;2.2项目实施;任务1软件安装;任务1软件安装;任务1软件安装;任务2微信开发者工具功能使用;任务2微信开发者工具功能使用;任务2微信开发者工具功能使用;任务2微信开发者工具功能使用;拓展训练;搭建环境创建项目;项目小结;项目3从“HelloWechat”开启微信小程序之旅;项目3从“HelloWechat”开启微信小程序之旅;;3.1知识准备;3.1.1小程序目录结构;3.1.2页面元素和样式;3.1.2页面元素和样式;3.1.3Flex布局;3.1.3Flex布局;3.1.3Flex布局;3.1.3Flex布局;3.1.4自适应尺寸单位;3.2项目实施;任务1手动编写第一个小程序页面;任务1手动编写第一个小程序页面;任务2设计小程序页面样式;任务2设计小程序页面样式;任务2设计小程序页面样式;任务3全局样式设计及项目配置;任务3全局样式设计及项目配置;任务3全局样式设计及项目配置;拓展训练;首个微信小程序的HelloWorld;项目小结;项目4新闻列表页面设计;素质目标：

?技术创新支撑国家发展,推动社会进步。微信小程序带来便利与优化,促进社会发展。

?服务人民是科技初??,微信小程序以用户需求为导向,提供智能化、个性化服务,实现优质体验。

?科技创新与文化创新相辅相成,微信小程序新闻页面注重文化内涵,提供丰富阅读体验,激发文化自信。

?良好信用与道德是科技保障,微信小程序新闻页面设计需保护用户隐私,遵守法律,培养网络公民意识。;;4.1知识准备;4.1.1swiper组件;4.1.1swiper组件;4.1.1swiper组件;4.1.2image组件的缩放模式及裁剪模式;4.1.2image组件的缩放模式及裁剪模式;4.1.2image组件的缩放模式及裁剪模式;4.1.3Page页面的生命周期;onLoad、onShow和onReady确实按照前面讲的执行顺序运行；

onLoad和onReady在页面运行生命周期中仅执行一次，除非页面运行的onUnload进行了卸载；

onHide与OnShow在页面生命周期内可以多次执行；

除了FirstRender首次渲染完毕调用onReady函数监听外，后续页面多次执行Rerender再次渲染，此时并没有提供相应监听函数。因此，在页面生命周期函数中onReady只进行“第一次渲染”完成的监听工作。;小程序中实现页面结构的wxml具有数据绑定的功能。

1.简单绑定

可以在wxml页面中使用{{变量名}}的形式表示动态数据。例如我们在pages/test2/test2.wxml页面中原有代码下方编写如下代码：

view{{msg}}/view

此时，msg这个词不会直接显示在wxml页面中，而是会显示msg这个变量所对应的值，通过在页面js文件中的data属性中创建同名变量来添加动态数据值。打开该项目对应的test2.js文件，编写代码如下所示：

Page({

data:{

msg:Hellowelecome！

}

})

保存编译以后，可以观察到上述代码将“Hellowelecome！”渲染到index.wx