微信小程序教程入門篇【1】,用開發(fā)者工具構(gòu)建運行簡單應(yīng)用實例
2017-12-20
導(dǎo)讀：本帖最后由 狂兔科技 于 2016-10-11 12:25 編輯 1. 開篇導(dǎo)言 本節(jié)目標(biāo)：旨在演示如何用開發(fā)者工具構(gòu)建并運行簡單的 helloworld 應(yīng)用。 目標(biāo)用戶：無編程經(jīng)驗，但對微信小程序感興趣的同學(xué)...
1. 開篇導(dǎo)言
- 本節(jié)目標(biāo)：旨在演示如何用開發(fā)者工具構(gòu)建并運行簡單的 helloworld 應(yīng)用。
- 目標(biāo)用戶：無編程經(jīng)驗，但對微信小程序感興趣的同學(xué)。
- 學(xué)習(xí)目標(biāo)：開發(fā)者工具的基本使用流程，即創(chuàng)建、導(dǎo)入、刪除、關(guān)閉項目。
- 案例分析：創(chuàng)建helloworld應(yīng)用，相似于微信官網(wǎng)簡易教程中的quickstart demo。
- 代碼下載
- 傳送門：
- 備注：有編程經(jīng)驗或看過微信官網(wǎng)簡易教程的同學(xué)，請酌情略過該章節(jié)。
2. 案例演示
- helloworld 展示如下圖
3. 構(gòu)建此應(yīng)用流程
- 環(huán)境準備
微信版本，無論是安卓 or IOS系統(tǒng)，都議將微信版本更新為6.3.27。
下載地址，https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=1474974358244具體如下圖：
注：請根據(jù)操作系統(tǒng)，選擇正確的版本。
- 創(chuàng)建項目
開發(fā)者工具安裝完成后，打開并使用微信掃碼登錄，如下圖：
點擊【添加項目】，如下圖所示：
由于目前我們沒有AppID，所以選擇【無AppID】。項目名稱(非小程序名稱)，“應(yīng)用號FirstBlood”。項目目錄為“E:\workspace\weixin_example\helloworld”，如下圖：
注意勾選【在當(dāng)前目錄中創(chuàng)建quick start 項目】，開發(fā)者工具會幫助我們在項目目錄中生成一個簡單的Demo。
- 退出項目
添加項目成功后，進入下面的調(diào)試頁面，如下圖：
其中藍色區(qū)域為模擬器模擬微信小程序在客戶端真實的邏輯表現(xiàn)。右面紅色部分說明無AppID關(guān)聯(lián)的影響。
右上角綠色方形部分，點擊【X】，關(guān)閉開發(fā)者工具。左下角綠色方形部分，點擊【關(guān)閉】，關(guān)閉當(dāng)前項目并返回項目選擇頁面。如下圖：
- 刪除項目
左側(cè)選擇項目后，如下圖：
點擊【刪除】按鈕，彈出對話框，選擇是，則從【開發(fā)者工具】中刪除該項目，但并未從硬盤上刪除。如下圖：
注意：上面刪除操作的結(jié)果是筆者在win10環(huán)境下得到的結(jié)果。
4. 小結(jié)
知識點：開發(fā)者工具的基本使用流程：即創(chuàng)建、導(dǎo)入、刪除、關(guān)閉項目。
5. 預(yù)告
下一節(jié)講解微信小程序的框架：MINA。
第二部分：如何開通一個小商店
掃碼免費領(lǐng)取運營資料包
