微信小程序開(kāi)發(fā)邊做邊學(xué) 課件 操作篇-微信小程序第2章 簡(jiǎn)單案例開(kāi)發(fā)實(shí)戰(zhàn)

第二章：簡(jiǎn)單案例開(kāi)發(fā)實(shí)戰(zhàn)簡(jiǎn)單案例開(kāi)發(fā)實(shí)戰(zhàn)心理測(cè)試小程序安裝與理解C語(yǔ)言測(cè)試小程序開(kāi)發(fā)C語(yǔ)言測(cè)試邏輯修改添加做題結(jié)果小程序發(fā)布02ranspageT

簡(jiǎn)單案例開(kāi)發(fā)實(shí)戰(zhàn)心理測(cè)試小程序安裝與理解開(kāi)源代碼的借鑒C語(yǔ)言測(cè)試小程序開(kāi)發(fā)頁(yè)面功能的添加C語(yǔ)言測(cè)試邏輯修改實(shí)現(xiàn)邏輯的差異發(fā)布的流程發(fā)布上線課前討論2022微信生態(tài)發(fā)展：小程序、視頻號(hào)、私域流量與微信支付

微信生態(tài)內(nèi)容組成：微信公眾號(hào)、微信商戶平臺(tái)、微信開(kāi)放平臺(tái)、微信廣告

微信生態(tài)層面劃分：面向用戶，面向企業(yè)。我們以樹(shù)狀圖簡(jiǎn)單呈現(xiàn)，可以看到如下所述的生態(tài)構(gòu)建。

在騰訊發(fā)布的2021年及2022年Q1財(cái)報(bào)中，在談及重點(diǎn)業(yè)務(wù)及未來(lái)戰(zhàn)略時(shí)，多次提到“小程序”“視頻號(hào)”等關(guān)鍵字。視頻號(hào)方面，用戶數(shù)據(jù)同比增速迅猛，并預(yù)期未來(lái)商業(yè)化前景廣闊；小程序方面，活躍賬戶數(shù)已突破5億，結(jié)合相關(guān)微信生態(tài)，幫助B端客戶更好拓展和運(yùn)營(yíng)私域流量，做好服務(wù)、個(gè)體的連接，依然是今年微信的重要戰(zhàn)略之一。何為「小程序經(jīng)濟(jì)圈」？

它其實(shí)便是一個(gè)虛擬生態(tài)，是根據(jù)“微信”新基建，構(gòu)成的經(jīng)濟(jì)生態(tài)圈。它是以微信小程序?yàn)橹行臉屑~，鏈接微信付出、企業(yè)微信、微信AI、微信搜一搜等微信生態(tài)才能，構(gòu)成一套共同的全景生態(tài)矩陣，深度助力各職業(yè)與工業(yè)，從而產(chǎn)生巨大社會(huì)經(jīng)濟(jì)價(jià)值的經(jīng)濟(jì)形態(tài)。基于微信形成的新型生態(tài)圈——微信小程序經(jīng)濟(jì)圈小程序行業(yè)現(xiàn)狀和前景小程序現(xiàn)狀：

據(jù)對(duì)公開(kāi)資料進(jìn)行統(tǒng)計(jì)，截止2022年末全網(wǎng)小程序數(shù)量已超780萬(wàn)，DAU突破8億，人均使用次數(shù)超過(guò)12次，小程序已經(jīng)融入網(wǎng)民生活的方方面面。小程序發(fā)展前景：1、小程序?qū)⒁I(lǐng)下一輪移動(dòng)互聯(lián)網(wǎng)創(chuàng)新（萬(wàn)物互聯(lián)、多端框架、元宇宙）2、XR技術(shù)為小程序營(yíng)銷(xiāo)帶來(lái)創(chuàng)造性突破，虛擬場(chǎng)景、虛擬人或?qū)⒅貥?gòu)用戶體驗(yàn)3、在小程序鏈接全網(wǎng)能力的基礎(chǔ)上，成熟玩家將深入探索全域營(yíng)銷(xiāo)4、大健康、旅游、教育行業(yè)是值得期待的鄰域5、第三方服務(wù)與時(shí)俱進(jìn)迭代升級(jí)，向全域、全端、全鏈路服務(wù)延展6、小游戲市場(chǎng)再次活躍，創(chuàng)新、精品戰(zhàn)略與營(yíng)銷(xiāo)策略相輔相成，共創(chuàng)佳績(jī)小程序——社會(huì)經(jīng)濟(jì)價(jià)值+商業(yè)價(jià)值

