微信小程序學習筆記

第一步:AppID申請

每一個 AppID 有管理員和開發者的身份。管理員只有一個,並且不能更改;開發者對於未認證的小程序最多爲10個,認證的小程序最多爲20個。只能具備其一,才能在其微信上預覽。

第二步:環境搭建

1.登錄

與別的IDE不同,需使用微信號登錄。這也是前文提到的需要 管理員和開發者的身份 的憑證。

230706uaaouxxm3xbk6x3z.jpg

選擇本地小程序項目

230901poz9kh3qvfxs3kaf.jpg

添加項目

231329cn0vxmutx8tnxsll.jpg

填寫appID,如果沒有的話,單擊無appID,會提示你部分功能受限,不用在意。填寫項目名稱和選擇項目目錄即可。勾選了 在當前目錄中創建 quick start 項目

231436mwwe1wqelhb6yoqz.jpg

2.IDE介紹

作爲公測的產品,此次版本的IDE還是比較簡陋的。相信當微信小程序正式推出的時候,在IDE的使用上會有很大提升,來滿足開發者的開發要求。第一次打開IDE的界面如下:

231541iapfp46okel9prp7.jpg


可以看見在頁面左邊的導航區域,有 編輯,調試,項目,編輯,關閉 五個選項。我們可以在“編輯”裏可以查看和編輯我們的代碼,在“調試”裏可以測試代碼並模擬小程序在微信客戶端效果,在“項目”裏可以發送到手機裏預覽實際效果。至於編譯和關閉,只是兩個功能按鈕。(順帶說一句,這個IDE在 Ctrl + S 的時候會自動編譯)

編輯時,功能區如下:

231642nz6c19cp3vsz6cco.jpg

第三步:開發流程

第一次創建項目,工程目錄如下:(會生成兩個頁面並可以運行)

231856gz770gijn8us9i8z.jpg

.js : 邏輯控制,用於寫JavaScript代碼。 
.wxml : 頁面結構,用於寫html。當然,微信對其有一定的封裝,用的話還需要了解其標籤。 
.wxss : 樣式表文件,用於寫css。 
.json : 樣式配置,符合json語法格式。用來做其作用域內的設置。

做前臺的小夥伴看到這心情一定很激動,這不就是前端代碼嘛。

小程序包含一個描述整體程序的 app 和多個描述各自頁面的 page。

1.1 以app命名的各個文件是整個app的全局配置文件,其必須放在項目的根目錄下。如下:

232004ew306w63mwme33k3.jpg

官方介紹很詳細,就不贅述了: app.js , app.json , app.wxss.

1.2 pages 目錄下,爲工程中的頁面,每一個頁面對應pages下的一個文件夾。文件夾名和文件名一致,不同文件以後綴區分(注意並不是每個文件都是必須的)。

232051tbeb82zviiw5rib8.jpg

官方介紹很詳細,就不贅述了: .js , .wxml , .wxss.json.

注意:描述頁面的這四個文件必須具有相同的路徑與文件名。


2.組件

微信基於HTML封裝了一系列的控件,旨在減少大家的開發難度與工作量,請查看 官方文檔

注意:所有組件與屬性都是小寫,以連字符 - 連接

3.API

請查看 官方文檔


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章