求職類仿拉勾網(wǎng)微信小程序課件

1、微信小程序開發(fā)全案精講主講人：小剛老師第1頁，共18頁。第8章 求職類：仿拉勾網(wǎng)微信小程序8.1 需求描述及交互分析8.2 設(shè)計思路和相關(guān)知識點(diǎn)8.3 首頁招聘信息列表設(shè)計8.4 言職界面九宮格導(dǎo)航設(shè)計微信小程序開發(fā)全案精講第2頁，共18頁。第8章 求職類：仿拉勾網(wǎng)微信小程序8.5 我的界面列表導(dǎo)航設(shè)計8.6 完善簡歷布局設(shè)計8.7 編輯基本信息設(shè)計微信小程序開發(fā)全案精講第3頁，共18頁。 需求描述（1）完成三個底部標(biāo)簽導(dǎo)航設(shè)計、首頁海報輪播效果設(shè)計以及企業(yè)招聘信息列表設(shè)計；8.1 需求描述及交互分析第8章 求職類：仿拉勾網(wǎng)微信小程序微信小程序開發(fā)全案精講第4頁，共18頁。 需求描述（2）完成

2、言職社區(qū)設(shè)計，顯示社區(qū)各個主題的圖標(biāo)布局，同時可以左右切換這些主題；8.1 需求描述及交互分析第8章 求職類：仿拉勾網(wǎng)微信小程序微信小程序開發(fā)全案精講第5頁，共18頁。 需求描述（3）完成我的界面列表設(shè)計，顯示簡歷、機(jī)會、收藏、意見反饋、設(shè)置列表式導(dǎo)航；8.1 需求描述及交互分析第8章 求職類：仿拉勾網(wǎng)微信小程序微信小程序開發(fā)全案精講第6頁，共18頁。 需求描述（4）完善簡歷界面的顯示，包括添加頭像、基本信息、技能評價三個區(qū)域的布局設(shè)計；8.1 需求描述及交互分析第8章 求職類：仿拉勾網(wǎng)微信小程序微信小程序開發(fā)全案精講第7頁，共18頁。 需求描述（5）完成基本信息的編輯界面設(shè)計，可以動態(tài)的修改

3、出生年月；8.1 需求描述及交互分析第8章 求職類：仿拉勾網(wǎng)微信小程序微信小程序開發(fā)全案精講第8頁，共18頁。 交互分析（1）底部標(biāo)簽導(dǎo)航有首頁、言職、我，單擊不同底部標(biāo)簽導(dǎo)航顯示對應(yīng)的界面內(nèi)容；（2）在首頁界面里，頂部有海報輪播區(qū)域和下面顯示企業(yè)的招聘信息； （3）在言職界面里，顯示求職相關(guān)主題，可以左右滑動效果顯示相關(guān)求職主題； （4）在我界面里，顯示我相關(guān)的列表導(dǎo)航內(nèi)容； （5）在我界面里，單擊簡歷導(dǎo)航可以去完善簡歷信息，完善簡歷信息界面顯示上傳頭像、基本信息、技能評價三個區(qū)域內(nèi)容；（6）在完善簡歷界面里，單擊編輯基本信息，可以跳轉(zhuǎn)到基本信息界面里，來編輯基本信息；（7）在基本信息界面里

4、，出生年月的選擇通過時間選擇器來選擇；8.1 需求描述及交互分析第8章 求職類：仿拉勾網(wǎng)微信小程序微信小程序開發(fā)全案精講第9頁，共18頁。 設(shè)計思路（1）設(shè)計底部標(biāo)簽導(dǎo)航，準(zhǔn)備好底部標(biāo)簽導(dǎo)航的圖標(biāo)和建立相應(yīng)的三個頁面；（2）設(shè)計首頁的幻燈片輪播效果，需要準(zhǔn)備好要輪播的圖片，同時借助于swiper滑塊視圖容器組件完成幻燈片輪播效果；（3）完成企業(yè)招聘列表展示，需要使用image、view等等組件布局設(shè)計；（4）完成言職界面左右滑動效果需要使用swiper滑塊視圖容器組件； （6）上傳頭像圖片，需要使用wx.chooseImage(OBJECT)選擇圖片API；（7）將招聘信息保存到本地，需要借助

5、于wx.setStorageSync這個API將用戶數(shù)據(jù)信息同步保存到本地；（8）獲取本地招聘信息，需要使用wx.getStorageSync這個API從本地同步獲取用戶信息； （9）出生年份的選擇，需要使用picker日期選擇器來動態(tài)的選擇；8.2 設(shè)計思路及相關(guān)知識點(diǎn)第8章 求職類：仿拉勾網(wǎng)微信小程序微信小程序開發(fā)全案精講第10頁，共18頁。 相關(guān)知識點(diǎn)（1）swiper滑塊視圖容器組件，可以實現(xiàn)海報輪播效果動態(tài)展示以及頁簽內(nèi)容切換效果；（2）wx.setStorageSync將數(shù)據(jù)存儲在本地緩存中指定的 key 中，會覆蓋掉原來該 key 對應(yīng)的內(nèi)容，這是一個同步接口；（3）wx.get

6、StorageSync從本地緩存中同步獲取指定 key 對應(yīng)的內(nèi)容；（4）wx.chooseImage(OBJECT)從本地相冊選擇圖片或使用相機(jī)拍照；（5）wx.previewImage(OBJECT)預(yù)覽圖片；（6）wx.getImageInfo(OBJECT)獲取圖片信息；8.2 設(shè)計思路及相關(guān)知識點(diǎn)第8章 求職類：仿拉勾網(wǎng)微信小程序微信小程序開發(fā)全案精講第11頁，共18頁。 首頁招聘信息列表設(shè)計8.3 首頁招聘信息列表設(shè)計第8章 求職類：仿拉勾網(wǎng)微信小程序微信小程序開發(fā)全案精講第12頁，共18頁。 言職界面九宮格導(dǎo)航設(shè)計8.4 言職界面九宮格導(dǎo)航設(shè)計第8章 求職類：仿拉勾網(wǎng)微信小程序微信小程序開發(fā)全案精講第13頁，共18頁。 我的界面列表導(dǎo)航設(shè)計8.5 我的界面列表導(dǎo)航設(shè)計第8章 求職類：仿拉勾網(wǎng)微信小程序微信小程序開發(fā)全案精講第14頁，共18頁。 完善簡歷布局設(shè)計8.6 完善簡歷布局設(shè)計第8章 求職類：仿拉勾網(wǎng)微信小程序微信小程序開發(fā)全案精講第15頁，共18頁。 編輯基本信息設(shè)計8.7 編輯基本信息設(shè)計第8章 求職類：仿拉勾網(wǎng)微信小程序微信小程序開發(fā)全案精講第16頁，共18頁。