小程序經(jīng)濟(jì)圈到底有哪些社會(huì)經(jīng)濟(jì)價(jià)值和商業(yè)價(jià)值？在內(nèi)循環(huán)年代，中國(guó)經(jīng)濟(jì)需要建設(shè)兩個(gè)圈，一個(gè)是線下經(jīng)濟(jì)圈，一個(gè)是線上經(jīng)濟(jì)圈，并完成“雙圈聯(lián)動(dòng)”，在這過(guò)程中，微信小程序是助力線上經(jīng)濟(jì)一體化的重要推手。一方面，小程序是一種輕應(yīng)用，極低開(kāi)發(fā)門(mén)檻招引了大量的B端商家，“無(wú)需下載，用完即走”大大縮短了C端用戶到APP的距離，且“再教育成本極低”。另一方面，「小程序經(jīng)濟(jì)圈」依托于微信絕無(wú)僅有的“全景生態(tài)矩陣”，在巨量用戶、付出系統(tǒng)和流量的加持下，構(gòu)成了絕無(wú)僅有的“才能渠道”。不同的是，在傳統(tǒng)區(qū)域經(jīng)濟(jì)圈里，中心城市是中心，在「小程序經(jīng)濟(jì)圈」里，品牌是輻射中心。2022年各領(lǐng)域最佳小程序39個(gè)小程序新晉“阿拉丁”指數(shù)排行TOP1000簡(jiǎn)單案例開(kāi)發(fā)實(shí)戰(zhàn)心理測(cè)試小程序安裝與理解C語(yǔ)言測(cè)試小程序開(kāi)發(fā)C語(yǔ)言測(cè)試邏輯修改添加做題結(jié)果小程序發(fā)布02ranspageT心理測(cè)試源代碼下載址:/Silverados/We-AnswerPage如果沒(méi)有GitHub的賬號(hào)可以先自行申請(qǐng)一個(gè)賬號(hào)后，再進(jìn)行代碼的下載。

心理測(cè)試小程序安裝點(diǎn)擊“Cloneanddownload”按鈕，選擇DownloadZIP將源代碼下載下來(lái)，源代碼是一個(gè)壓縮包。將源代碼解壓后，雙擊微信web開(kāi)發(fā)者工具并選擇新建小程序，選擇導(dǎo)入項(xiàng)目。注意：在選擇項(xiàng)目目錄是需要選擇包含app.json和project.config.json的目錄。

心理測(cè)試小程序安裝選好目錄后，開(kāi)發(fā)者可以自定義項(xiàng)目名稱(chēng)，并填入AppID，然后單擊“導(dǎo)入”按鈕，即可成功導(dǎo)入心理測(cè)試小程序?！靶睦頊y(cè)試”代碼目錄測(cè)試頁(yè)面首頁(yè)

心理測(cè)試小程序安裝點(diǎn)擊“開(kāi)始測(cè)試”按鈕，體驗(yàn)小程序的功能并查看各個(gè)目錄的簡(jiǎn)單配置。

心理測(cè)試小程序安裝完成心理測(cè)試后，最后顯示測(cè)試結(jié)果頁(yè)面，測(cè)試結(jié)果頁(yè)面可看到測(cè)試者在測(cè)試過(guò)程中選擇A、B、C選項(xiàng)的次數(shù)，并告訴測(cè)試者屬于什么類(lèi)型。

心理測(cè)試小程序安裝簡(jiǎn)單案例開(kāi)發(fā)實(shí)戰(zhàn)心理測(cè)試小程序安裝與理解C語(yǔ)言測(cè)試小程序開(kāi)發(fā)C語(yǔ)言測(cè)試邏輯修改添加做題結(jié)果小程序發(fā)布02ranspageT★增加D選項(xiàng)由于C語(yǔ)言習(xí)題共有4個(gè)選項(xiàng)，所以要先給test頁(yè)面添加一個(gè)D選項(xiàng)，test頁(yè)面中ABC有的內(nèi)容都相應(yīng)的加上一個(gè)D。在text.wxml中添加D選項(xiàng)的頁(yè)面結(jié)構(gòu)。

C語(yǔ)言測(cè)試小程序開(kāi)發(fā)在test.js中的data數(shù)組中與D選項(xiàng)有關(guān)的變量。

C語(yǔ)言測(cè)試小程序開(kāi)發(fā)給事件處理函數(shù)answerClickA的邏輯代碼代碼中添加D選項(xiàng)的邏輯。

C語(yǔ)言測(cè)試小程序開(kāi)發(fā)添加完后按鈕A的代碼（從左往右）如下，按鈕B，按鈕C同理。})

