微信小程序簡介、文件類型與目錄結構、實例

一、微信小程序簡介

1. 小程序的特點

• 簡單、用完即走
• 低頻
• 性能要求不高

2. 小程序定義

• 不需要下載安裝（安裝包<1M）
• 用戶用完即走，不用關心是否安裝太多應用
• 應用無處不在，隨時使用（連接人與服務）

APP：體驗差、成本高

小程序：流程簡單、跨平臺

3. 對開發者的影響

• 短期內提升市場對JS程序員的需求量
• 小程序是零基礎開發者入門平臺
• 小程序不可以使用已經存在的JS組件庫
• 開發環境和開發邏輯簡單

4. 編程基礎

• JS
• ES6
• CSS

5. 微信小程序開發工具

調試在sm文件中打斷點，js文件增加了編譯的語句

ctrl+s 查找替換功能

二、小程序文件類型與目錄結構

這裏用遊戲中的類比才能記得更加清楚！

1. html（英雄）

• wxml是編寫小程序骨架的文件。

2. app.js （技能）

• 小程序的腳本代碼，可監聽並控制整個程序的生命週期，並且是全局變量聲明的地方。
• 程序員通過app.js 調用框架提供的諸多API，比如同步存儲、同步讀取本地數據。

3. app.json（銘文）

• 對整個小程序的全局配置，不可註釋。
• 配置小程序頁面組成、窗口背景色、導航條樣式、默認標題等。

4. app.wxss（皮膚）

• 小程序的公共樣式表。可在頁面組件的class類屬性上直接使用app.wxss中聲明的樣式規則。

三、實例：編寫第一個界面

1. 顯示文字和圖片（編寫小程序骨架 .wxml）

• 用text包圍的文字才能被用戶長按選中
• 加入圖片的方法：新建文件夾

2. 調整樣式

①直接在wxml文件裏寫

②轉移到wxss文件中寫

定義容器：彈性、縱向排列、居中

修改字體（可以直接在app.wxss裏統一修改字體）

文字加框（邊框顏色、大小、圓角）

3. 導航欄