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

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

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

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

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

它其實便是一個虛擬生態(tài)，是根據(jù)“微信”新基建，構(gòu)成的經(jīng)濟生態(tài)圈。它是以微信小程序為中心樞紐，鏈接微信付出、企業(yè)微信、微信AI、微信搜一搜等微信生態(tài)才能，構(gòu)成一套共同的全景生態(tài)矩陣，深度助力各職業(yè)與工業(yè)，從而產(chǎn)生巨大社會經(jīng)濟價值的經(jīng)濟形態(tài)?；谖⑿判纬傻男滦蜕鷳B(tài)圈——微信小程序經(jīng)濟圈小程序行業(yè)現(xiàn)狀和前景小程序現(xiàn)狀：

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

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

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

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

心理測試小程序安裝點擊“開始測試”按鈕，體驗小程序的功能并查看各個目錄的簡單配置。

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

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

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

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

C語言測試小程序開發(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語言測試小程序開發(fā)除了test頁面，result頁面也需要添加一個D選項被選擇的次數(shù)，所以需要對result.wxml與result.js文件進行簡單修改，具體代碼如下（這里只給出需要修改部分的代碼）：

C語言測試小程序開發(fā)★修改題庫

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

C語言測試小程序開發(fā)

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

格式化后的代碼

C語言測試小程序開發(fā)題庫修改后，單擊“開始測試”按鈕，進入test頁面后看到的就是C

語言測試題了。

C語言測試小程序開發(fā)

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

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

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

第一題題目信息

第二題題目信息

C語言測試邏輯修改

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

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

C語言測試邏輯修改

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

C語言測試邏輯修改

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

C語言測試邏輯修改

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

C語言測試邏輯修改

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

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

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

對它進行簡單修改，只需要一個簡單的賦值就行，當(dāng)點擊A選項時，給A的值+1即可。

添加做題結(jié)果

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

添加做題結(jié)果

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

添加做題結(jié)果

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

添加做題結(jié)果

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

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

添加做題結(jié)果

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

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

添加做題結(jié)果

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

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

1.預(yù)覽

?點擊開發(fā)者工具頂部操作欄的預(yù)覽按鈕，開發(fā)者工具會自動打包當(dāng)前項目。

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

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

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

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

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

小程序版本

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