微信小程序開(kāi)發(fā)邊做邊學(xué) 課件 知識(shí)點(diǎn)篇-微信小程序第6、7章 駕校考題案例、簽到測(cè)距模塊開(kāi)發(fā)

小程序開(kāi)發(fā)從入門(mén)到實(shí)踐知識(shí)點(diǎn)課程練習(xí)模塊開(kāi)發(fā)駕?？碱}案例知識(shí)點(diǎn)小程序開(kāi)發(fā)wxml文件引用WXML提供兩種文件引用方式import和include。其中import可以用來(lái)引用template模板，在開(kāi)發(fā)中可以避免相同模板的重復(fù)編寫(xiě)，而include適合引入組件文件。importimport可以在該文件中使用目標(biāo)文件定義的template，例如：在index.wxml中引用了item.wxml，就可以使用item模板：小程序開(kāi)發(fā)2.import的作用域import有作用域的概念，即只會(huì)import目標(biāo)文件中定義的template，而不會(huì)import目標(biāo)文件import的template。CimportB，BimportA，在C中可以使用B定義的template，在B中可以使用A定義的template，但是C不能使用A定義的template。小程序開(kāi)發(fā)3.includeinclude可以將目標(biāo)文件除了<template/><wxs/>外的整個(gè)代碼引入，相當(dāng)于是拷貝到include位置，例如右圖所示小程序開(kāi)發(fā)各類練習(xí)頁(yè)面邏輯修改各類練習(xí)頁(yè)面邏輯修改主要包括頁(yè)面引用、文件修改兩個(gè)部分。頁(yè)面引用單擊編輯器中項(xiàng)目目錄結(jié)構(gòu)區(qū)右上角的“…”按鈕，打開(kāi)駕?？碱}的項(xiàng)目目錄，打開(kāi)pages文件夾，復(fù)制pages文件夾中的answer_classify、answer_chapter、answer_info和answer_common文件夾，打開(kāi)doudouyun項(xiàng)目目錄，在pages文件夾中新建answer文件夾，將復(fù)制的文件黏貼至answer文件中，另外將駕?？碱}中的public文件夾拷貝至doudouyun項(xiàng)目目錄下，其中public與pages在同一級(jí)目錄下。完成以上操作操作后，doudouyun項(xiàng)目的項(xiàng)目目錄結(jié)構(gòu)如圖所示。便是頁(yè)面引用完成。小程序開(kāi)發(fā)2.文件修改文件修改主要包括新增的三個(gè)頁(yè)面對(duì)應(yīng)的js文件、以及douban.js文件的修改，其中每個(gè)頁(yè)面的js文件需要修改兩處，一個(gè)是引入douban.js文件對(duì)應(yīng)的相對(duì)路徑的修改，另一個(gè)則是做題功能實(shí)現(xiàn)所需的url的修改小程序開(kāi)發(fā)完成練習(xí)功能模塊小程序的data-*屬性先簡(jiǎn)單介紹一下事件對(duì)象，如無(wú)特殊說(shuō)明，當(dāng)組件觸發(fā)事件時(shí)，邏輯層綁定該事件的處理函數(shù)會(huì)收到一個(gè)事件對(duì)象。其中BaseEvent基礎(chǔ)事件對(duì)象屬性列表詳見(jiàn)表。屬性類型說(shuō)明typeString事件類型timeStampInteger事件生成時(shí)的時(shí)間戳targetObject觸發(fā)事件的組件的一些屬性值集合currentTargetObject當(dāng)前組件的一些屬性值集合markObject事件標(biāo)記數(shù)據(jù)小程序開(kāi)發(fā)

其中type代表事件的類型，timeStamp為頁(yè)面打開(kāi)到觸發(fā)事所經(jīng)過(guò)的毫秒數(shù)。Target為觸發(fā)事件的源組件，其屬性詳見(jiàn)表。屬性類型說(shuō)明idString事件源組件的iddatasetObject事件源組件上由data-開(kāi)頭的自定義屬性組成的集合currentTarget為事件綁定的當(dāng)前組件，其屬性詳見(jiàn)表。屬性類型說(shuō)明idString當(dāng)前組件的iddatasetObject當(dāng)前組件上由data-開(kāi)頭的自定義屬性組成的集合總結(jié)：dataset是data-開(kāi)頭的自定義屬性組成的集合，在組件節(jié)點(diǎn)中可以附加一些自定義數(shù)據(jù)。這樣，在事件中可以獲取這些自定義的節(jié)點(diǎn)數(shù)據(jù)，用于事件的邏輯處理。小程序開(kāi)發(fā)作業(yè)思考.討論題討論對(duì)駕校考題幾個(gè)頁(yè)面的理解。view組件中data屬性如何實(shí)現(xiàn)向JS傳值？什么情況下賦值不能使用this.setData，要使用that.setData？if(collection)、if(collection==true)、if(!!collection)的區(qū)別？為什么data屬性中定義的urlParam，js中使用urlParam無(wú)法獲取數(shù)值？小程序開(kāi)發(fā)作業(yè)思考二.