this.setData({questionDetail:app.globalData.question[this.data.realIndex].question,

answerA:app.globalData.question[this.data.realIndex].option[this.data.listABC[0]],answerB:app.globalData.question[this.data.realIndex].option[this.data.listABC[1]],answerC:app.globalData.question[this.data.realIndex].option[this.data.listABC[2]],answerD:app.globalData.question[this.data.realIndex].option[this.data.listABC[3]],})

if(this.data.index==20){wx.redirectTo({url:'/pages/result/result?A='+this.data.A+'&B='+this.data.B+'&C='+this.data.C+'&D='+this.data.D,})}},

C語(yǔ)言測(cè)試小程序開(kāi)發(fā)除了test頁(yè)面，result頁(yè)面也需要添加一個(gè)D選項(xiàng)被選擇的次數(shù)，所以需要對(duì)result.wxml與result.js文件進(jìn)行簡(jiǎn)單修改，具體代碼如下（這里只給出需要修改部分的代碼）：

C語(yǔ)言測(cè)試小程序開(kāi)發(fā)★修改題庫(kù)

由于現(xiàn)在運(yùn)行小程序后出來(lái)的還是心理測(cè)試的題目，因此需要將其改成C語(yǔ)言的題目。C語(yǔ)言題庫(kù)可以在提供的代碼包“C語(yǔ)言測(cè)試最終代碼”中尋找，首先開(kāi)發(fā)者可以導(dǎo)入C語(yǔ)言小程序代碼包，找到app.js文件，將該項(xiàng)目中的question數(shù)組直接復(fù)制到自己的項(xiàng)目中。

C語(yǔ)言測(cè)試小程序開(kāi)發(fā)

這里題庫(kù)的question數(shù)組看著有點(diǎn)亂，不符合代碼規(guī)范。?開(kāi)發(fā)者使用格式化代碼的默認(rèn)快捷鍵Shift+Alt+F將代碼格式化。?開(kāi)發(fā)者也可以打開(kāi)設(shè)置中快捷鍵設(shè)置的編輯自定義格式化代碼的快捷鍵。

格式化后的代碼

C語(yǔ)言測(cè)試小程序開(kāi)發(fā)題庫(kù)修改后，單擊“開(kāi)始測(cè)試”按鈕，進(jìn)入test頁(yè)面后看到的就是C

語(yǔ)言測(cè)試題了。

C語(yǔ)言測(cè)試小程序開(kāi)發(fā)

C語(yǔ)言測(cè)試小程序中，題目不再隨機(jī)出現(xiàn)，題目按question數(shù)組中的順序一道一道顯示給測(cè)試者。

注釋test頁(yè)面中的randSort函數(shù)、setList函數(shù)和setABC函數(shù)，另外onLoad中的兩句也要注釋掉，注釋的快捷鍵為“Ctrl+/”。

C語(yǔ)言測(cè)試小程序開(kāi)發(fā)簡(jiǎn)單案例開(kāi)發(fā)實(shí)戰(zhàn)心理測(cè)試小程序安裝與理解C語(yǔ)言測(cè)試小程序開(kāi)發(fā)C語(yǔ)言測(cè)試邏輯修改添加做題結(jié)果小程序發(fā)布02ranspageT單擊“開(kāi)始測(cè)試”按鈕進(jìn)行C語(yǔ)言習(xí)題測(cè)試，會(huì)發(fā)現(xiàn)第一題與第二題相同。

第一題題目信息

第二題題目信息

C語(yǔ)言測(cè)試邏輯修改

修改方法：（1）在test.js中，將index的初始值改為1。

（2）選擇test.wxml文件，將第3行代碼里的index+1改為index即把+1去掉。

C語(yǔ)言測(cè)試邏輯修改

測(cè)試過(guò)程中，會(huì)發(fā)現(xiàn)當(dāng)顯示第19題時(shí)，完成第19題后，第20題一閃而過(guò)，就直接跳轉(zhuǎn)至result頁(yè)面。最后測(cè)試結(jié)果頁(yè)面累計(jì)至選擇了19次。

C語(yǔ)言測(cè)試邏輯修改

修改方法：將整個(gè)if語(yǔ)句塊移至this.setData使得index+1之前。

C語(yǔ)言測(cè)試邏輯修改

修改完后點(diǎn)擊編譯運(yùn)行，發(fā)現(xiàn)在20題做完后產(chǎn)生報(bào)錯(cuò)。修改方法：即添加一個(gè)if判斷語(yǔ)句，判斷只有當(dāng)index<20是才更新test中題目信息的視圖，當(dāng)index=20時(shí)，不滿足條件，則不更新題目信息，執(zhí)行跳轉(zhuǎn)result頁(yè)面。

