【微信小程式開發】第1篇:開發工具安裝及程式配置

語言: CN / TW / HK

theme: awesome-green

持續創作,加速成長!這是我參與「掘金日新計劃 · 6 月更文挑戰」的第19天,點選檢視活動詳情

📢📢📢📣📣📣\ 哈嘍!大家好,我是【IT邦德】,江湖人稱jeames007,10年DBA工作經驗\ 中國DBA聯盟(ACDU)成員,目前從事DBA及程式程式設計😜😜😜\ 擅長Oracle、MySQL、PG 運維開發,備份恢復,安裝遷移,效能優化、故障應急處理。\ ❤️❤️❤️感謝各位大可愛小可愛!❤️❤️❤️

摘要:小程式,由於其便捷的操作,以及豐富的功能,已經普及到了生活中的各個領域,有很多人對於小程式的瞭解僅僅是會使用的狀態,對於系統的東西卻不瞭解,本次講解開發工具安裝及程式配置。

在這裡插入圖片描述

⛳️ 1.應掌握的技能

🚀 要開發微信小程式,需要掌握以下技能

1.HTML HTML是網頁開發前端三劍客之一,主要負責網頁的骨架,就如同動物的骨架一樣, HTML語言就是支撐網頁佈局的骨架。 2.CSS CSS,是層疊樣式表的簡寫。主要負責網頁樣式, 網頁內容如何分佈,板塊背景,顏色等外觀問題可以有CSS控制。 3.JavaScript JavaScript(簡稱“JS”) 是一種具有函式優先的輕量級,解釋型或即時編譯型的程式語言。 雖然它是作為開發Web頁面的指令碼語言而出名,但是它也被用到了很多非瀏覽器環境中, JavaScript 基於原型程式設計、多正規化的動態指令碼語言,並且支援面向物件、命令式、宣告式、函數語言程式設計正規化

⛳️ 2.申請賬號

開發小程式的第一步,你需要擁有一個小程式帳號,通過這個帳號你就可以管理你的小程式。\ 跟隨以下步驟,開始你的小程式之旅吧!\ 官方網址:https://developers.weixin.qq.com/miniprogram/dev/framework/

🚀進入小程式註冊頁 根據指引填寫資訊和提交相應的資料,就可以擁有自己的小程式帳號。 在這裡插入圖片描述 在這裡插入圖片描述 在這裡插入圖片描述

在這個小程式管理平臺,你可以管理你的小程式的許可權,檢視資料報表,釋出小程式等操作。 登入 小程式後臺 ,我們可以在選單 “開發”-“開發設定” 看到小程式的 AppID 了 。

在這裡插入圖片描述

小程式的 AppID 相當於小程式平臺的一個身份證, 後續你會在很多地方要用到 AppID (注意這裡要區別於服務號或訂閱號的 AppID)。 有了小程式帳號之後,我們需要一個工具來開發小程式。

⛳️ 3.安裝開發工具

🚀 根據自己的作業系統下載對應的安裝包進行安裝在這裡插入圖片描述 在這裡插入圖片描述 在這裡插入圖片描述

🚀 開啟小程式開發者工具,用微信掃碼登入開發者工具,準備開發你的第一個小程式吧! 你的第一個小程式 新建專案選擇小程式專案,選擇程式碼存放的硬碟路徑,填入剛剛申請到的小程式的 AppID, 給你的專案起一個好聽的名字,勾選 "不使用雲服務" (注意: 你要選擇一個空的目錄才可以建立專案),點選新建, 你就得到了你的第一個小程式了, 點選頂部選單編譯就可以在微信開發者工具中預覽你的第一個小程式。 在這裡插入圖片描述

⛳️ 4.小程式程式碼構成

我們通過開發者工具快速建立了一個 QuickStart 專案。你可以留意到這個專案裡邊生成了不同型別的檔案: .json 字尾的 JSON 配置檔案 .wxml 字尾的 WXML 模板檔案 .wxss 字尾的 WXSS 樣式檔案 .js 字尾的 JS 指令碼邏輯檔案 接下來我們分別看看這4種檔案的作用。

🍌 4.1 JSON 配置

JSON 是一種資料格式,並不是程式語言,在小程式中,JSON扮演的靜態配置的角色。 我們可以看到在專案的根目錄有一個 app.json 和 project.config.json,此外在 pages/logs 目錄下還有一個 logs.json,我們依次來說明一下它們的用途。

