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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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