微信小程序開發(fā)實戰(zhàn)教程（PHP+Laravel+MySQL）PPT完整全套教學(xué)課件

第1章開發(fā)環(huán)境及第一個微信小程序微信小程序開發(fā)實戰(zhàn)教程（PHP+Laravel+MySQL）（微課版）全套PPT課件學(xué)習(xí)目標(biāo)了解微信小程序相關(guān)技術(shù)。掌握微信開發(fā)者工具的安裝、使用。掌握如何創(chuàng)建微信小程序。掌握微信小程序的項目架構(gòu)、頁面結(jié)構(gòu)。12341.1微信小程序簡介微信小程序提供了一個簡單高效的應(yīng)用開發(fā)框架、豐富的組件及應(yīng)用程序接口（API），幫助開發(fā)者在微信中開發(fā)具有原生App體驗的服務(wù)。因為其可以在微信內(nèi)被便捷地獲取和傳播、具有出色的使用體驗，同時開發(fā)者可以快速地開發(fā)一個小程序，所以微信小程序生態(tài)圈已非常完善并占據(jù)了小程序的主要市場。微信小程序支持的開發(fā)語言有JavaScript（簡稱JS）和TypeScript，考慮到普及性，本書以JS進(jìn)行講解。微信小程序開發(fā)涉及的技術(shù)與普通的網(wǎng)頁開發(fā)相比有很大的相似性。1.1微信小程序簡介在開發(fā)微信小程序之前，應(yīng)該具備基本的普通網(wǎng)頁開發(fā)基礎(chǔ)，具體來說，應(yīng)該理解小程序與普通網(wǎng)頁在本質(zhì)上的一些區(qū)別。網(wǎng)頁開發(fā)者可以使用各種瀏覽器暴露出來的文檔對象模型（DocumentObjectMode，DOM）API進(jìn)行DOM操作。小程序的邏輯層運行在JSCore中，并沒有一個完整瀏覽器對象，因而缺少相關(guān)的DOMAPI和瀏覽器對象模型（BrowserObjectMode，BOM）API。SCore的環(huán)境與Node.js環(huán)境也是不盡相同的，所以一些NPM的包在小程序中是無法運行的。1.1.1安裝微信開發(fā)者工具【演練】下載并安裝微信開發(fā)者工具微信開發(fā)者工具下載頁面在搜索引擎上自行搜索“微信開發(fā)者工具”，進(jìn)入微信開發(fā)者工具下載頁面，如圖所示?？筛鶕?jù)自己的操作系統(tǒng)下載對應(yīng)的安裝包并進(jìn)行安裝，這里選擇的是“Windows64”穩(wěn)定版。1.1.1安裝微信開發(fā)者工具安裝向?qū)螺d完成后，運行安裝文件，啟用安裝向?qū)?，如圖所示，單擊“下一步”按鈕。1.1.1安裝微信開發(fā)者工具許可證協(xié)議界面進(jìn)入許可證協(xié)議界面，如圖所示，閱讀授權(quán)條款并單擊“我接受”按鈕。1.1.1安裝微信開發(fā)者工具選定安裝位置界面進(jìn)入選定安裝位置界面，如圖所示，保持“目標(biāo)文件夾”默認(rèn)位置并單擊“安裝”按鈕。1.1.1安裝微信開發(fā)者工具安裝完成5G1.1.2使用微信開發(fā)者工具【演練】使用微信開發(fā)者工具微信掃碼登錄開發(fā)者工具如圖所示，第一次運行微信開發(fā)者工具時需使用微信掃描二維碼登錄開發(fā)者工具，這說明小程序的開發(fā)是實名的。1.1.2使用微信開發(fā)者工具掃描成功使用手機(jī)微信掃描二維碼，如圖所示，顯示“掃描成功”，在手機(jī)上單擊“確認(rèn)登錄”按鈕。1.1.2使用微信開發(fā)者工具登錄成功后的界面登錄成功后的界面如圖所示，界面左下角會顯示開發(fā)者的微信頭像，即開發(fā)測試時的微信賬號，因為微信小程序運行在微信內(nèi)，所以模擬的微信環(huán)境是必不可少的。1.2第一個微信小程序1.2.1新建微信小程序【演練】創(chuàng)建第一個微信小程序新建項目單擊“目錄”下拉按鈕，選擇桌面上的“wxStudy”文件夾，“項目名稱”默認(rèn)為文件夾名稱“wxStudy”，也可以自行修改項目名稱。“AppID”文本框中需要輸入開發(fā)者的AppID，為練習(xí)方便，單擊“測試號”鏈接即可（正式發(fā)布時及部分功能不可使用“測試號”功能），“開發(fā)模式”保持為默認(rèn)的“小程序”，“語言”保持為默認(rèn)的“JavaScript”,單擊“新建”按鈕。1.2第一個微信小程序新建項目成功后的窗口新建項目成功后的窗口如圖所示，窗口左上角顯示的頭像是登錄微信開發(fā)者工具的用戶微信頭像。窗口左側(cè)可查看小程序預(yù)覽效果，右側(cè)可查看項目架構(gòu)。開發(fā)界面的功能在這里不逐一進(jìn)行介紹，后續(xù)采取用到某功能（如菜單欄、工具欄）就講解相應(yīng)功能的方式進(jìn)行說明。1.2.1新建微信小程序日志頁面在窗口左側(cè)單擊頭像，進(jìn)入圖所示的日志頁面，單擊左上角的“<”圖標(biāo)可返回主頁面。系統(tǒng)默認(rèn)生成的QuickStart項目包含主頁面和日志頁面兩個頁面。1.2.1新建微信小程序新建項目成功后的窗口多數(shù)功能在計算機(jī)上預(yù)覽效果即可，如果需要在手機(jī)上預(yù)覽，則應(yīng)先確認(rèn)自己的手機(jī)微信在前臺運行，然后在工具欄中單擊“預(yù)覽”按鈕，如圖所示，最后選擇“自動預(yù)覽”選項。1.2.1新建微信小程序手機(jī)上的預(yù)覽效果選擇“打開調(diào)試”選項機(jī)上的預(yù)覽效果如圖所示。為便于后續(xù)開發(fā)測試，在手機(jī)上預(yù)覽時需切換到調(diào)試模式（如API訪問等功能要求切換到調(diào)試模式），即單擊圖中的圖標(biāo)，選擇“打開調(diào)試”選項。1.2.1新建微信小程序調(diào)試時間限制如圖所示，提示調(diào)試時間有限制，一般為2小時，足夠開發(fā)小程序時使用了，單擊“確定”按鈕。1.2.1新建微信小程序在自己的手機(jī)微信中找到正在開發(fā)的小程序如圖所示，也可以在自己的手機(jī)微信中找到正在開發(fā)的小程序，應(yīng)該是“最近使用”列表中的第一個小程序，小程序的名稱一般為“wxid_...”，選擇相應(yīng)小程序并運行即可。1.2.2打開已有微信小程序【演練】打開已有微信小程序關(guān)閉當(dāng)前項目打開教師下發(fā)的項目、網(wǎng)上下載的學(xué)習(xí)項目，或者為自己的項目更換路徑并重新打開，等等。為練習(xí)打開已有項目，需復(fù)制桌面上的“wxStudy”文件夾到“C:\”目錄下。關(guān)閉已經(jīng)打開的項目，如圖所示，單擊“項目”按鈕，選擇“關(guān)閉當(dāng)前項目”選項。1.2.2打開已有微信小程序新建項目如圖所示，在“小程序”列表中將顯示最近打開的項目，但是當(dāng)更換計算機(jī)后，如從家庭計算機(jī)中復(fù)制自己的小程序項目到學(xué)校計算機(jī)中使用，則“小程序”列表中將不會顯示該項目，需要單擊“+”按鈕以新建項目。1.2.2打開已有微信小程序?qū)腠椖咳鐖D所示，選中“導(dǎo)入項目”標(biāo)簽頁，單擊“目錄”下拉按鈕，在其中選擇要導(dǎo)入的項目的路徑。1.2.2打開已有微信小程序選擇項目文件夾這里使用的是同一臺計算機(jī)，只是以打開“C:\wxStudy”文件夾的方式模擬導(dǎo)入已有項目。如圖所示，選擇“C:\wxStudy”，單擊“選擇文件夾”按鈕。1.2.2打開已有微信小程序完成項目導(dǎo)入如圖所示，如果是自己的項目，則無須更改AppID；如果是他人的項目，則需單擊“測試號”鏈接，將AppID更換為自己的AppID，單擊“導(dǎo)入”按鈕，完成項目導(dǎo)入。1.3微信小程序代碼構(gòu)成1.3.1頁面結(jié)構(gòu)【演練】熟悉項目中一個頁面的結(jié)構(gòu)項目目錄結(jié)構(gòu)項目有主頁面和日志頁面兩個頁面，分別對應(yīng)pages目錄下的index目錄和logs目錄，如圖所示，通常（不是必須）將一個頁面放置在一個目錄下，以便于開發(fā)及管理。1.3微信小程序代碼構(gòu)成index.wxml中文件的內(nèi)容打開index.wxml文件，其內(nèi)容如圖所示，首先會看到大量的view標(biāo)簽，可理解其為普通網(wǎng)頁中的div標(biāo)簽，其他標(biāo)簽如button、image等都是網(wǎng)頁開發(fā)中常用的標(biāo)簽。WXML雖然結(jié)構(gòu)類似于HTML，但不可操作DOM。1.3.1頁面結(jié)構(gòu)index.wxss文件的內(nèi)容打開index.wxss文件，其內(nèi)容如圖所示，其和普通網(wǎng)頁中的CSS文件基本類似。打開index.js文件，其內(nèi)容如圖所示，其與普通網(wǎng)頁中的JS文件還是有較大差別的，這里無須理會這些差別，后續(xù)將詳細(xì)介紹。index.js文件的內(nèi)容1.3.2全局配置文件app.jsonapp.json文件的內(nèi)容【演練】熟悉全局配置文件app.json在項目根目錄下有一個名為“app.json”的文件，app.json是當(dāng)前小程序的全局配置，包括小程序的所有頁面路徑、界面表現(xiàn)、網(wǎng)絡(luò)超時時間、底部標(biāo)簽等。1.3.3sitemap.json配置微信現(xiàn)已開放小程序內(nèi)搜索功能，開發(fā)者可以通過配置sitemap.json或者管理后臺頁面收錄開關(guān)，來設(shè)置其小程序頁面是否允許微信索引。當(dāng)開發(fā)者允許微信索引時，微信會通過爬蟲的形式為小程序的頁面內(nèi)容建立索引。當(dāng)用戶的搜索詞條觸發(fā)該索引時，小程序的頁面將可能展示在搜索結(jié)果中。若小程序爬蟲發(fā)現(xiàn)的頁面數(shù)據(jù)和真實用戶呈現(xiàn)的不一致，那么該頁面將不會進(jìn)入索引。1.3.3sitemap.json配置【演練】配置sitemap.json默認(rèn)sitemap.json的代碼如下，表示所有頁面都會被微信索引。{"rules":[{"action":"allow","page":"*"}]}1.3.3sitemap.json配置修改sitemap.json文件，代碼如下，表示配置index頁面被索引，其余頁面不被索引。{"rules":[{"action":"allow","page":"pages/index/index"},{"action":"disallow","page":"*"}]}1.3.3sitemap.json配置修改sitemap.json文件，代碼如下，表示配置index頁面不被索引，其余頁面被索引。{"rules":[{"action":"disallow","page":"pages/index/index"}]}1.3.4項目配置文件project.config.json通常，在使用一個工具的時候，會針對各自的喜好做一些個性化配置，如界面顏色、編譯配置等，當(dāng)更換另外一臺計算機(jī)重新安裝工具的時候，需要重新配置?？紤]到這一點，微信開發(fā)者工具在每個項目的根目錄下都會生成一個project.config.json文件，在工具上做的任何配置都會寫入到這個文件中，當(dāng)重新安裝工具或者更換計算機(jī)時，只要載入同一個項目的代碼包，開發(fā)者工具就會自動恢復(fù)到開發(fā)項目時的個性化配置，包括編輯器的顏色、代碼上傳時自動壓縮等。1.3.4項目配置文件project.config.json【演練】熟悉項目配置文件project.config.json可以在項目根目錄下使用project.config.json文件對項目進(jìn)行配置。如可以修改appid、projectname的值，但通常不需要直接對project.config.json文件進(jìn)行修改。學(xué)習(xí)進(jìn)步！微信小程序開發(fā)實戰(zhàn)教程（PHP+Laravel+MySQL）（微課版）第2章基本頁面和底部導(dǎo)航微信小程序開發(fā)實戰(zhàn)教程（PHP+Laravel+MySQL）（微課版）學(xué)習(xí)目標(biāo)熟練掌握創(chuàng)建新頁面的方法熟練編寫底部導(dǎo)航代碼。理解底部導(dǎo)航各屬性的含義。進(jìn)一步熟悉微信開發(fā)者工具界面。12342.1基本頁面2.1.1創(chuàng)建頁面【演練】創(chuàng)建自己的頁面新建文件夾打開在第1章中完成的項目或直接創(chuàng)建一個新的項目。如圖所示，在目錄樹中右鍵單擊“pages”文件夾，在彈出的快捷菜單中選擇“新建文件夾”選項，輸入文件夾名稱“p1”。2.1基本頁面新建Page如圖所示，在目錄樹中右鍵單擊“p1”文件夾，在彈出的快捷菜單中選擇“新建Page”選項，輸入頁面名稱“p1”，頁面名稱通常和文件夾的名稱相同（不是必須）。2.1基本頁面一個頁面的4個文件如圖所示，在“p1”文件夾下將自動生成4個文件，分別為“p1.js”“p1.json”“p1.wxml”“p1.wxss”。2.1.1創(chuàng)建頁面p1.wxml文件的內(nèi)容如圖所示，在目錄樹中選中“p1.wxml”文件，查看其內(nèi)容，可以看到文件內(nèi)容為text標(biāo)簽中包含的一段純文本“pages/p1/p1.wxml”，這段純文本默認(rèn)是文件的路徑。2.1.1創(chuàng)建頁面目錄結(jié)構(gòu)及app.json文件的內(nèi)容現(xiàn)在的目錄結(jié)構(gòu)如圖所示，在目錄樹中選中“app.json”文件，可以看到新建頁面的同時在app.json文件中注冊了該頁面。2.1.2設(shè)置啟動頁面微信小程序開發(fā)工具采用了即時保存并刷新運行結(jié)果的方式，所以無須專門的運行操作，直接保存小程序即可，也可單擊工具欄中的“編譯”按鈕。app.json中注冊的第一個頁面就是啟動頁面。這里的第一個頁面是“pages/index/index”，所以看到的是index頁面運行的效果。2.1.2設(shè)置啟動頁面【演練】設(shè)置微信小程序啟動頁面修改app.json文件的內(nèi)容修改app.json文件的內(nèi)容，如圖所示，主要是調(diào)整了p1頁面的順序。2.1.2設(shè)置啟動頁面新頁面運行結(jié)果按“Ctrl+S”組合鍵保存所有文件，小程序會自動運行（以后簡稱保存文件），新頁面運行結(jié)果如圖所示，顯示p1.wxml文件中的純文本，現(xiàn)在還沒有設(shè)置樣式、數(shù)據(jù)等內(nèi)容。2.1.2設(shè)置啟動頁面修改樣式文件修改樣式文件p1.wxss，輸入左圖所示的代碼，保存文件。其運行結(jié)果如右圖所示，可以看到頁面p1的字體明顯變大了。2.1.2設(shè)置啟動頁面還可以通過編譯模式來設(shè)置啟動頁面，此時，項目的啟動順序不會改變，即app.json文件中頁面的順序不會改變，但在該編譯模式下，項目將按編譯模式設(shè)定的啟動頁面運行，從而方便在調(diào)試項目時直接進(jìn)入該頁面，而不需要通過項目的首頁按邏輯逐層進(jìn)入，提高了開發(fā)效率。添加編譯模式2.1.2設(shè)置啟動頁面選擇啟動頁面如圖所示，在“啟動頁面”下拉列表中選擇某個頁面，這里選擇“pages/p2/p2”頁面2.1.2設(shè)置啟動頁面單擊“確定”按鈕如圖所示，單擊“確定”按鈕，完成設(shè)置。自行觀察運行結(jié)果，這里為p2頁面的內(nèi)容，再檢查一下app.json文件的內(nèi)容，發(fā)現(xiàn)項目的啟動頁面仍然為p1。2.1.3刪除頁面當(dāng)由于項目需求變化或其他原因而不再需要某些頁面時，可以將這些頁面刪除?！狙菥殹縿h除index、logs頁面刪除頁面所在文件夾如圖所示，在目錄樹中右鍵單擊“index”文件夾，在彈出的快捷菜單中選擇“刪除”選項，單擊“確認(rèn)”按鈕。2.1.3刪除頁面刪除不存在的頁面的注冊代碼刪除不存在的頁面的注冊代碼（即圖中陰影部分所示的代碼），否則運行會出現(xiàn)錯誤提示：“未找到app.json中的定義的pages"pages/index/index"對應(yīng)的WXML文件”。2.2底部導(dǎo)航2.2.1多標(biāo)簽應(yīng)用如果希望小程序是一個多標(biāo)簽應(yīng)用（客戶端窗口的底部或頂部有標(biāo)簽欄，可以通過此欄切換頁面），則可以通過tabBar配置項指定標(biāo)簽欄的表現(xiàn)，以及切換標(biāo)簽時顯示的對應(yīng)頁面。底部導(dǎo)航list參數(shù)可以接收一個數(shù)組，需配置最少2個、最多5個標(biāo)簽。標(biāo)簽的順序與數(shù)組的順序一致，數(shù)組中的每個項都是一個對象。2.2.1多標(biāo)簽應(yīng)用部導(dǎo)航list數(shù)組中的屬性說明如表所示。屬性說明pagePath頁面路徑text標(biāo)簽上的文字iconPath圖片路徑，圖片大小限制為40KB，建議尺寸為81px×81px，不支持網(wǎng)絡(luò)圖片路徑selectedIconPath選中圖片時的圖片路徑，圖片大小限制為40KB，建議尺寸為81px×81px，不支持網(wǎng)絡(luò)圖片路徑2.2.2設(shè)計底部導(dǎo)航【演練】創(chuàng)建包含底部導(dǎo)航的項目，該項目包含兩個頁面圖片文件復(fù)制本書配套資源中的images文件夾到wxStudy目錄下。演練中將使用圖所示的4個圖片文件。2.2.2設(shè)計底部導(dǎo)航設(shè)置底部導(dǎo)航修改app.json文件，輸入圖中以方框標(biāo)注的代碼，設(shè)置底部導(dǎo)航。2.2.2設(shè)計底部導(dǎo)航底部導(dǎo)航運行結(jié)果保存文件，底部導(dǎo)航運行結(jié)果如圖所示。注意，可觀察到底部有2個標(biāo)簽，選中“頁面1”標(biāo)簽頁，將顯示“p1”對應(yīng)的內(nèi)容，選中“頁面2”標(biāo)簽頁，將顯示“p2”對應(yīng)的內(nèi)容，并可觀察到圖標(biāo)的變化。2.2.2設(shè)計底部導(dǎo)航“模擬器”“編輯器”“調(diào)試器”按鈕下面介紹微信開發(fā)者工具中集成開發(fā)環(huán)境（IntegratedDevelopmentEnvironment，IDE）的部分功能，如圖所示。自行單擊“模擬器”“編輯器”“調(diào)試器”按鈕可打開或關(guān)閉對應(yīng)窗口。2.2.2設(shè)計底部導(dǎo)航選擇機(jī)型和顯示比例單擊“機(jī)型”下拉按鈕，在彈出的下拉列表中可選擇機(jī)型（建議使用iPhone6/7/8作為設(shè)計模板）和顯示比例，單擊圖標(biāo)可以模擬開關(guān)靜音，如圖所示。2.2.2設(shè)計底部導(dǎo)航模擬主屏幕如圖所示，單擊圖標(biāo)，選擇“Home”選項，模擬主屏幕。2.2.2設(shè)計底部導(dǎo)航主屏幕效果主屏幕效果如圖所示，其和手機(jī)的主屏幕內(nèi)容沒有關(guān)聯(lián)，只是展示一段文本，其中也沒有功能，單擊任意位置即可返回到小程序，該功能主要用來進(jìn)行小程序前后臺的切換測試。學(xué)習(xí)進(jìn)步！微信小程序開發(fā)實戰(zhàn)教程（PHP+Laravel+MySQL）（微課版）第3章JS文件微信小程序開發(fā)實戰(zhàn)教程（PHP+Laravel+MySQL）（微課版）學(xué)習(xí)目標(biāo)理解app.js中的生命周期函數(shù)掌握app.js中的全局變量的用法理解page.js中的生命周期函數(shù)掌握page.js中的局部變量的用法掌握創(chuàng)建和引用模塊的方法123453.1全局邏輯文件app.jsapp.js中調(diào)用了一個App()函數(shù)。App()函數(shù)用來注冊小程序，它用于接收一個Object參數(shù)。其語法格式如下。App({...})3.1全局邏輯文件app.jsApp()函數(shù)的某些參數(shù)用來指定小程序的生命周期回調(diào)函數(shù)，常用的回調(diào)函數(shù)有以下幾種。小程序初始化完成時觸發(fā)，全局只觸發(fā)一次onLaunch()小程序從前臺進(jìn)入后臺時觸發(fā)onHide()小程序啟動或從后臺進(jìn)入前臺顯示時觸發(fā)onShow()小程序發(fā)生腳本錯誤或API調(diào)用出錯時觸發(fā)onError()點擊輸入標(biāo)題內(nèi)容3.1.1app.js中的生命周期函數(shù)【演練】編寫代碼，觀察app.js中的生命周期函數(shù)p1.wxml文件的內(nèi)容將app.js的原有代碼清除，編寫如圖所示的代碼并保存文件。其實其中只有一行代碼，用于調(diào)用App({})注冊小程序。3.1.1app.js中的生命周期函數(shù)編寫代碼在App()函數(shù)中編寫一些代碼，以測試App的生命周期函數(shù)。觀察圖中的“調(diào)試器”標(biāo)簽頁，確保選中“Console”標(biāo)簽頁，可以看到“onLaunch”和“onShow”兩行，表示小程序啟動后先后執(zhí)行了onLaunch和onShow生命周期函數(shù)。3.1.1app.js中的生命周期函數(shù)小程序切換到后臺如圖所示，單擊模擬器右上角的圖標(biāo)（或在工具欄中選擇“模擬操作”→“Home”選項），切換到主頁以模擬小程序切換到后臺。3.1.1app.js中的生命周期函數(shù)觸發(fā)了onHide()生命周期函數(shù)如圖所示，觀察“調(diào)試器”的“Console”標(biāo)簽頁，其中輸出了“onHide”，這是因為小程序切換到了后臺，觸發(fā)了onHide()生命周期函數(shù)。3.1.1app.js中的生命周期函數(shù)在模擬器中除搜索位置行以外的任意位置單擊，小程序?qū)⒒氐角芭_，再次觀察“調(diào)試器”的“Console”標(biāo)簽頁，其中輸出了“onShow”，這是因為小程序切換到了前臺，觸發(fā)了onShow()生命周期函數(shù)。onLaunch()函數(shù)沒有再次觸發(fā)，即onLaunch()函數(shù)僅在小程序載入時觸發(fā)。3.1.2app.js中的全局變量【演練】編寫代碼以理解app.js中的全局變量在App()函數(shù)中添加代碼。其中，“data1:'全局變量1'”聲明了一個變量data1，并在onLaunch()函數(shù)中使用“console.log(this.data1);”語句輸出該變量的值。在“Console”標(biāo)簽頁中可以觀察到輸出了該變量的值。3.2頁面邏輯文件page.jspage.js指的是某個頁面相應(yīng)的JS文件，以p2頁面為例，p2.js中調(diào)用了Page()函數(shù)。Page()函數(shù)用來注冊小程序中的一個頁面，其會接收一個Object類型的參數(shù)，以指定頁面的初始數(shù)據(jù)、生命周期回調(diào)、事件處理函數(shù)等。其語法格式如下。Page({...})3.2頁面邏輯文件page.jsdata：頁面的初始數(shù)據(jù)。onLoad：監(jiān)聽頁面加載。onShow：監(jiān)聽頁面顯示。onReady：監(jiān)聽頁面初次渲染完成。onHide：監(jiān)聽頁面隱藏。onUnload：監(jiān)聽頁面卸載。onPullDownRefresh：監(jiān)聽用戶下拉動作。onReachBottom：頁面上拉觸底事件的處理函數(shù)。onShareAppMessage：用戶進(jìn)行了轉(zhuǎn)發(fā)操作。onPageScroll：頁面滾動觸發(fā)事件的處理函數(shù)。

