天天看點

微信小程式開發系列一:微信小程式的申請和開發環境的搭建

我最近也剛剛開始微信小程式的開發,想把我自學的一些心得寫出來分享給大家。

微信小程式開發系列一:微信小程式的申請和開發環境的搭建

這是第一篇,從零開始學習微信小程式開發。主要是小程式的注冊和開發環境的搭建。

首先我們要在下列網址申請一個屬于自己的微信小程式:

https://mp.weixin.qq.com/cgi-bin/wx
微信小程式開發系列一:微信小程式的申請和開發環境的搭建

點選按鈕“前往注冊”。注意我們需要使用一個沒有注冊過微信小程式或者微信公衆号的郵箱。我用的是網易郵箱。注冊之後,郵箱會收到一封激活郵件。

微信小程式開發系列一:微信小程式的申請和開發環境的搭建

激活之後,就可以進入小程式主體資訊登記頁面了。這裡需要使用身份證号碼和手機驗證碼進行登記。

微信小程式開發系列一:微信小程式的申請和開發環境的搭建

登記完畢之後,就可以進入微信開發者工具了。我選擇的是小程式項目:

微信小程式開發系列一:微信小程式的申請和開發環境的搭建

這是我注冊的用于學習目的的微信小程式:

微信小程式開發系列一:微信小程式的申請和開發環境的搭建

在開發管理->開發設計菜單裡,找到我們剛才注冊的微信小程式的ID:抄下來,後面要用。

微信小程式開發系列一:微信小程式的申請和開發環境的搭建

接下來,在下面這個連結去下載下傳微信開發者工具:

https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html

大家可以把它當成是一個內建開發環境(IDE)。

微信小程式開發系列一:微信小程式的申請和開發環境的搭建

安裝完畢後啟動微信開發者工具,會要求我們指定一個本地項目目錄和填寫微信小程式的AppID。這個ID我們前一步已經抄下來了。

直接填進去,勾上“建立普通快速啟動模闆”,然後微信開發者工具會自動幫我們建立一個Hello World版本的微信小程式資源檔案出來。

微信小程式開發系列一:微信小程式的申請和開發環境的搭建

自動建立好的小程式如下圖所示,就是一個Hello World的文本。

微信小程式開發系列一:微信小程式的申請和開發環境的搭建

我們點選“上傳"按鈕:

微信小程式開發系列一:微信小程式的申請和開發環境的搭建

随便維護一個版本号,比如1.0.0, 然後點選”上傳“。

微信小程式開發系列一:微信小程式的申請和開發環境的搭建

然後回到小程式管理背景,能看到我們上面通過微信開發者工具上傳的1.0.0版本的小程式了。我們點選”送出稽核“右邊的下拉菜單,選擇”選為體驗版本“:

微信小程式開發系列一:微信小程式的申請和開發環境的搭建

會生成一個體驗版的二維碼,這時發送給你的朋友,就可以使用這個小程式了。

微信小程式開發系列一:微信小程式的申請和開發環境的搭建

當您的朋友在手機上掃描該二維碼,會看到如下界面:該小程式标注了"體驗版"的提示:

微信小程式開發系列一:微信小程式的申請和開發環境的搭建

點選"前往體驗版", 就能看到微信開發者工具自動生成的Hello World小程式了。

微信小程式開發系列一:微信小程式的申請和開發環境的搭建

這個系列的下一篇文章,我會把我分析微信開發者工具自動生成的這些資源檔案的心得分享給大家。

微信小程式開發系列一:微信小程式的申請和開發環境的搭建