《微信小程序項目實戰(zhàn)》課件-CORE02

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

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

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

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

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

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

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

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

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

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

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

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

任務(wù)總結(jié)延遲符企業(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/