onResize：頁面尺寸改變時觸發(fā)。

onTabItemTap：當(dāng)前是標(biāo)簽頁時，單擊標(biāo)簽時觸發(fā)。3.2.1page.js中的生命周期函數(shù)【演練】編寫代碼以觀察p2.js中的生命周期函數(shù)p2.js中的生命周期函數(shù)修改p2.js文件，添加圖中下劃線所示的兩行代碼，分別表示當(dāng)頁面顯示和隱藏時執(zhí)行的動作。3.2.1page.js中的生命周期函數(shù)觀察結(jié)果保存文件。在底部導(dǎo)航中選中“頁面2”標(biāo)簽頁，觀察圖中的“調(diào)試器”標(biāo)簽頁，確保選中“Console”標(biāo)簽頁，可以看到“p2顯示”文字。3.2.2page.js頁面初始數(shù)據(jù)編寫代碼以觀察page.js頁面中的data編寫并觀察page.js頁面中的data如圖所示，修改p2.js文件，其中“var2:""”聲明了一個變量var2。在onLoad()函數(shù)中編寫如下語句。this.data.var2="頁面變量2";console.log(this.data.var2);3.2.2page.js頁面初始數(shù)據(jù)訪問全局變量訪問全局變量。修改p2.js文件，添加圖中方框所示的代碼，保存文件。在底部導(dǎo)航中選中“頁面2”標(biāo)簽頁，觀察圖中的“調(diào)試器”標(biāo)簽頁，確保選中“Console”標(biāo)簽頁，可以看到“全局變量1”文字。3.3模塊化【演練】編寫代碼以創(chuàng)建和暴露模塊修改utils/util.js文件，其內(nèi)容如圖所示。其中聲明了函數(shù)sayHello()和變量x，并通過module.exports來暴露該模塊接口。QuickStart自動生成的項目中原本有一個示例的接口函數(shù)formatTime。3.3.1創(chuàng)建和暴露模塊3.3.1創(chuàng)建和暴露模塊推薦通過module.exports來暴露模塊接口，而不使用exports來實現(xiàn)。微信小程序目前不支持直接引入node_modules，需要使用node_modules時，開發(fā)者可使用小程序支持的npm功能3.3.2引用模塊【演練】編寫代碼以創(chuàng)建和暴露模塊修改pl.js文件，其內(nèi)容如圖所示。先使用require引入模塊，再在onLoad()函數(shù)中調(diào)用模塊暴露的接口進(jìn)行測試。3.3.2引用模塊保存并運行文件，在控制臺上輸出如下結(jié)果。MonJun29202009:42:04GMT+0800(中國標(biāo)準(zhǔn)時間)p1.js:162020/06/2909:42:04p1.js:17hello，張三(3)[1,2,3]學(xué)習(xí)進(jìn)步！微信小程序開發(fā)實戰(zhàn)教程（PHP+Laravel+MySQL）（微課版）第4章WXML語法微信小程序開發(fā)實戰(zhàn)教程（PHP+Laravel+MySQL）（微課版）學(xué)習(xí)目標(biāo)掌握數(shù)據(jù)綁定的方法掌握條件渲染的用法掌握列表渲染的用法掌握定義及引用模板的方法掌握include引用方式123454.1數(shù)據(jù)綁定微信小程序是通過什么方法來實現(xiàn)數(shù)據(jù)綁定的呢？例如，一個文本框綁定JS文件中data聲明的變量value的值的代碼如下。<inputvalue="{{value}}"/>4.1數(shù)據(jù)綁定【演練】編寫代碼以熟悉數(shù)據(jù)綁定語法WXML中的動態(tài)數(shù)據(jù)均來自對應(yīng)Page的data。其實現(xiàn)步驟通常如下。在JS文件中聲明data，例如：Page({data:{stuNo:'20200001'}})4.1數(shù)據(jù)綁定在WXML文件中綁定數(shù)據(jù)，如果是綁定內(nèi)容，則可使用Mustache語法（雙大括號）將變量包括起來，例如：<view>{{stuNo}}</view>如果是綁定組件屬性，則需將屬性包括在雙引號之內(nèi)，例如：<viewid="{{stuNo}}"></view>4.1數(shù)據(jù)綁定在App()函數(shù)中添加代碼。其中，“data1:'全局變量1'”聲明了一個變量data1，并在onLaunch()函數(shù)中使用“console.log(this.data1);”語句輸出該變量的值。在“Console”標(biāo)簽頁中可以觀察到輸出了該變量的值。4.1數(shù)據(jù)綁定編寫p1.wxml，其內(nèi)容如圖所示，保存并運行文件。4.1數(shù)據(jù)綁定如圖所示，在“調(diào)試器”標(biāo)簽頁中選中“AppData”標(biāo)簽頁，修改stuNo的值，可以立即反映到運行界面上。4.1數(shù)據(jù)綁定修改p1.js文件，添加圖中陰影部分所示的代碼，即添加一個對象類型變量student。4.1數(shù)據(jù)綁定修改p1.wxml文件，使用對象類型聲明的數(shù)據(jù)，如圖所示。保存文件，觀察運行結(jié)果。代碼說明：這里學(xué)習(xí)如何使用對象類型聲明的數(shù)據(jù)。4.2條件渲染【演練】編寫代碼以熟悉條件渲染語句修改p1.js文件，添加圖中陰影部分所示的代碼。代碼作用：在data部分聲明兩個布爾變量，用于控制顯示、隱藏元素。4.2條件渲染修改p1.wxml文件，添加第一個方框中的代碼，保存文件。4.2條件渲染修改p1.wxml文件，添加block語句。4.2條件渲染也可以使用wx:else來進(jìn)行更多的邏輯控制。4.3列表渲染<viewwx:for="{{array}}">{{index}}:{{item.字段}}</view>在組件上使用wx:for控制屬性綁定一個數(shù)組，就可以使用數(shù)組中各項的數(shù)據(jù)重復(fù)渲染該組件。循環(huán)時，當(dāng)前項的變量名默認(rèn)為item，當(dāng)前項的下標(biāo)變量名默認(rèn)為index。其語法格式如下。4.3列表渲染<viewwx:for="{{array}}"wx:for-index="idx"wx:for-item="itemName">{{idx}}:{{itemName.字段}}</view>也可以使用wx:for-item指定數(shù)組當(dāng)前元素的默認(rèn)變量名item，使用wx:for-index指定數(shù)組當(dāng)前下標(biāo)的默認(rèn)變量名index。其語法格式如下。如果列表中項目的位置會動態(tài)改變或者有新的項目添加到列表中，并且希望列表中的項目保持自己的特征和狀態(tài)（如input中輸入的內(nèi)容，switch的選中狀態(tài)），則需要使用wx:key來指定列表中項目的唯一標(biāo)識符。4.3列表渲染wx:key的值以以下兩種形式提供。12字符串：表示for循環(huán)的array中item的某個property，該property的值需要是列表中唯一的字符串或數(shù)字，且不能動態(tài)改變。保留關(guān)鍵字*this：表示for循環(huán)中的item本身。這種表示需要item本身是一個唯一的字符串或者數(shù)字，實際開發(fā)時通常都可滿足該條件。4.3列表渲染【演練】編寫代碼以熟悉列表渲染語句修改p1.js文件，添加圖中方框所示的代碼。代碼作用：在data部分聲明一個students數(shù)組4.3列表渲染修改p1.wxml文件，添加wx:for語句，保存文件。自行觀察運行結(jié)果，可以看到循環(huán)輸出了students中的每一項，包括stuNo、stuName和index。4.4模板WXML提供了模板（template）功能，可以在模板中定義代碼片段，并在不同的地方調(diào)用這些代碼，達(dá)到重用的目的。具體操作如下。12定義模板：使用name屬性作為模板的名稱，并在<template>內(nèi)定義代碼片段。使用模板：使用is屬性聲明需要使用的模板，并將模板所需要的data傳入。注意，傳入data時，item前面使用“...”解構(gòu)展開。4.4模板【演練】編寫代碼以熟悉如何定義及使用模板修改p1.wxml文件，定義和使用模板，保存文件，觀察運行結(jié)果。4.5引用import語句可以使用目標(biāo)文件中使用template語句定義的模板。其語法格式如下。<importsrc="包含模板定義的文件"/>import有作用域的概念，即只會import目標(biāo)文件中定義的template。例如，CimportB，BimportA，C可以使用B定義的template，B可以使用A定義的template，但是C不能使用A定義的template。4.5引用【演練】編寫代碼，熟悉如何使用import引用模板修改p2.js文件，其內(nèi)容如圖所示。4.5引用改寫p2.wxml，其內(nèi)容如下<importsrc="../p1/p1.wxml"/><view><templateis="studentMsg"data="{{stuNo,stuName}}"/></view>保存并運行文件，在底部導(dǎo)航中選中“頁面2”標(biāo)簽頁，觀察運行結(jié)果，可以看到使用模板時，顯示的數(shù)據(jù)是頁面自身定義的數(shù)據(jù)，即p2.js中定義的student。4.5引用【演練】編寫代碼，熟悉如何使用include引用模板建一個頁面，模擬項目的共同頭部菜單。在目錄樹中右鍵單擊“pages”，在彈出的快捷菜單中選擇“新建文件夾”選項，輸入文件夾名稱“head”。在目錄樹中右鍵單擊“head”文件夾，在彈出的快捷菜單中選擇“新建Page”選項，輸入頁面名稱“head”。4.5引用修改p1.wxml文件，在開始處添加如下代碼，表示使用頭部菜單。<includesrc="../head/head.wxml"/>修改p2.wxml文件，在開始處添加如下代碼，表示使用頭部菜單<includesrc="../head/head.wxml"/>4.5引用保存并運行文件，運行結(jié)果如圖所示，頁面1和頁面2中有共同的頭部菜單。學(xué)習(xí)進(jìn)步！微信小程序開發(fā)實戰(zhàn)教程（PHP+Laravel+MySQL）（微課版）第5章事件及數(shù)據(jù)傳遞微信小程序開發(fā)實戰(zhàn)教程（PHP+Laravel+MySQL）（微課版）學(xué)習(xí)目標(biāo)熟練掌握進(jìn)行事件處理的方法理解事件冒泡機(jī)制在事件中獲取組件綁定的附加信息熟練掌握路由機(jī)制熟練掌握頁面之間進(jìn)行數(shù)據(jù)傳遞的方法123455.1事件事件是視圖層到邏輯層的通信方式，事件可以將用戶的行為反饋到邏輯層進(jìn)行處理。事件通常綁定在組件上，當(dāng)達(dá)到事件觸發(fā)條件時，就會執(zhí)行邏輯層中對應(yīng)的事件處理函數(shù)。12在組件中綁定一個事件處理函數(shù)，如bindtap，當(dāng)用戶單擊該組件的時候，會在該頁面對應(yīng)的Page中找到相應(yīng)的事件處理函數(shù)。在相應(yīng)的page.js中編寫相應(yīng)的事件處理函數(shù)。5.1事件當(dāng)一個組件上的事件被觸發(fā)后，該事件會向父節(jié)點傳遞。冒泡事件touchstart：手指觸摸動作開始。touchmove：手指觸摸后移動。touchcancel：手指觸摸動作被打斷，如來電提醒、彈窗等。touchend：手指觸摸動作結(jié)束。tap：手指觸摸后馬上離開。longpress：手指觸摸后，超過350ms再離開，如果指定了事件回調(diào)函數(shù)并觸發(fā)了這個事件，則tap事件將不被觸發(fā)。longtap：手指觸摸后，超過350ms再離開（推薦使用longpress事件）。5.1事件非冒泡事件當(dāng)一個組件上的事件被觸發(fā)后，該事件不會向父節(jié)點傳遞。常用的非冒泡事件有：form的submit事件、input的input事件、scroll-view的scroll事件。5.1事件【演練】編寫代碼以掌握使用事件的方法打開第2章中完成的項目。修改p1.wxml文件，將原有代碼清除，編寫如下代碼，保存文件。<viewbindtap="tapParent"><viewbindtap="tap1">test1</view><viewdata-stu-no="20200001"bind:tap="tap2">test2</view><viewcatchtap="tap3">test3</view></view>5.1事件修改p1.js文件，將原有代碼清除，編寫如下代碼，保存文件。Page({tap1:function(){console.log("tap1");},tap2:function(event){console.log(event);console.log(event.currentTarget.dataset.stuNo);},tap3:function(){console.log("tap3");},tapParent:function(){console.log("parent...");}})5.1事件運行結(jié)果如圖所示。5.2頁面路由5.2.1navigator組件路由【演練】通過navigator組件實現(xiàn)頁面跳轉(zhuǎn)修改p1.wxml文件，其內(nèi)容如圖所示。5.2.1navigator組件路由修改p1.wxss文件，將原有代碼清除，編寫如下代碼，保存文件。.navigator-hover{color:blue;}.other-navigator-hover{color:red;}5.2.1navigator組件路由修改p3.js文件，將原有代碼清除，編寫如下代碼，保存文件。Page({onLoad:function(options){this.setData({title:options.title});console.log(this.data.title);}})5.2.1navigator組件路由單擊“跳轉(zhuǎn)到新頁面”鏈接，運行結(jié)果如圖所示，注意鼠標(biāo)指針的位置，該頁面中包含“返回”按鈕。5.2.1navigator組件路由單擊“在當(dāng)前頁打開”鏈接，運行結(jié)果如圖所示，注意鼠標(biāo)指針的位置，該頁面中包含“主頁”按鈕，控制臺會輸出“redirect”。5.2.1navigator組件路由單擊“切換Tab”鏈接，運行結(jié)果如圖所示。注意，此處使用了open-type="switchTab"，當(dāng)一個頁面和底部導(dǎo)航綁定后，只能使用switchTab方式進(jìn)行切換，而沒有和底部導(dǎo)航綁定的頁面，要使用除switchTab之外的方式進(jìn)行頁面跳轉(zhuǎn)。5.2.2API路由常用的頁面路由API如下。wx.navigateTo：保留當(dāng)前頁面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個頁面上，但是不能跳到tabBar頁面。使用wx.navigateBack可以返回到原頁面。微信小程序中的頁面棧最多為10層。wx.redirectTo：關(guān)閉當(dāng)前頁面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個頁面上，但是不允許跳轉(zhuǎn)到tabBar頁面。wx.navigateBack：關(guān)閉當(dāng)前頁面，返回到上一頁面或多級頁面?？赏ㄟ^getCurrentPages獲取當(dāng)前的頁面棧，并決定需要返回幾層。wx.switchTab：跳轉(zhuǎn)到tabBar頁面，并關(guān)閉其他所有非tabBar頁面。wx.reLaunch：關(guān)閉所有頁面，打開到應(yīng)用內(nèi)的某個頁面。5.2.2API路由【演練】通過API路由實現(xiàn)頁面跳轉(zhuǎn)修改p1.wxml文件，其內(nèi)容如圖所示。5.2.2API路由修改p1.js文件，其內(nèi)容如圖所示。保存并運行文件，單擊“navigateTo”鏈接，該頁面中包含“返回”按鈕。navigateTo方法中的URL為“../p3/p3?title=1”，所以輸出了“1”。單擊“redirectTo”鏈接，該頁面中包含“主頁”按鈕。redirectTo方法中的URL為“../p3/p3?title=2”，所以輸出了“2”。單擊“reLaunch”鏈接，關(guān)閉所有頁面，打開應(yīng)用內(nèi)的某個頁面。單擊“switchTab”鏈接，切換到底部導(dǎo)航綁定的頁面“p2”。學(xué)習(xí)進(jìn)步！微信小程序開發(fā)實戰(zhàn)教程（PHP+Laravel+MySQL）（微課版）第6章常用API及組件微信小程序開發(fā)實戰(zhàn)教程（PHP+Laravel+MySQL）（微課版）學(xué)習(xí)目標(biāo)清楚微信小程序API的類型，熟悉界面交互API的使用了解地圖的操作步驟熟悉表單組件，并獲取表單項的值1236.1界面交互API微信小程序開發(fā)框架提供了豐富的原生API，可以方便地調(diào)用微信提供的功能，如獲取用戶信息、本地存儲、支付等。約定以on開頭的API，用來監(jiān)聽某個事件是否觸發(fā)，如wx.onSocketOpen、wx.onCompassChange等。事件監(jiān)聽API用于實現(xiàn)一些簡單的人機(jī)交互界面。界面交互API定以Sync結(jié)尾的API，如wx.setStorageSync、wx.getSystemInfoSync等。同步API大多數(shù)API是異步API，如wx.request、wx.login等。這類API通常會接收一個Object類型的參數(shù)。異步API6.1界面交互API【演練】熟悉常用界面交互API修改app.json文件，添加圖中方框所示的代碼。6.1界面交互APIview{padding:5px;}修改并保存p1.wxss文件，代碼如下。6.1界面交互API保存并運行文件，運行結(jié)果如圖所示。6.1界面交互API單擊“模態(tài)對話框”按鈕，如圖所示。6.1界面交互API單擊“消息提示框”按鈕，如圖所示。wx.showLoading({title:'加載中',})setTimeout(function(){wx.hideLoading()},2000)6.1界面交互API單擊“l(fā)oading提示框”按鈕，如圖所示。wx.showActionSheet({itemList:['A','B','C'],success(res){console.log(res.tapIndex)},fail(res){console.log(res.errMsg)}})6.1界面交互API單擊“操作菜單”按鈕，如圖所示。wx.setNavigationBarTitle({title:'當(dāng)前頁面'})6.1界面交互API單擊“動態(tài)設(shè)置當(dāng)前頁面的標(biāo)題”按鈕，如圖所示，將標(biāo)題設(shè)置為“當(dāng)前頁面”。wx.showTabBarRedDot({index:1})//wx.hideTabBarRedDot({//index:1//})6.1界面交互API單擊“顯示tabBar某項右上角紅點”按鈕，如圖所示，底部導(dǎo)航中某標(biāo)簽頁的右上方出現(xiàn)一個小紅點。wx.setTabBarBadge({index:0,text:'10'})//wx.removeTabBarBadge({//index:0//})6.1界面交互API單擊“為tabBar某項右上角添加文本”按鈕，如圖所示，底部導(dǎo)航中某標(biāo)簽頁的右上方會出現(xiàn)一個數(shù)字角標(biāo)。6.1界面交互API后續(xù)功能使用手機(jī)進(jìn)行測試的效果更好。如圖所示，單擊“預(yù)覽”按鈕，進(jìn)行掃描二維碼預(yù)覽，用手機(jī)上的微信掃描二維碼。6.1界面交互API如圖所示，確保打開調(diào)試。單擊“相冊選擇圖片或相機(jī)拍照”按鈕，如圖所示，可以繼續(xù)選擇“拍照”或“從手機(jī)相冊選擇”選項。6.1界面交互API/允許從相機(jī)和相冊中掃碼wx.scanCode({success(res){console.log(res)}})