單選題

以下關(guān)于容器屬性說(shuō)法錯(cuò)誤的是？flex-wrap屬性用于規(guī)定是否允許項(xiàng)目換行，以及多行排列時(shí)換行的方向justify-content屬性用于設(shè)置項(xiàng)目在主軸方向上的對(duì)齊方式align-items屬性用于設(shè)置項(xiàng)目在行中的對(duì)齊方式align-content屬性用于多行排列時(shí)設(shè)置項(xiàng)目在中線上小程序開(kāi)發(fā)作業(yè)思考2.進(jìn)度條Progress的哪個(gè)說(shuō)法是錯(cuò)誤的？percent控制進(jìn)度條百分比show-info在進(jìn)度條右側(cè)顯示百分比color改變進(jìn)度條的顏色active_modeforwards控制動(dòng)畫(huà)從頭播放,backwards從上次結(jié)束點(diǎn)開(kāi)始播放二.單選題小程序開(kāi)發(fā)作業(yè)思考

3.下列對(duì)于text屬性描述錯(cuò)誤的是？selectable用于控制文本是否可選space可以顯示連續(xù)空格decode可以控制是否解碼ensp可以根據(jù)字體設(shè)置空格的大小4.WXML中g(shù)etBlur和getInput的區(qū)別是？getBlur限制最大字符長(zhǎng)度限制為10getInput限制最大字符長(zhǎng)度限制為10使用getBlur當(dāng)文本失去焦點(diǎn)，就會(huì)觸發(fā)JS函數(shù)，使用getInput當(dāng)變量修改時(shí)才觸發(fā)函數(shù)getInput可以禁止輸入框輸入文字二.單選題小程序開(kāi)發(fā)作業(yè)思考

5.以下關(guān)于項(xiàng)目屬性說(shuō)法錯(cuò)誤的是？order屬性用于設(shè)置項(xiàng)目沿主軸方向上的排列順序，數(shù)值越大，排列越靠前flex-shrink屬性用于設(shè)置項(xiàng)目收縮因子flex-grow屬性用于設(shè)置項(xiàng)目擴(kuò)張因子flex-basis屬性根據(jù)主軸方向代替項(xiàng)目的寬或高二.單選題6.小程序創(chuàng)建工程顯示：cetificateisnotyetvalid可能的原因是？小程序語(yǔ)言設(shè)置錯(cuò)誤小程序Appid設(shè)置錯(cuò)誤小程序新建地址錯(cuò)誤電腦時(shí)間未設(shè)置為當(dāng)前時(shí)間解析：系統(tǒng)時(shí)間不正確會(huì)導(dǎo)致工程無(wú)法正常創(chuàng)建小程序開(kāi)發(fā)作業(yè)思考7.以下關(guān)于容器屬性flex-direction的說(shuō)法錯(cuò)誤的是？row:默認(rèn)值，主軸在水平方向上從左到右row-reverse；主軸是row的反方向，項(xiàng)目按照主軸方向從右到左排列column：主軸在垂直方向上從上而下，項(xiàng)目按照主軸方向從上往下排列column-reverse：主軸是column的反方向，項(xiàng)目按照從左到右排列二.單選題謝謝觀看小程序開(kāi)發(fā)從入門(mén)到實(shí)踐知識(shí)點(diǎn)簽到測(cè)距模塊開(kāi)發(fā)位置信息相關(guān)API調(diào)用知識(shí)點(diǎn)小程序開(kāi)發(fā)在小程序開(kāi)發(fā)中，與位置信息的API有很多。在簽到測(cè)距頁(yè)面主要用到的是選擇位置API和獲取當(dāng)前位置API，并通過(guò)這兩個(gè)API獲取經(jīng)緯度，用于后面的測(cè)距。選擇位置APIwx.chooseLocation作為選擇位置API，它的參數(shù)詳見(jiàn)表格屬性類型必填說(shuō)明successfunction否接口調(diào)用成功的回調(diào)函數(shù)failfunction否接口調(diào)用失敗的回調(diào)函數(shù)completefunction否接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會(huì)執(zhí)行）小程序開(kāi)發(fā)其中成功回調(diào)函數(shù)中所包含的屬性詳見(jiàn)表格。屬性類型說(shuō)明namestring位置名稱addressstring詳細(xì)地址latitudestring緯度，浮點(diǎn)數(shù)，范圍為-90~90，負(fù)數(shù)表示南緯。使用gcj02國(guó)測(cè)局坐標(biāo)系longitudestring經(jīng)度，浮點(diǎn)數(shù)，范圍為-180~180，負(fù)數(shù)表示西經(jīng)。使用gcj02國(guó)測(cè)局坐標(biāo)系小程序開(kāi)發(fā)2.獲取當(dāng)前位置APIwx.getLocation作為獲取當(dāng)前位置API，它的屬性詳見(jiàn)表格屬性類型默認(rèn)值必填說(shuō)明typestringwgs84否wgs84返回gps坐標(biāo)，gcj02返回可用于wx.openLocation的坐標(biāo)altitudestringfalse否傳入true會(huì)返回高度信息，由于獲取高度需要較高精確度，會(huì)減慢接口返回速度successfunction

