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

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

2、言职社区设计，显示社区各个主题的图标布局，同时可以左右切换这些主题；8.1 需求描述及交互分析第8章 求职类：仿拉勾网微信小程序微信小程序开发全案精讲第5页，共18页。 需求描述（3）完成我的界面列表设计，显示简历、机会、收藏、意见反馈、设置列表式导航；8.1 需求描述及交互分析第8章 求职类：仿拉勾网微信小程序微信小程序开发全案精讲第6页，共18页。 需求描述（4）完善简历界面的显示，包括添加头像、基本信息、技能评价三个区域的布局设计；8.1 需求描述及交互分析第8章 求职类：仿拉勾网微信小程序微信小程序开发全案精讲第7页，共18页。 需求描述（5）完成基本信息的编辑界面设计，可以动态的修改

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

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

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

6、StorageSync从本地缓存中同步获取指定 key 对应的内容；（4）wx.chooseImage(OBJECT)从本地相册选择图片或使用相机拍照；（5）wx.previewImage(OBJECT)预览图片；（6）wx.getImageInfo(OBJECT)获取图片信息；8.2 设计思路及相关知识点第8章 求职类：仿拉勾网微信小程序微信小程序开发全案精讲第11页，共18页。 首页招聘信息列表设计8.3 首页招聘信息列表设计第8章 求职类：仿拉勾网微信小程序微信小程序开发全案精讲第12页，共18页。 言职界面九宫格导航设计8.4 言职界面九宫格导航设计第8章 求职类：仿拉勾网微信小程序微信小程序开发全案精讲第13页，共18页。 我的界面列表导航设计8.5 我的界面列表导航设计第8章 求职类：仿拉勾网微信小程序微信小程序开发全案精讲第14页，共18页。 完善简历布局设计8.6 完善简历布局设计第8章 求职类：仿拉勾网微信小程序微信小程序开发全案精讲第15页，共18页。 编辑基本信息设计8.7 编辑基本信息设计第8章 求职类：仿拉勾网微信小程序微信小程序开发全案精讲第16页，共18页。