天天看點

微信小程式從入門到入土教程(01)

1.小程式簡介

微信小程式:是一種全新的連接配接使用者與服務的方式,它可以在微信内被便捷地擷取和傳播,可以了解為使用微信平台開發的app。

小程式是混合開發模式的一種具體實作。

通過wxml(類似與H5)與wxss(類似于css)建構頁面的渲染。

通過邏輯控制層(類似于vue中的view-model)控制資料邏輯。

底層通過封裝實作了硬體裝置調用(例如wifi、藍牙等)。

提供了微信登入、離線緩存等通用接口。

微信小程式的特點:

更強大的能力

原生的體驗

易用且安全的微信資料開放

高效和簡單的開發

小程式與網頁開發的主要開發語言是 JavaScript,從網頁開發遷移到小程式的開發成本并不高,但是二者還是有些許差別的。

網頁開發者可以使用DOM,但小程式開發以邏輯層控制為主,缺少dom與bom接口

網頁開發的相容性主要針對浏覽器,但小程式的相容性主要考慮IOS、Android的微信用戶端。

網頁開發僅需要使用浏覽器以及相關的開發工具,但微信小程式開發需要經過申請賬号、下載下傳專用開發工具等步驟。

微信小程式與百度小程式對比

入口不同:微信碎片化,百度中心化。

能力不同:微信強社交,百度重AI。

開放不同:微信封閉式,百度全開放。

2.微信小程式的釋出流程

在微信公衆平台注冊小程式,完成注冊後可以同步進行資訊完善和開發。

填寫小程式基本資訊,包括名稱、頭像、介紹及服務範圍等。

完成小程式開發者綁定、開發資訊配置後,開發者可下載下傳開發者工具、參考開發文檔進行小程式的開發和調試。

完成小程式開發後,送出代碼至微信團隊稽核,稽核通過後即可釋出(公測期間不能釋出)。

賬号申請

注冊網址:

https://mp.weixin.qq.com/wxopen/waregister?action=step1

根據提示按照步驟注冊即可

開發者工具的下載下傳與安裝

微信開發者工具:內建了公衆号網頁調試和小程式調試兩種開發模式。

使用公衆号網頁調試,開發者可以調試微信網頁授權和微信JS-SDK 詳情

使用小程式調試,開發者可以完成小程式的 API 和頁面的開發調試、代碼檢視和編輯、小程式預覽和釋出等功能。

下載下傳位址:

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

穩定版 Stable Build (1.03.2006090):測試版缺陷收斂後轉為穩定版

預釋出版 RC Build (1.03.2007151):預釋出版,包含大的特性;通過内部測試,穩定性尚可

開發版 Nightly Build:用于盡快修複缺陷和靈活上線小的特性;開發自測驗證,穩定性欠佳

這裡我選的是穩定版Windows64,下載下傳好後一步一步安裝即可

在登入頁,可以使用微信掃碼登入開發者工具,開發者工具将使用這個微信帳号的資訊進行小程式的開發和調試,此時擷取的賬号資訊為掃碼的微信賬号。

微信小程式從入門到入土教程(01)

建立一個項目

微信小程式從入門到入土教程(01)

主要字段說明

AppID:小程式的唯一辨別,需要申請,開發階段可以使用測試号。

後端服務:提供了資料庫、存儲等完整的雲端支援,用于伺服器端開發。

語言:支援ES6或TypeScript。

項目預設結構介紹

微信小程式從入門到入土教程(01)

pages:頁面根目錄,建議頁面以檔案目錄為獨立儲存機關。

utils:系統推薦的工具目錄

app.js:全局邏輯控制層,用于聲明全局資料屬性,系統登入或更新處理等業務邏輯

app.json:小程式全局配置檔案,用于輸入全局視窗配置,路由配置等。

app.wxss:小程式全局樣式檔案。

project.config.json:項目配置檔案,儲存項目開發的個性化配置

sitemap.json:通知搜尋引擎檢索目前小程式時包含哪些内容。

建立一個test檔案夾,檔案夾下建一個test目錄,會顯示出如下的結構

建立test後的檔案組成:

test.wxml:頁面dom結構。

test.json:頁面配置。

test.wxss:頁面樣式。

test.js:頁面的邏輯控制層。

頁面路由配置:小程式項目中的每一個顯示頁面都需要在app.json中配置頁面的通路路徑(路由)

頁面之間的切換與跳轉需要與路由相同的路徑進行通路。

建立頁面後,IDE自動在app.json中生成了目前頁面的路由配置。

小程式的首頁預設為pages數組中的第一個頁面。

微信小程式從入門到入土教程(01)

繼續閱讀