否接口調(diào)用成功的回調(diào)函數(shù)failfunction

否接口調(diào)用失敗的回調(diào)函數(shù)completefunction

否接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會(huì)執(zhí)行）小程序開(kāi)發(fā)其中成功回調(diào)函數(shù)中所包含的屬性詳見(jiàn)如下表格屬性類型說(shuō)明latitudenumber緯度，范圍為-90~90，負(fù)數(shù)表示南緯longitudenumber經(jīng)度，范圍為-180~180，負(fù)數(shù)表示西經(jīng)speednumber速度，單位m/saccuracynumber位置的精確度altitudenumber高度，單位mverticalAccuracynumber垂直精度，單位m（Android無(wú)法獲取，返回0）horizontalAccuracynumber水平精度，單位m小程序開(kāi)發(fā)作業(yè)思考討論題tabBar的list數(shù)組中最多有幾個(gè)tab？什么時(shí)候需要使用letthat=this？除了gcj02坐標(biāo)系，還有哪些坐標(biāo)系？margin屬性可以有1到4個(gè)值，對(duì)應(yīng)不同個(gè)數(shù)的值時(shí)，每個(gè)值所指的意思是什么？如何將Number四舍五入為指定小數(shù)位數(shù)的數(shù)字？小程序開(kāi)發(fā)二.單選題小程序目前使用的坐標(biāo)類別有哪兩種？gps和gcj02 gps和wsg84 cgcs2000和gps wsg84和gcj02解析：小程序使用的坐標(biāo)類別有兩種：wgs84坐標(biāo)和gcj02坐標(biāo)，且微信web開(kāi)發(fā)者工具目前僅支持gcj02坐標(biāo)2.小程序使用以下哪種方法獲取當(dāng)前地理位置信息？

wx.getLocation wx.gainLocation wx.catchLocation D.wx.chooseLocation 解析：wx.getLocation正確，wx.chooseLocation用于打開(kāi)地圖選擇具體位置，其他兩個(gè)方法名稱不存在。小程序開(kāi)發(fā)3.在獲取到的地理位置信息中，以下哪個(gè)表示經(jīng)度？

latitude longitude altitude D.accuracy 解析：latitude：緯度，浮點(diǎn)數(shù)，范圍為-90~90，負(fù)數(shù)表示南緯；longitude：經(jīng)度，浮點(diǎn)數(shù)，范圍為-180~180，負(fù)數(shù)表示西經(jīng)；speed：速度，浮點(diǎn)數(shù)，單位m/s；accuracy：位置的精確度；altitude：高度，單位m；4.在獲取到的地理位置中，以下哪個(gè)表示緯度？

latitude longitude altitude D.accuracy 二.單選題小程序開(kāi)發(fā)5.以下哪個(gè)方法用于打開(kāi)地圖選擇位置？

wx.checkLocation wx.findLocation wx.selectLocation wx.chooseLocation 解析：wx.chooseLocation正確，其他方法不存在

6.微信小程序怎么才能獲取地圖上下文對(duì)象？wx.createMapContest（mapId，this）wx.checkLocation wx.readLocation wx.findLocation二.單選題小程序開(kāi)發(fā)7.微信小程序怎么獲取地圖中心坐標(biāo)wx.checkLocation wx.findLocation wx.selectLocation getCenterLocation(OBJECT)8.微信小程序怎么將地圖中心移動(dòng)到當(dāng)前定位點(diǎn)wx.checkLocation wx.readLocation moveToLocation()wx.findLocation 解析：TranslateMarker（OBJECT）正確二.單選題小程序開(kāi)發(fā)

9.微信小程序怎么使標(biāo)記動(dòng)畫(huà)方式平移TranslateMarker（OBJECT）getScale(OBJECT)wx.findLocationwx.checkLocation

10.微信小程序開(kāi)發(fā)怎么在地圖上展示全部坐標(biāo)wx.checkLocation wx.findLocation wx.selectL