微信小程序教程入門篇【1】,用開(kāi)發(fā)者工具構(gòu)建運(yùn)行簡(jiǎn)單應(yīng)用實(shí)例
2017-12-20
導(dǎo)讀:本帖最后由 狂兔科技 于 2016-10-11 12:25 編輯 1. 開(kāi)篇導(dǎo)言 本節(jié)目標(biāo):旨在演示如何用開(kāi)發(fā)者工具構(gòu)建并運(yùn)行簡(jiǎn)單的 helloworld 應(yīng)用。 目標(biāo)用戶:無(wú)編程經(jīng)驗(yàn),但對(duì)微信小程序感興趣的同學(xué)...
1. 開(kāi)篇導(dǎo)言
- 本節(jié)目標(biāo):旨在演示如何用開(kāi)發(fā)者工具構(gòu)建并運(yùn)行簡(jiǎn)單的 helloworld 應(yīng)用。
- 目標(biāo)用戶:無(wú)編程經(jīng)驗(yàn),但對(duì)微信小程序感興趣的同學(xué)。
- 學(xué)習(xí)目標(biāo):開(kāi)發(fā)者工具的基本使用流程,即創(chuàng)建、導(dǎo)入、刪除、關(guān)閉項(xiàng)目。
- 案例分析:創(chuàng)建helloworld應(yīng)用,相似于微信官網(wǎng)簡(jiǎn)易教程中的quickstart demo。
- 代碼下載
- 傳送門:
- 備注:有編程經(jīng)驗(yàn)或看過(guò)微信官網(wǎng)簡(jiǎn)易教程的同學(xué),請(qǐng)酌情略過(guò)該章節(jié)。
2. 案例演示
- helloworld 展示如下圖

3. 構(gòu)建此應(yīng)用流程
- 環(huán)境準(zhǔn)備
微信版本,無(wú)論是安卓 or IOS系統(tǒng),都議將微信版本更新為6.3.27。
下載地址,https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=1474974358244具體如下圖:

注:請(qǐng)根據(jù)操作系統(tǒng),選擇正確的版本。
- 創(chuàng)建項(xiàng)目
開(kāi)發(fā)者工具安裝完成后,打開(kāi)并使用微信掃碼登錄,如下圖:

點(diǎn)擊【添加項(xiàng)目】,如下圖所示:

由于目前我們沒(méi)有AppID,所以選擇【無(wú)AppID】。項(xiàng)目名稱(非小程序名稱),“應(yīng)用號(hào)FirstBlood”。項(xiàng)目目錄為“E:\workspace\weixin_example\helloworld”,如下圖:

注意勾選【在當(dāng)前目錄中創(chuàng)建quick start 項(xiàng)目】,開(kāi)發(fā)者工具會(huì)幫助我們?cè)陧?xiàng)目目錄中生成一個(gè)簡(jiǎn)單的Demo。
- 退出項(xiàng)目
添加項(xiàng)目成功后,進(jìn)入下面的調(diào)試頁(yè)面,如下圖:

其中藍(lán)色區(qū)域?yàn)槟M器模擬微信小程序在客戶端真實(shí)的邏輯表現(xiàn)。右面紅色部分說(shuō)明無(wú)AppID關(guān)聯(lián)的影響。
右上角綠色方形部分,點(diǎn)擊【X】,關(guān)閉開(kāi)發(fā)者工具。左下角綠色方形部分,點(diǎn)擊【關(guān)閉】,關(guān)閉當(dāng)前項(xiàng)目并返回項(xiàng)目選擇頁(yè)面。如下圖:

- 刪除項(xiàng)目
左側(cè)選擇項(xiàng)目后,如下圖:

點(diǎn)擊【刪除】按鈕,彈出對(duì)話框,選擇是,則從【開(kāi)發(fā)者工具】中刪除該項(xiàng)目,但并未從硬盤上刪除。如下圖:

注意:上面刪除操作的結(jié)果是筆者在win10環(huán)境下得到的結(jié)果。
4. 小結(jié)
知識(shí)點(diǎn):開(kāi)發(fā)者工具的基本使用流程:即創(chuàng)建、導(dǎo)入、刪除、關(guān)閉項(xiàng)目。
5. 預(yù)告
下一節(jié)講解微信小程序的框架:MINA。
第二部分:如何開(kāi)通一個(gè)小商店