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

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

學(xué)習(xí)目標(biāo)延遲符010203了解小程序界面的設(shè)計思想掌握小程序的注冊流程掌握開發(fā)者工具的使用學(xué)習(xí)目標(biāo)通過實現(xiàn)KeepKit健身我行模塊的制作，了解使用小程序制作我行模塊的流程及開發(fā)思路，學(xué)習(xí)小程序中表單相關(guān)組件、掌握小程序地理位置的獲取和使用，詳細(xì)了解Canvas在小程序中的使用，具有使用小程序表單制作出相關(guān)的界面的能力。04具有使用軟件創(chuàng)建項目的能力企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）02學(xué)習(xí)路徑延遲符

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

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

情境導(dǎo)入我行模塊主要是班級授課，同一個班健身用戶的年齡和健身程度大致相同，并且人數(shù)固定，教練同時對整個班進(jìn)行同樣內(nèi)容的教學(xué)。在這里，用戶可根據(jù)找班級和班級大廳區(qū)域查找適合自己的班級，也可在找教練區(qū)域查找自己喜歡的教練并選擇其班級，然后通過點擊報名，支付一定的報名費即可進(jìn)入班級。本項目主要通過KeepFit健身我行模塊來學(xué)習(xí)微信小程序的表單組件與地理位置。企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）延遲符

功能描述情境入01使用rpx單位進(jìn)行長度的設(shè)置01020304使用picker組件實現(xiàn)選擇器效果使用text組件進(jìn)行文本內(nèi)容的展示使用canvas組件進(jìn)行繪圖企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）延遲符

基本框架企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）延遲符

基本框架企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）延遲符

基本框架企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）延遲符

基本框架企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）延遲符04任務(wù)技能任務(wù)技能表單組件地理位置Canvas使用

任務(wù)技能延遲符企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）picker1picker-view2picker是指在微信小程序中從底部彈起的滾動選擇器，主要用來在頁面中添加一列或多列選擇列表的組件，根據(jù)picker標(biāo)簽中的mode屬性可劃分為：普通選擇器、多列選擇器、時間選擇器、日期選擇器、省市區(qū)選擇器picker-view是嵌入頁面的滾動選擇器組件，用于在頁面中添加一個已經(jīng)被展示出來的、可以直接被滾動選擇的選擇器。表單組件延遲符企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）slider3switch4slider組件用來在視圖中添加滑動選擇器，滑動選擇器好比一個可以控制前后滑動的進(jìn)度條，相當(dāng)于HTML5中range輸入類型的input標(biāo)簽。slider組件中有很多屬性，其中min、max和step設(shè)置選擇器的范圍及步長switch組件用來在視圖中添加開關(guān)或者復(fù)選框，當(dāng)type屬性的值為switch時添加開關(guān)，為checkbox時添加復(fù)選框。開關(guān)和復(fù)選框的顏色以及默認(rèn)狀態(tài)可以通過color屬性和checked屬性進(jìn)行控制表單組件延遲符企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）map1地圖定位2map組件是一個容器組件，可以把位置信息在地圖上標(biāo)準(zhǔn)并在屏幕展示，在小程序中使用map組件只需要填入屬性以及對應(yīng)的屬性值就可以實現(xiàn)地圖的展示。map組件有多種屬性來進(jìn)行地圖的展示，其中，markers的標(biāo)記點可以在地圖上進(jìn)行位置的提醒小程序可以使用進(jìn)行位置信息獲取、位置選擇等功能的接口來獲取位置并把信息展示在地圖上，在開發(fā)過程中如果使用到地圖定位一般采用地圖定位接口和map組件相結(jié)合的方法地理位置延遲符企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）Canvas使用

Canvas使用延遲符企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）Canvas是一個矩形區(qū)域的畫布組件，是一個容器，提供了一個空白的區(qū)域，小程序中可以通過Canvas提供的API進(jìn)行圖形繪制、圖形動畫效果制作及展示。Canvas組件有多種屬性來定義畫布，包括唯一標(biāo)識canvas-id觸摸開始bindtouchstart、觸摸移動bindtouchmove等05任務(wù)實施延遲符輸入標(biāo)題第一步：使用swiper組件添加輪播圖第二步：在.js文件的data中對輪播圖數(shù)據(jù)進(jìn)行添加并通過定義對應(yīng)class設(shè)置其大小第三步：使用<view>標(biāo)簽添加下面的找班級、班級大廳、找教練部分第四步：定義對應(yīng)class設(shè)置圖片、文字的大小及位置并使用bindtap綁定頁面跳轉(zhuǎn)點擊輸入說明文字

任務(wù)實施延遲符企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）輸入標(biāo)題第一步：使用swiper組件添加輪播圖第二步：設(shè)置輪播圖容器及里面圖片的大小第三步：使用wx:for對下面的列表內(nèi)容（view標(biāo)簽包裹的標(biāo)題部分和scroll-view標(biāo)簽包裹的圖片部分）進(jìn)行添加第四步：設(shè)置文字、箭頭、圖片的位置以及圖片容器的white-space（內(nèi)容不換行）點擊輸入說明文字

任務(wù)實施延遲符企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）輸入標(biāo)題第一步：使用view組件添加對應(yīng)的圖片及文字內(nèi)容第二步：使用wx:for對容器view組件進(jìn)行列表渲染，并在.js文件的data中添加相應(yīng)數(shù)據(jù)第三步：設(shè)置圖片容器的多邊形樣式第四步：通過定義文字部分的overflow及white-space樣式來設(shè)置文字部分超出部分隱藏以及內(nèi)容不折疊點擊輸入說明文字

任務(wù)實施延遲符企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）輸入標(biāo)題第一步：使用view組件及image組件對頁面中的信息進(jìn)行添加第二步：在.js文件的data中添加相應(yīng)的班級信息、開班時間、結(jié)束時間、班級簡介等數(shù)據(jù)第三步：設(shè)置圖片及文字內(nèi)容的位置和大小點擊輸入說明文字

任務(wù)實施延遲符企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）06任務(wù)總結(jié)延遲符任務(wù)技能任務(wù)實施任務(wù)總結(jié)任務(wù)描述本任務(wù)通過學(xué)習(xí)KeepKit健身我行模塊，能夠?qū)π〕绦虻拈_發(fā)流程有進(jìn)一步的了解，能夠通過所學(xué)的表單組件、地理位置的獲取等制作成用戶登錄后顯示用戶所在的位置，同時能夠根據(jù)所學(xué)內(nèi)容在設(shè)計及制作方面更上一層樓。

任務(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教程