✨✨ 小程式配置 app.json

app.json 是當前小程式的全域性配置,包括了小程式的所有頁面路徑、介面表現、網路超時時間、底部 tab 等。QuickStart 專案裡邊的 app.json 配置內容如下:

``` { "pages":[ "pages/index/index", "pages/logs/logs" ], "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "Weixin", "navigationBarTextStyle":"black" } }

簡單說一下這個配置各個項的含義: pages欄位 —— 用於描述當前小程式所有頁面路徑, 這是為了讓微信客戶端知道當前你的小程式頁面定義在哪個目錄。 window欄位 —— 定義小程式所有頁面的頂部背景顏色,文字顏色定義等。 其他配置項細節可以參考文件 小程式的配置 app.json 。 ```

✨✨ 工具配置 project.config.json

通常大家在使用一個工具的時候,都會針對各自喜好做一些個性化配置,例如介面顏色、編譯配置等等,當你換了另外一臺電腦重新安裝工具的時候,你還要重新配置。 考慮到這點,小程式開發者工具在每個專案的根目錄都會生成一個 project.config.json,你在工具上做的任何配置都會寫入到這個檔案,當你重新安裝工具或者換電腦工作時,你只要載入同一個專案的程式碼包,開發者工具就自動會幫你恢復到當時你開發專案時的個性化配置,其中會包括編輯器的顏色、程式碼上傳時自動壓縮等等一系列選項。

✨✨ 頁面配置 page.json

這裡的 page.json 其實用來表示 pages/logs 目錄下的 logs.json 這類和小程式頁面相關的配置。 如果你整個小程式的風格是藍色調,那麼你可以在 app.json 裡邊宣告頂部顏色是藍色即可。實際情況可能不是這樣,可能你小程式裡邊的每個頁面都有不一樣的色調來區分不同功能模組,因此我們提供了 page.json,讓開發者可以獨立定義每個頁面的一些屬性,例如剛剛說的頂部顏色、是否允許下拉重新整理等等。

✨✨ JSON 語法

``` 這裡說一下小程式裡 JSON 配置的一些注意事項。 JSON檔案都是被包裹在一個大括號中 {},通過 key-value 的方式來表達資料。JSON的 Key 必須包裹在一個雙引號中,在實踐中,編寫 JSON 的時候,忘了給 Key 值加雙引號或者是把雙引號寫成單引號是常見錯誤。 JSON的值只能是以下幾種資料格式,其他任何格式都會觸發報錯,例如 JavaScript 中的 undefined。 數字,包含浮點數和整數 字串,需要包裹在雙引號中 Bool值,true 或者 false 陣列,需要包裹在方括號中 [] 物件,需要包裹在大括號中 {} Null 還需要注意的是 JSON 檔案中無法使用註釋,試圖添加註釋將會引發報錯。

```

🍌 4.2 WXML 模板

從事過網頁程式設計的人知道,網頁程式設計採用的是 HTML + CSS + JS 這樣的組合,其中 HTML 是用來描述當前這個頁面的結構,CSS 用來描述頁面的樣子,JS 通常是用來處理這個頁面和使用者的互動。 同樣道理,在小程式中也有同樣的角色,其中 WXML 充當的就是類似 HTML 的角色。開啟 pages/index/index.wxml,你會看到以下的內容: <view class="container"> <view class="userinfo"> <button wx:if="{{!hasUserInfo && canIUse}}"> 獲取頭像暱稱 </button> <block wx:else> <image src="{{userInfo.avatarUrl}}" background-size="cover"></image> <text class="userinfo-nickname">{{userInfo.nickName}}</text> </block> </view> <view class="usermotto"> <text class="user-motto">{{motto}}</text> </view> </view>

