注冊

微信小程序教程入門篇【1】,用開發(fā)者工具構建運行簡單應用實例

2017-12-20
導讀:本帖最后由 狂兔科技 于 2016-10-11 12:25 編輯 1. 開篇導言 本節(jié)目標:旨在演示如何用開發(fā)者工具構建并運行簡單的 helloworld 應用。 目標用戶:無編程經驗,但對微信小程序感興趣的同學...

1. 開篇導言   
  • 本節(jié)目標:旨在演示如何用開發(fā)者工具構建并運行簡單的 helloworld 應用。
  • 目標用戶:無編程經驗,但對微信小程序感興趣的同學。
  • 學習目標:開發(fā)者工具的基本使用流程,即創(chuàng)建、導入、刪除、關閉項目。
  • 案例分析:創(chuàng)建helloworld應用,相似于微信官網簡易教程中的quickstart demo。
  • 代碼下載
  • 傳送門:
下一篇:微信小程序教程-入門篇【2】

  • 備注:有編程經驗或看過微信官網簡易教程的同學,請酌情略過該章節(jié)。

2. 案例演示

  • helloworld 展示如下圖

微信小程序教程入門篇【1】,用開發(fā)者工具構建運行簡單應用實例

3. 構建此應用流程

  • 環(huán)境準備

微信版本,無論是安卓 or IOS系統(tǒng),都議將微信版本更新為6.3.27。
下載地址,https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=1474974358244具體如下圖:
微信小程序教程入門篇【1】,用開發(fā)者工具構建運行簡單應用實例
注:請根據操作系統(tǒng),選擇正確的版本。
   

  • 創(chuàng)建項目

開發(fā)者工具安裝完成后,打開并使用微信掃碼登錄,如下圖:
微信小程序教程入門篇【1】,用開發(fā)者工具構建運行簡單應用實例

點擊【添加項目】,如下圖所示:
微信小程序教程入門篇【1】,用開發(fā)者工具構建運行簡單應用實例

由于目前我們沒有AppID,所以選擇【無AppID】。項目名稱(非小程序名稱),“應用號FirstBlood”。項目目錄為“E:\workspace\weixin_example\helloworld”,如下圖:                        
微信小程序教程入門篇【1】,用開發(fā)者工具構建運行簡單應用實例
注意勾選【在當前目錄中創(chuàng)建quick start 項目】,開發(fā)者工具會幫助我們在項目目錄中生成一個簡單的Demo。


  • 退出項目

添加項目成功后,進入下面的調試頁面,如下圖:
微信小程序教程入門篇【1】,用開發(fā)者工具構建運行簡單應用實例

其中藍色區(qū)域為模擬器模擬微信小程序在客戶端真實的邏輯表現(xiàn)。右面紅色部分說明無AppID關聯(lián)的影響。
右上角綠色方形部分,點擊【X】,關閉開發(fā)者工具。左下角綠色方形部分,點擊【關閉】,關閉當前項目并返回項目選擇頁面。如下圖:
微信小程序教程入門篇【1】,用開發(fā)者工具構建運行簡單應用實例


  • 刪除項目

左側選擇項目后,如下圖:
微信小程序教程入門篇【1】,用開發(fā)者工具構建運行簡單應用實例

點擊【刪除】按鈕,彈出對話框,選擇是,則從【開發(fā)者工具】中刪除該項目,但并未從硬盤上刪除。如下圖:
微信小程序教程入門篇【1】,用開發(fā)者工具構建運行簡單應用實例              
注意:上面刪除操作的結果是筆者在win10環(huán)境下得到的結果。

4. 小結
知識點:開發(fā)者工具的基本使用流程:即創(chuàng)建、導入、刪除、關閉項目。

5. 預告
下一節(jié)講解微信小程序的框架:MINA。

重磅推薦:小程序開店目錄

第一部分:小商店是什么

第二部分:如何開通一個小商店

第三部分:如何登錄小商店

第四部分:開店任務常見問題

第五部分:小商店可以賣什么

第六部分:HiShop小程序特色功能

第七部分:小程序直播

第八部分:小程序收貨/物流

第九部分:小程序怎么結算

第十部分:小程序客服

第十一部分:電商創(chuàng)業(yè)

第十二部分:小程序游戲開發(fā)