//只允許從相機(jī)中掃碼//wx.scanCode({//onlyFromCamera:true,//success(res){//console.log(res)//}//})單擊“掃碼”按鈕，自行在手機(jī)上觀察結(jié)果。該功能的代碼如下。6.2地圖操作【演練】實現(xiàn)常用地圖操作修改并保存p2.wxml文件，代碼如下。<mapid="myMap"longitude="113.324520"latitude="23.099994"scale="14"controls="{{controls}}"bindcontroltap="controltap"markers="{{markers}}"bindmarkertap="markertap"polyline="{{polyline}}"bindregionchange="regionchange"show-locationstyle="width:100%;height:300px;"></map><view><buttonbindtap='chooseLocation'>打開地圖選擇位置</button></view><view>6.2地圖操作<buttonbindtap='getLocation'>獲取當(dāng)前的地理位置、速度</button></view><view><buttonbindtap='moveToLocation'>將地圖中心移動到當(dāng)前定位點</button></view><view><buttonbindtap='includePoints'>縮放視野展示所有經(jīng)緯度</button></view>6.2地圖操作修改并保存p2.wxss文件，代碼如下。view{padding:5px;}5G6.2地圖操作保存并運行文件，使用手機(jī)進(jìn)行測試。單擊“預(yù)覽”按鈕，用手機(jī)上的微信掃描二維碼。確保手機(jī)微信小程序打開調(diào)試。單擊“打開地圖選擇位置”按鈕，如圖所示。6.2地圖操作單擊“獲取當(dāng)前的地理位置、速度”按鈕，如圖所示，在手機(jī)上單擊“去這里”圖標(biāo)，將調(diào)用手機(jī)上的導(dǎo)航軟件6.3常用組件常用組件是WXML的一些基本標(biāo)簽，如view、input等。在微信小程序中，很多標(biāo)簽帶有自己的效果，可以實現(xiàn)一些簡單的JS邏輯。一個微信小程序頁面可以分解成多個組成部分，組件就是微信小程序頁面的基本組成單元。為了讓開發(fā)者快速進(jìn)行開發(fā)，微信小程序的宿主環(huán)境中提供了一系列基礎(chǔ)組件。組件在WXML模板文件聲明中使用，WXML的語法和HTML語法相似，微信小程序使用標(biāo)簽名來引用一個組件，通常包含開始標(biāo)簽和結(jié)束標(biāo)簽，該標(biāo)簽的屬性用來描述該組件。6.3常用組件【演練】熟悉常用組件修改p3.wxml文件，代碼如下。<view><view><formcatchsubmit="formSubmit"catchreset="formReset"><view><view>switch</view><switchname="switch"/></view>6.3常用組件<view><view>radio</view><radio-groupname="radio"><label><radiovalue="radio1"/>選項一</label><label><radiovalue="radio2"/>選項二</label></radio-group></view><view><view>checkbox</view><checkbox-groupname="checkbox"><label>5G6.3常用組件<checkboxvalue="checkbox1"/>選項一</label><label><checkboxvalue="checkbox2"/>選項二</label></checkbox-group></view><view><view>slider</view><slidervalue="50"name="slider"show-value></slider></view>5G6.3常用組件<view><view>input</view><view><view><viewstyle="margin:30rpx0"><inputname="input"placeholder="這是一個輸入框"/></view></view></view></view><view>5G6.3常用組件<buttonstyle="margin:30rpx0"type="primary"formType="submit">提交</button><buttonstyle="margin:30rpx0"formType="reset">重置</button></view></form></view></view>6.3常用組件修改p3.js文件，代碼如下。Page({data:{},formSubmit(e){console.log('form發(fā)生了submit事件，攜帶數(shù)據(jù)為：',e.detail.value)},formReset(e){console.log('form發(fā)生了reset事件，攜帶數(shù)據(jù)為：',e.detail.value)}})6.3常用組件保存并運行文件，在底部導(dǎo)航中選中“常用組件”標(biāo)簽頁，單擊“提交”或“重置”按鈕，運行結(jié)果如圖所示，注意觀察單擊“提交”按鈕后控制臺的輸出結(jié)果。學(xué)習(xí)進(jìn)步！微信小程序開發(fā)實戰(zhàn)教程（PHP+Laravel+MySQL）（微課版）第7章調(diào)用API開發(fā)新聞小程序微信小程序開發(fā)實戰(zhàn)教程（PHP+Laravel+MySQL）（微課版）學(xué)習(xí)目標(biāo)熟悉swiper輪播圖組件熟悉調(diào)用API獲取數(shù)據(jù)的方法理解頁面之間參數(shù)傳遞的用法和意義對后臺有初步的認(rèn)識熟悉輪播圖理解如何按需加載更多數(shù)據(jù)1234567.1創(chuàng)建新聞小程序項目【演練】新建項目為項目準(zhǔn)備好一個空的文件夾，如編者在桌面上新建了一個文件夾“news”。運行微信開發(fā)者工具，新建項目。在“目錄”下拉列表中選擇“news”文件夾，在“AppID”文本框中輸入開發(fā)者的“AppID”，為練習(xí)方便，單擊“測試號”鏈接即可，單擊“新建”按鈕。7.1創(chuàng)建新聞小程序項目復(fù)制本書配套資源中的“images”文件夾到項目根目錄下，準(zhǔn)備好項目所需要的一些圖片資源。本項目包括兩個頁面：“l(fā)ist”頁面用于展示新聞列表、“info”頁面用于展示某條新聞的詳情。下面先準(zhǔn)備好這兩個頁面。右鍵單擊“pages”文件夾，在彈出的快捷菜單中選擇“新建文件夾”選項，輸入文件夾名稱“l(fā)ist”，按Enter鍵。7.1創(chuàng)建新聞小程序項目如圖所示，右鍵單擊“l(fā)ist”，在彈出的快捷菜單中選擇“新建Page”選項，輸入頁面名稱“l(fā)ist”，自動生成4個文件。7.1創(chuàng)建新聞小程序項目右鍵單擊“pages”，在彈出的快捷菜單中選擇“新建文件夾”選項，輸入文件夾名稱“info”，按Enter鍵。右鍵單擊“info”，在彈出的快捷菜單中選擇“新建Page”選項，輸入頁面名稱“info”，自動生成4個文件。修改app.json文件。7.1創(chuàng)建新聞小程序項目右鍵單擊“index”文件夾，在彈出的快捷菜單中選擇“刪除”選項，單擊“確定”按鈕。右鍵單擊“l(fā)ogs”文件夾，在彈出的快捷菜單中選擇“刪除”選項，單擊“確定”按鈕。運行結(jié)果如圖所示，可以看到“l(fā)ist”為首頁。7.2新聞列表設(shè)計【演練】設(shè)計新聞小程序的新聞列表頁面如圖所示，單擊“詳情”按鈕，選中“本地設(shè)置”標(biāo)簽頁，注意圖中鼠標(biāo)指針?biāo)诘奈恢?，選中“不校驗合法域名、web-view（業(yè)務(wù)域名）、TLS版本以及HTTPS證書”復(fù)選框。7.2新聞列表設(shè)計<view><swiperindicator-dots='{{true}}'autoplay='{{true}}'style='height:180px;'><blockwx:for='{{imgUrls}}'wx:key='index'><swiper-item><imagesrc='{{item}}'class='silde-image'style='width:100%;height:100%;'></image></swiper-item></block></swiper></view><view><navigatorurl="../info/info?artid={{item.article_id}}"wx:for="{{news}}"wx:key='index'>修改并保存list.wxml文件，代碼如下。7.2新聞列表設(shè)計<viewstyle="display:flex;margin:5px"><viewstyle="width:100px;height:auto"><imagestyle="height:100%;width:100%"src="{{'http://static.hcoder.net/'+item.article_img_url}}"></image></view><viewstyle="flex:1;margin:5px">{{item.article_title}}</view></view></navigator></view>7.2新聞列表設(shè)計var_selfPage({/***頁面的初始數(shù)據(jù)*/data:{imgUrls:["/images/1.jpg","/images/2.jpg","/images/3.jpg",],news:[]},修改并保存list.js文件，代碼如下。7.2新聞列表設(shè)計/***生命周期函數(shù)——監(jiān)聽頁面加載*/onLoad:function(options){_self=thisthis.getList()},getList:function(){wx.request({url:'/api/index.php?token=5a7d3fec77613-100001&c=article&m=articleList',methods:'GET',header:{"Content-Type":"json"},success:function(res){7.2新聞列表設(shè)計_self.setData({news:res.data.data})}})},/***生命周期函數(shù)——監(jiān)聽頁面初次渲染完成*/onReady:function(){},/***生命周期函數(shù)——監(jiān)聽頁面顯示*/onShow:function(){7.2新聞列表設(shè)計/***生命周期函數(shù)——監(jiān)聽頁面隱藏*/onHide:function(){},/***生命周期函數(shù)——監(jiān)聽頁面卸載*/onUnload:function(){7.2新聞列表設(shè)計},/***頁面相關(guān)事件處理函數(shù)——監(jiān)聽用戶下拉動作*/onPullDownRefresh:function(){},/***頁面上拉觸底事件的處理函數(shù)*/onReachBottom:function(){7.2新聞列表設(shè)計

},/***用戶點擊右上角分享*/onShareAppMessage:function(){}})7.2新聞列表設(shè)計首頁運行結(jié)果如圖所示。注意觀察，頭部為輪播圖，其余為新聞列表。7.3新聞詳情頁面設(shè)計【演練】設(shè)計新聞詳情頁面varartid=0,_selfPage({/***頁面的初始數(shù)據(jù)*/data:{artInfo:[]

},7.3新聞詳情頁面設(shè)計/***生命周期函數(shù)——監(jiān)聽頁面加載*/onLoad:function(options){_self=thisartid=options.artidthis.getInfo()},getInfo:function(){wx.request({url:'/api/index.php?token=5a7d3fec77613-100001&c=article&m=articleInfoForWx&artid='+artid,success:function(res){7.3新聞詳情頁面設(shè)計wx.setNavigationBarTitle({title:res.data.data.article_title})_self.setData({artInfo:res.data.data});}});},/**7.3新聞詳情頁面設(shè)計*生命周期函數(shù)——監(jiān)聽頁面初次渲染完成*/onReady:function(){},/***生命周期函數(shù)——監(jiān)聽頁面顯示*/onShow:function(){7.3新聞詳情頁面設(shè)計},/***生命周期函數(shù)——監(jiān)聽頁面隱藏*/onHide:function(){},/***生命周期函數(shù)——監(jiān)聽頁面卸載*/7.3新聞詳情頁面設(shè)計onUnload:function(){},/***頁面相關(guān)事件處理函數(shù)——監(jiān)聽用戶下拉動作*/onPullDownRefresh:function(){},/**7.3新聞詳情頁面設(shè)計*頁面上拉觸底事件的處理函數(shù)*/onReachBottom:function(){},/***用戶點擊右上角分享*/onShareAppMessage:function(){}})7.3新聞詳情頁面設(shè)計保存并運行文件，運行結(jié)果如圖所示。當(dāng)在首頁中單擊某條新聞標(biāo)題后，將顯示該新聞的詳細(xì)信息。學(xué)習(xí)進(jìn)步！微信小程序開發(fā)實戰(zhàn)教程（PHP+Laravel+MySQL）（微課版）第8章使用PHP+MySQL設(shè)計API微信小程序開發(fā)實戰(zhàn)教程（PHP+Laravel+MySQL）（微課版）學(xué)習(xí)目標(biāo)理解數(shù)據(jù)庫、表等概念理解PHP如何訪問MySQL數(shù)據(jù)庫理解在微信小程序中如何請求后臺數(shù)據(jù)1238.1安裝及配置XAMPP【演練】XAMPP下載和安裝如圖所示，在搜索引擎上搜索XAMPP官網(wǎng)，下載所需版本。8.1安裝及配置XAMPP等待下載結(jié)束，運行下載好的安裝程序。彈出“Setup”對話框，單擊“Next”按鈕，如圖所示。8.1安裝及配置XAMPP如圖所示，選擇組件，保持默認(rèn)選擇，單擊“Next”按鈕。8.1安裝及配置XAMPP如圖所示，選擇安裝文件夾，這里使用默認(rèn)路徑“C:\xampp”，單擊“Next”按鈕。8.1安裝及配置XAMPP如圖所示，進(jìn)入BitnamiforXAMPP界面，保持默認(rèn)選擇，單擊“Next”按鈕。8.1安裝及配置XAMPP如圖所示，進(jìn)入ReadytoInstall界面，單擊“Next”按鈕。8.1安裝及配置XAMPP如圖所示，顯示安裝中，需等待一段時間。8.1安裝及配置XAMPP如圖所示，安裝完成，單擊“Finish”按鈕。8.1安裝及配置XAMPP系統(tǒng)將自動運行。以后可運行“C:\xampp\xampp-control.exe”來啟動XAMPP，如圖所示。8.1安裝及配置XAMPP選擇語言，保持默認(rèn)選擇，單擊“Save”按鈕。如圖所示，單擊“Start”按鈕，啟動Apache服務(wù)。8.1安裝及配置XAMPPApache服務(wù)默認(rèn)端口號為80，如果不能正常啟動，則需更改端口號，如圖所示，單擊“Config”按鈕，選擇“Apache(httpd.conf)”選項，修改Apache(httpd.conf)。8.1安裝及配置XAMPP如圖所示，這里將Apache服務(wù)的端口號修改為“81”。8.1安裝及配置XAMPP如圖所示，重新啟動Apache服務(wù)，注意圖中鼠標(biāo)指針?biāo)诘奈恢?，其顯示端口號為“81”。8.1安裝及配置XAMPP如圖所示，單擊“Start”按鈕，啟動MySQL服務(wù)。8.1安裝及配置XAMPPMySQL服務(wù)默認(rèn)端口號為3306，如果無法正常啟動，則需要更改端口號，如圖所示，單擊“Config”按鈕，選擇“my.ini”選項，修改my.ini。8.1安裝及配置XAMPP如圖所示，這里MySQL服務(wù)的端口號保持“3306”不變，如果出現(xiàn)沖突，則可嘗試使用端口號“3307”“3308”等。8.1安裝及配置XAMPP修改XAMPP運行環(huán)境，如圖所示，單擊“Config”按鈕。8.1安裝及配置XAMPP打開“ConfigurationofControlPanel”窗口，如圖所示，單擊“ServiceandPortSettings”按鈕。8.1安裝及配置XAMPP選中“Apache”標(biāo)簽頁，如圖所示，將“Apache2.4”的“MainPort”設(shè)置為“81”（默認(rèn)為80，如果沒有修改端口號，則無須修改），單擊“Save”按鈕。