求职类仿拉勾网微信小程序课件.pptx

1、微微信小程序开发全案精讲信小程序开发全案精讲主讲人：小刚老师主讲人：小刚老师第1页，共18页。第第8章章 求职类：仿拉勾网微信小程序求职类：仿拉勾网微信小程序8.1 需求描述及交互分析8.2 设计思路和相关知识点8.3 首页招聘信息列表设计8.4 言职界面九宫格导航设计微微信小程序开发全案精讲信小程序开发全案精讲第2页，共18页。第第8章章 求职类：仿拉勾网微信小程序求职类：仿拉勾网微信小程序8.5 我的界面列表导航设计8.6 完善简历布局设计8.7 编辑基本信息设计微微信小程序开发全案精讲信小程序开发全案精讲第3页，共18页。需求描述（1）完成三个底部标签导航设计、首页海报轮播效果设计以及企

2、业招聘信息列表设计；8.1 8.1 需求描述及交互分析需求描述及交互分析第第8章章 求职类：仿拉勾网微信小程序求职类：仿拉勾网微信小程序微微信小程序开发全案精讲信小程序开发全案精讲第4页，共18页。需求描述（2）完成言职社区设计，显示社区各个主题的图标布局，同时可以左右切换这些主题；8.1 8.1 需求描述及交互分析需求描述及交互分析第第8章章 求职类：仿拉勾网微信小程序求职类：仿拉勾网微信小程序微微信小程序开发全案精讲信小程序开发全案精讲第5页，共18页。需求描述（3）完成我的界面列表设计，显示简历、机会、收藏、意见反馈、设置列表式导航；8.1 8.1 需求描述及交互分析需求描述及交互分析第

3、第8章章 求职类：仿拉勾网微信小程序求职类：仿拉勾网微信小程序微微信小程序开发全案精讲信小程序开发全案精讲第6页，共18页。需求描述（4）完善简历界面的显示，包括添加头像、基本信息、技能评价三个区域的布局设计；8.1 8.1 需求描述及交互分析需求描述及交互分析第第8章章 求职类：仿拉勾网微信小程序求职类：仿拉勾网微信小程序微微信小程序开发全案精讲信小程序开发全案精讲第7页，共18页。需求描述（5）完成基本信息的编辑界面设计，可以动态的修改出生年月；8 8.1.1 需求描述及交互分析需求描述及交互分析第第8章章 求职类：仿拉勾网微信小程序求职类：仿拉勾网微信小程序微微信小程序开发全案精讲信小程

4、序开发全案精讲第8页，共18页。交互分析（1）底部标签导航有首页、言职、我，单击不同底部标签导航显示对应的界面内容；（2）在首页界面里，顶部有海报轮播区域和下面显示企业的招聘信息；（3）在言职界面里，显示求职相关主题，可以左右滑动效果显示相关求职主题；（4）在我界面里，显示我相关的列表导航内容；（5）在我界面里，单击简历导航可以去完善简历信息，完善简历信息界面显示上传头像、基本信息、技能评价三个区域内容；（6）在完善简历界面里，单击编辑基本信息，可以跳转到基本信息界面里，来编辑基本信息；（7）在基本信息界面里，出生年月的选择通过时间选择器来选择；8.1 8.1 需求描述及交互分析需求描述及交互

5、分析第第8章章 求职类：仿拉勾网微信小程序求职类：仿拉勾网微信小程序微微信小程序开发全案精讲信小程序开发全案精讲第9页，共18页。设计思路（1）设计底部标签导航，准备好底部标签导航的图标和建立相应的三个页面；（2）设计首页的幻灯片轮播效果，需要准备好要轮播的图片，同时借助于swiper滑块视图容器组件完成幻灯片轮播效果；（3）完成企业招聘列表展示，需要使用image、view等等组件布局设计；（4）完成言职界面左右滑动效果需要使用swiper滑块视图容器组件；（6）上传头像图片，需要使用wx.chooseImage(OBJECT)选择图片API；（7）将招聘信息保存到本地，需要借助于wx.se

6、tStorageSync这个API将用户数据信息同步保存到本地；（8）获取本地招聘信息，需要使用wx.getStorageSync这个API从本地同步获取用户信息；（9）出生年份的选择，需要使用picker日期选择器来动态的选择；8.2 8.2 设计思路及相关知识点设计思路及相关知识点第第8章章 求职类：仿拉勾网微信小程序求职类：仿拉勾网微信小程序微微信小程序开发全案精讲信小程序开发全案精讲第10页，共18页。相关知识点（1）swiper滑块视图容器组件，可以实现海报轮播效果动态展示以及页签内容切换效果；（2）wx.setStorageSync将数据存储在本地缓存中指定的 key 中，会覆盖掉

7、原来该 key 对应的内容，这是一个同步接口；（3）wx.getStorageSync从本地缓存中同步获取指定 key 对应的内容；（4）wx.chooseImage(OBJECT)从本地相册选择图片或使用相机拍照；（5）wx.previewImage(OBJECT)预览图片；（6）wx.getImageInfo(OBJECT)获取图片信息；8.2 8.2 设计思路及相关知识点设计思路及相关知识点第第8章章 求职类：仿拉勾网微信小程序求职类：仿拉勾网微信小程序微微信小程序开发全案精讲信小程序开发全案精讲第11页，共18页。首页招聘信息列表设计8.3 8.3 首页首页招聘信息列表设计招聘信息列表

8、设计第第8章章 求职类：仿拉勾网微信小程序求职类：仿拉勾网微信小程序微微信小程序开发全案精讲信小程序开发全案精讲第12页，共18页。言职界面九宫格导航设计8.4 8.4 言言职界面九宫格导航设计职界面九宫格导航设计第第8章章 求职类：仿拉勾网微信小程序求职类：仿拉勾网微信小程序微微信小程序开发全案精讲信小程序开发全案精讲第13页，共18页。我的界面列表导航设计8 8.5.5 我我的界面列表导航设计的界面列表导航设计第第8章章 求职类：仿拉勾网微信小程序求职类：仿拉勾网微信小程序微微信小程序开发全案精讲信小程序开发全案精讲第14页，共18页。完善简历布局设计8 8.6.6 完善完善简历布局设计简历布局设计第第8章章 求职类：仿拉勾网微信小程序求职类：仿拉勾网微信小程序微微信小程序开发全案精讲信小程序开发全案精讲第15页，共18页。编辑基本信息设计8.7 8.7 编辑编辑基本信息设计基本信息设计第第8章章 求职类：仿拉勾网微信小程序求职类：仿拉勾网微信小程序微微信小程序开发全案精讲信小程序开发全案精讲第16页，共18页。首页招聘信息列表设计 言职界面九宫格导航设计 我的界面列表导航设计 完善简历布局设计 编辑基本信息设计总结总结第第8章章 求职类：仿拉勾网微信小程序求职类：仿拉勾网微信小程序微微信小程序开发全案精讲信小程序开发全案精讲第17页，共18页。第18页，共18页。