``` 和 HTML 非常相似,WXML 由標籤、屬性等等構成。但是也有很多不一樣的地方,我們來一一闡述一下: 標籤名字有點不一樣 往往寫 HTML 的時候,經常會用到的標籤是 div, p, span,開發者在寫一個頁面的時候可以根據這些基礎的標籤組合出不一樣的元件,例如日曆、彈窗等等。換個思路,既然大家都需要這些元件,為什麼我們不能把這些常用的元件包裝起來,大大提高我們的開發效率。 從上邊的例子可以看到,小程式的 WXML 用的標籤是 view, button, text 等等,這些標籤就是小程式給開發者包裝好的基本能力,我們還提供了地圖、視訊、音訊等等元件能力。 更多詳細的元件講述參考下個章節 小程式的能力 多了一些 wx:if 這樣的屬性以及 {{ }} 這樣的表示式 在網頁的一般開發流程中,我們通常會通過 JS 操作 DOM (對應 HTML 的描述產生的樹),以引起介面的一些變化響應使用者的行為。例如,使用者點選某個按鈕的時候,JS 會記錄一些狀態到 JS 變數裡邊,同時通過 DOM API 操控 DOM 的屬性或者行為,進而引起介面一些變化。當專案越來越大的時候,你的程式碼會充斥著非常多的介面互動邏輯和程式的各種狀態變數,顯然這不是一個很好的開發模式,因此就有了 MVVM 的開發模式(例如 React, Vue),提倡把渲染和邏輯分離。簡單來說就是不要再讓 JS 直接操控 DOM,JS 只需要管理狀態即可,然後再通過一種模板語法來描述狀態和介面結構的關係即可。

小程式的框架也是用到了這個思路,如果你需要把一個 Hello World 的字串顯示在介面上。 WXML 是這麼寫 : {{msg}} JS 只需要管理狀態即可: this.setData({ msg: "Hello World" }) 通過 {{ }} 的語法把一個變數繫結到介面上,我們稱為資料繫結。僅僅通過資料繫結還不夠完整的描述狀態和介面的關係,還需要 if/else, for等控制能力,在小程式裡邊,這些控制能力都用 wx: 開頭的屬性來表達。 ```

🍌 4.3 WXSS 樣式

WXSS 具有 CSS 大部分的特性,小程式在 WXSS 也做了一些擴充和修改。 新增了尺寸單位。在寫 CSS 樣式時,開發者需要考慮到手機裝置的螢幕會有不同的寬度和裝置畫素比,採用一些技巧來換算一些畫素單位。WXSS 在底層支援新的尺寸單位 rpx ,開發者可以免去換算的煩惱,只要交給小程式底層來換算即可,由於換算採用的浮點數運算,所以運算結果會和預期結果有一點點偏差。 提供了全域性的樣式和區域性樣式。和前邊 app.json, page.json 的概念相同,你可以寫一個 app.wxss 作為全域性樣式,會作用於當前小程式的所有頁面,區域性頁面樣式 page.wxss 僅對當前頁面生效。 此外 WXSS 僅支援部分 CSS 選擇器

🍌 4.4 JS 邏輯互動

一個服務僅僅只有介面展示是不夠的,還需要和使用者做互動:響應使用者的點選、獲取使用者的位置等等。在小程式裡邊,我們就通過編寫 JS 指令碼檔案來處理使用者的操作。 <view>{{ msg }}</view> <button bindtap="clickMe">點選我</button> 點選 button 按鈕的時候,我們希望把介面上 msg 顯示成 "Hello World",於是我們在 button 上宣告一個屬性: bindtap ,在 JS 檔案裡邊聲明瞭 clickMe 方法來響應這次點選操作: Page({ clickMe: function() { this.setData({ msg: "Hello World" }) } }) 響應使用者的操作就是這麼簡單,更詳細的事件可以參考文件 WXML - 事件 。 此外你還可以在 JS 中呼叫小程式提供的豐富的 API,利用這些 API 可以很方便的調起微信提供的能力,例如獲取使用者資訊、本地儲存、微信支付等。在前邊的 QuickStart 例子中,在 pages/index/index.js 就呼叫了 wx.getUserInfo 獲取微信使用者的頭像和暱稱,最後通過 setData 把獲取到的資訊顯示到介面上。

⛳️ 5.小程式目錄結構

小程式包含一個描述整體程式的 app 和多個描述各自頁面的 page。 一個小程式主體部分由三個檔案組成,必須放在專案的根目錄,如下: 在這裡插入圖片描述 一個小程式頁面由四個檔案組成,分別是: 在這裡插入圖片描述 注意:為了方便開發者減少配置項,描述頁面的四個檔案必須具有相同的路徑與檔名。

在這裡插入圖片描述