微信小程式 之 Hello World!
- 前言
- 正文
- 一、微信開發者注冊
- 二、開發工具下載下傳
- 三、工具安裝
- 三、建立項目
- 1. 擷取正式号AppID
- 2. 使用測試号AppID
- 四、項目結構講解
- 1. app.js
- 2. app.json
- 3. app.wxss
- 4. project.config.json
- 5. sitemap.json
- 6. pages
- 7. utils
前言
在做微信小程式之前，最好要有一些JavaScript和Html、css的基礎，不過沒有也沒關系，學習中慢慢了解也可以，隻不過你需要花費的時間就多一些。
正文
微信小程式的開發正常是使用微信開放平台提供的工具，是以本文會從賬号注冊到工具安裝，再到項目運作，這種方式進行講解。開始吧！
一、微信開發者注冊
點選微信公衆平台進入。
直接用你手機上的微信掃描這個二維碼進行登入，這裡的賬号類型有三個，服務号、訂閱号、小程式。
掃碼之後，你的手機上就會顯示之前建立的微信公衆平台上建立過公衆号或者小程式。如果你都沒有建立的話，就直接登入。
然後進行開發工具的下載下傳。
二、開發工具下載下傳
點選開發者工具下載下傳
我這裡就下載下傳這個穩定版
下載下傳的是一個exe可執行檔案，下載下傳後輕按兩下進行安裝
三、工具安裝
下一步
我接受
更換一下安裝的路徑
安裝過程中，等待。
完成，運作這個工具。
三、建立項目
用自己的手機微信掃描登入一下：
登入之後你會在左下方看到自己的微信頭像，下面來建立一個小程式吧，點選右邊的這個加号。
這裡我修改了項目的名稱和存放目錄，然後是這個AppID，這裡有正式和測試的差別，先來看一下正式号AppID怎麼擷取
1. 擷取正式号AppID
這裡可以手動去注冊一個正式的AppId，點選注冊，會進入到小程式注冊頁面，輸入一個未注冊過的郵箱。
注意标注的文字，這很重要，是以當你要進行小程式的開發時，最好是建立一個郵箱去注冊，可以減少不必要的麻煩。當資料填寫完成之後點選注冊按鈕。
然後登入填寫的郵箱，去檢視最新收到的郵件
點選這個連結，進行郵箱賬号的激活，點選之後會進行使用者資訊登記
這裡我選擇的是個人，然後會出現一個二維碼，使用手機微信進行掃描，掃描的使用者将會成為管理者。
注冊成功，點選前往小程式。
點選填寫按鈕，對小程式的相關資訊進行填寫。
當你的小程式名稱和已經注冊過得小程式名稱大緻相同時，會有一個提示。
點選仍然使用。
選擇圖示進行和填寫描述以及小程式的類型，都填寫好了之後點選底部的送出按鈕。送出之後其實你的AppID就生成好了，
選擇小皮天氣，
2. 使用測試号AppID
或者點選右邊的測試号，這個就很簡單了，點選擷取的一個測試的AppID。如果你的小程式是要釋出的，那麼建議你使用正式号AppID。
點選建立，等待項目建立完成。
你會看到給你添加了預設的頁面index,然後就是你的微信頭像，以及一個HelloWorld。
這裡就是模拟器了，一般在開發過程中都是在模拟器中調試運作的，因為你如果要運作的自己的手機微信上，編譯的過程比較長。
下面嘗試運作到手機上。
點選這個真機調試。
手機微信掃描這個二維碼，然後你就會看到你的手機上有這個小程式了。
因為是本身是搞Android開發的，是以這個過程我的感覺就像是通過usb連接配接了手機和電腦，然後在AS上編譯項目安裝APK到手機上，而此時這個APK是隻能自己調試使用的，同理剛才這種方式産生的小程式也是調試使用的，屬于開發版，你可以在微信的小程式清單中看到。
這就是剛才安裝的小程式，你點選一下就會打開，不過這個和網速有關系。這個就相當于一個debug版apk，隻能自己使用。
四、項目結構講解
可以看到，從剛才的微信小程式的項目建立到運作，我沒有寫過代碼。那麼在運作的時候卻能看到我的微信頭像和這個HelloWorld，這說明在建立項目的時候自動給我們生成了一些代碼，就比如AS建立一個新項目會預設有一個MainActivity一樣，同時這個Activity還是啟動頁面，那麼我覺得有必要去了解這個小程式的項目結構，這樣以後寫的時候就不會迷糊了。
上圖就是這個小程式的項目結構。
上面兩個檔案夾pages和utils後面将，先看下面的檔案。
1. app.js
看看裡面的代碼：
這裡看到了一個本地存儲和一個登入，這些都是功能的實作函數，那麼這裡面就是一些業務邏輯代碼。那麼小程式的邏輯就在這裡。
2. app.json
看看裡面的代碼
上方這裡有一個pages的數組，裡面是小程式目前已有的頁面，後面又有一個window表示窗體的樣式，下面還制定了樣式的版本，那麼毫無疑問，這是一個公共配置檔案，當你的小程式增加或者删除頁面時和這個app.json都有關系。app.json檔案用來對微信小程式進行全局配置，決定頁面檔案的路徑、視窗表現、設定網絡逾時時間、多設定多Tab等。
3. app.wxss
看看裡面的代碼：
很明顯這是一個樣式檔案，用來控制小程式的頁面樣式。
4. project.config.json
這是一個項目配置檔案。你的appid可以在這裡做更改，就比如你之前是測試的，你想改成正式的，就在這裡面操作。
5. sitemap.json
檔案用來配置小程式及其頁面是否允許被微信索引。
下面來看這個page
6. pages
這是一個頁面檔案夾，你的小程式的頁面都在這個下面，現在它裡面有兩個頁面。
你可以看到這裡的兩個頁面各自有四個檔案，就拿index來說明。
- index.js 頁面邏輯
- index.wxml 頁面結構
- index.json 頁面配置
- index.wxss 頁面樣式表
基本上每一個頁面都會有這個四個檔案。為了友善開發者減少配置項，描述頁面的四個檔案必須具有相同的路徑與檔案名。可以看到都在index檔案夾下，檔案名一緻，隻是檔案類型不同而已。
7. utils
這個檔案夾下有一個util.js，這是一個工具js檔案，