C語(yǔ)言測(cè)試邏輯修改

需要注意的是，對(duì)于以上兩個(gè)邏輯問(wèn)題均只修改了answerClickA部分的代碼，需要對(duì)answerClickB、answerClickC、answerClickD部分相應(yīng)的代碼進(jìn)行同樣的修改。

C語(yǔ)言測(cè)試邏輯修改簡(jiǎn)單案例開(kāi)發(fā)實(shí)戰(zhàn)心理測(cè)試小程序安裝與理解C語(yǔ)言測(cè)試小程序開(kāi)發(fā)C語(yǔ)言測(cè)試邏輯修改添加做題結(jié)果小程序發(fā)布02ranspageT★test頁(yè)面修改

test.js文件中部分代碼過(guò)于復(fù)雜

對(duì)它進(jìn)行簡(jiǎn)單修改，只需要一個(gè)簡(jiǎn)單的賦值就行，當(dāng)點(diǎn)擊A選項(xiàng)時(shí)，給A的值+1即可。

添加做題結(jié)果

對(duì)于本節(jié)要增加的做題結(jié)果，在data數(shù)組中增加兩個(gè)變量correct和error，分別用于記錄正確題數(shù)與錯(cuò)誤題數(shù)，初始值均為0。另外將增加一個(gè)answer數(shù)組，數(shù)組中為20道題的正確答案。

添加做題結(jié)果

anwer[0]為一個(gè)空字符串，這是根據(jù)后面answerClickA中新增的代碼決定的，代碼如下，正確答案從answer[1]開(kāi)始存儲(chǔ)于answer數(shù)組中即可。

添加做題結(jié)果

另外帶參跳轉(zhuǎn)至result頁(yè)面時(shí)也加上correct與error的值，用于在result頁(yè)面顯示正確率。

添加做題結(jié)果

以上修改只針對(duì)answerClickA，因此需要對(duì)answerClickB、answerClickC、answerClickD部分相應(yīng)的代碼進(jìn)行同樣的修改。

添加做題結(jié)果★result頁(yè)面修改在result.wxml下添加正確與錯(cuò)誤顯示結(jié)果，另外顯示測(cè)試者屬于什么類(lèi)型不需要了，把這段代碼刪了即可。

添加做題結(jié)果

（1）注釋result.js中whichKind函數(shù)。

（2）在data數(shù)組中增加correct和error變量，初始值為0。（3）在生命周期函數(shù)onLoad中給correct和error賦值，具體代碼（在右邊）。

添加做題結(jié)果

添加做題結(jié)果后的result界面：

添加做題結(jié)果簡(jiǎn)單案例開(kāi)發(fā)實(shí)戰(zhàn)心理測(cè)試小程序安裝與理解C語(yǔ)言測(cè)試小程序開(kāi)發(fā)C語(yǔ)言測(cè)試邏輯修改添加做題結(jié)果小程序發(fā)布02ranspageT★發(fā)布前準(zhǔn)備

1.預(yù)覽

?點(diǎn)擊開(kāi)發(fā)者工具頂部操作欄的預(yù)覽按鈕，開(kāi)發(fā)者工具會(huì)自動(dòng)打包當(dāng)前項(xiàng)目。

?并上傳小程序代碼至微信的服務(wù)器，成功之后會(huì)在界面上顯示一個(gè)二維碼。

?使用當(dāng)前小程序開(kāi)發(fā)者的微信掃碼即可看到小程序在手機(jī)客戶端上的真實(shí)表現(xiàn)。小程序發(fā)布

2.上傳代碼（1）點(diǎn)擊開(kāi)發(fā)者工具頂部操作欄的上傳按鈕，開(kāi)發(fā)者可以根據(jù)自己的實(shí)際要求來(lái)填寫(xiě)版本號(hào)以及項(xiàng)目備注。（2）上傳成功之后，登錄小程序管理后臺(tái)

-開(kāi)發(fā)管理-開(kāi)發(fā)版本就可以找到剛提交上傳的版本了。

3.將這個(gè)版本設(shè)置“體驗(yàn)版”或者“提交審核”。小程序發(fā)布

小程序版本

版本說(shuō)明開(kāi)發(fā)版本使用開(kāi)發(fā)者工具，可將代碼上傳到開(kāi)發(fā)版本中。開(kāi)發(fā)版本只保留每人最新的一份上傳的代碼。點(diǎn)擊提交審核，可將代碼提交審核。開(kāi)發(fā)版本可刪除，不影響線上版本