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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

任務總結延遲符企業(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教程