KeepFit健身主界面模塊延遲符項目二企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）目錄01學習目標02學習路徑03任務描述04任務技能延遲符05任務實施06任務總結01學習目標延遲符

學習目標延遲符010203了解如何布局界面掌握小程序的項目結構掌握小程序的邏輯層方法及組件學習目標通過keepFit健身主界面模塊實現(xiàn)，了解微信小程序如何布局實現(xiàn)界面的美觀和整齊，學習微信小程序的項目結構及基本配置，對小程序的生命周期有所了解，掌握使用小程序創(chuàng)建頁面時所需要的方法和組件，具有使用微信小程序相關組件實現(xiàn)健身主頁面的能力。04具有實現(xiàn)主界面的能力企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）02學習路徑延遲符

學習路徑延遲符企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）延遲符03任務描述

任務描述企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）1功能描述2基本框架3情景導入延遲符

情境導入我知模塊是KeepFit健身項目的主界面。因此，其美觀程度非常重要，簡潔美觀的界面將會給用戶視覺上帶來一定的沖擊。研發(fā)團隊決定把輪播圖放在頁面最開始的部分，優(yōu)美的圖片和動態(tài)的輪播效果可以很大程度上吸引用戶的眼球。本項目主要通過keepFit健身主界面來學習微信小程序的結構與配置。企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）延遲符

功能描述情境入01使用pages進行頁面的配置01020304使用tabBar進行選項卡頁面的配置使用view組件進行數據的展示使用swiper組件進行輪播圖的制作企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）延遲符

基本框架企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）延遲符04任務技能任務技能微信小程序項目結構微信小程序配置小程序生命周期邏輯層方法

任務技能延遲符企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）視圖展示組件pages1untils2app.js、app.json、app.wxss3pages主要存放小程序的頁面文件，其包含多個文件夾，每個文件夾為一個頁面，包含四個文件，其中.js是事件交互文件，.json為配置文件，.wxml是界面文件，用于處理界面的相關事件，.wxss為界面美化文件。Utils是存放公用js文件的文件夾，可以存放我們定義的一些對事件處理的公共方法，能夠在任何界面的js文件中被使用

。微信小程序項目結構延遲符app.js是腳本文件，小程序的邏輯文件，能夠對一些生命周期函數方法進行處理app.json是項目中的公共配置文件，例如配置導航條樣式，底部tab菜單等app.wxss是公共樣式文件，包含全局的界面美化代碼。企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）建設制造強國12全局配置是針對整個項目進行的配置，可以被本程序所有頁面引用。進行全局配置，需要用到項目中的app.json文件，它決定著頁面文件的路徑、窗口表現(xiàn)、設置網絡超時時間、設置選項卡頁面等。頁面配置是通過配置Pages里面文件夾中的.json文件實現(xiàn)的，其目的是實現(xiàn)對應頁面中的樣式。頁面配置相對全局配置來說更加容易，主要是因為頁面所對應的.json文件只能配置app.json文件中對應的window項。微信小程序配置延遲符全局配置頁面配置企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）小程序生命周期延遲符企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）生命周期指從項目的創(chuàng)建、開始、暫停、喚起、停止和卸載的過程。小程序的生命有分兩方面，分別是應用生命周期和頁面生命周期小程序生命周期12App()函數是用來注冊一個小程序的且必須寫在app.js中，這個方法相當于提供了一個小程序的實例，開發(fā)者可以在每個頁面自己文件夾中的.js文件里通過getApp()調用這個實例，其中的參數如下表所示：Page()是用來注冊單個頁面的，要寫在每個頁面的.js文件中，其方法中的參數與App()中的參數類似。

邏輯層方法延遲符App()方法注冊程序Page()方法注冊頁面企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）屬性描述onLaunch當小程序初始化完成時會觸發(fā)onLaunch方法onShow小程序啟動或從后臺進入前臺顯示，會觸發(fā)onShow方法onHide小程序從前臺進入后臺，會觸發(fā)onHide方法

onError小程序發(fā)生腳本錯誤或者api調用失敗時，會觸發(fā)onError方法其他開發(fā)者可自行添加view1scroll-view2swiper3View是視圖容器組件，用來盛放展示數據的容器，可以將數據呈現(xiàn)給用戶。view標簽成對出現(xiàn)使用，可以在標簽中放入其他組件，也可以使用在其他組件中，使用簡單，沒有固定結構。scroll-view是滾動視圖組件，分為水平滾動和垂直滾動，可以更多的展示數據，并節(jié)約頁面的空間。視圖展示組件延遲符swiper是輪播圖組件，它是由多個容器組成，每個容器之間可以滑動切換，其代碼結構由輪播圖容器（<swiper>標簽）和輪播圖組件（<swiper-item>標簽）組成。企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）05任務實施延遲符輸入標題輸入標題輸入標題第一步：在app.json文件中進行頁面和選項卡配置。第二步：使用<swiper>標簽添加輪播圖并設置樣式第三步：使用<view>標簽對下方列表進行制作并設置對應樣式第四步：為訓練專區(qū)和音樂專區(qū)添加跳轉事件點擊輸入說明文字點擊輸入說明文字點擊輸入說明文字

任務實施延遲符企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）06任務總結延遲符任務技能任務實施任務總結任務描述本任務通過學習KeepFit健身主界面，了解微信小程序如何布局實現(xiàn)界面的美觀和整齊，掌握小程序的項目結構和對小程序的生命周期有深入的了解，掌握小程序的邏輯層方法和視圖展示的組件，并通過所學知識，制作出KeepFit健身主界面和相關網站的輪播圖。

任務總結延遲符企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）謝謝觀賞PPT模板下載：/moban/行業(yè)PPT模板：/hangye/節(jié)日PPT模板：/jieri/PPT素材下載：/sucai/PPT背景圖片：/beijing/PPT圖表下載：/tubiao/優(yōu)秀PPT下載：/xiazai/PPT教程：/powerpoint/Word教程：/word/