一，認識小程序
微信⼩程序，簡稱⼩程序，英⽂名 Mini Program Mini Program ，是⼀種不需要下載安裝即可使⽤的應⽤，它實現 了應⽤「觸⼿可及」的夢想，⽤⼾掃⼀掃或搜⼀下即可打開應⽤
1-1、微信小程序的優勢：
1.微信有廣大的受眾群體，用微信開發產品更容易觸達；
2.推廣app或公眾號的成本太高。
3.開發適配成本低。
4.容易規模試錯，然後快速迭代。
5.跨平台。
可以看出小程序和app使用相比：免安裝、免註冊、免卸載，方便且實用
為什麼要學習小程序
我們上面了解完小程序的優勢和歷史以後，就知道我們為什麼要學習小程序了：
- 依賴微信生態
- 就業面廣
- 上手快
學習完微信小程序以後，再去學習百度小程序，抖音小程序，支付寶小程序就很方便了。因為這些小程序api都很相似。
相對於Java，php，python而言，小程序更適合作為編程的入門語言
相對於傳統前端開發，我們在學習小程序的同時就可以學習CSS，JavaScript的知識
微信小程序對創業者的優勢
- App開發的推廣成本過高
- 移動互聯網格局已定，用戶需求被各路巨頭把持，我們要想在移動互聯網有一番作為，微信是不可避免的靠山
- 小程序能以最小的成本，最快的速度驗證你的商業模式。
微信小程序開發者工具
工欲善其事必先利其器，所以我們在開發小程序之前必須準備好一款適合自己的開發者工具，這裡我給大家推薦官方開發者工具。原因有以下幾點：
- 官方的所有更新，都會第一時間在官方開發者工具同步
- 有任何問題，可以直接反饋給官方
- 官方開發者工具更新迭代最及時
下面就來教大家如何下載官方開發工具：
官方開發者工具下載地址
https://developers.weixin.qq.com/miniprogram/dev/devtools/stable.HTML
個人建議win7系統安裝1.05版本更適合
win10系統安裝1.06更適合
微信小程序官網開發指南：https://developers.weixin.qq.com/miniprogram/dev/framework/
下載安裝好以後，使用微信掃碼登錄。首先，進行簡單的設置如箭頭所指後確認退出。
新建一個小程序，熟悉一下操作界面和基本流程。
如圖appID哪裡選擇自己的ID賬號，選擇不適用雲服務，選擇java script確認。
小程序項目的基本組成結構：紅色文字代表常用項
pages | 用來存放所有小程序的頁面 |
utils | 用來存放工具性質的模塊《例如：格式化時間的自定義模塊》 |
app.js | 小程序項目的入口文件 |
app.json | 小程序項目的全局配置文件 |
app.wxss | 小程序項目的全局樣式文件 |
project.config.json | 項目的配置文件 |
sitemap.json | 用來配置小程序及其頁面是否允許被微信索引 |
小程序官方建議把所有小程序的頁面，都放在pages目錄中，以單獨的文件夾存在。
小程序文件和傳統web對比：
其中，每個頁面由4個基本文件組成，它們分別是：
.js文件 | 頁面的腳本文件，存放頁面的數據、事件處理函數等 |
.json文件 | 當前頁面的配置文件，配置窗口的外觀、表現等 |
.wxml文件 | 頁面的模板結構文件 |
.wxss文件 | 當前頁面的樣式表文件 |
以上4個文件夾單獨存在，以組合作為一個微信小程序頁面。
.json是一種數據格式，在實際開發中，json總是以配置文件的形式出現，小程序項目中也不例外，通過不同的.json配置文件，可以對小程序項目進行不同級別的配置。
小程序項目中有4種.json配置文件，分別是：
- 項目根目錄中的 app.json 配置文件
- 項目根目錄中的 project.config.json 配置文件
- 項目根目錄中的 sitemap.json 配置文件
- 每個頁面文件夾中的.json 配置文件
app.json文件
app.json是當前小程序的全局配置，包括了小程序的所有頁面路徑、窗口外觀、界面表現、底部 tab 等。其中，Demo項目裏面的app.json配置內容如下：
配置項的作用：
- pages : 用來記錄當前小程序所有頁面的路徑
- window : 全局定義小程序所有頁面的背景色、文字顏色等
- style : 全局定義小程序組件所使用的樣式版本
- sitemaplocation : 用來指明 sitemap.json的位置
project.config.json文件
project.config.json 是項目配置文件，用來記錄我們對小程序開發工具所做的個性化配置，例如：
- setting 中保存了編譯相關的配置
- projectname 中保存的是項目名稱
- appid 中保存的是小程序的賬號ID
sitemap.json 文件
微信現已開放小程序內搜索，效果類似於 PC 網頁的 SEO ，sitemap.json文件用來配置小程序頁面是否允許微信搜索。
當開發者允許微信索引時，微信會通過爬蟲的形式，為小程序的頁面內容建立索引，當用戶的搜索關鍵字和頁面的索引匹配成功的時候，小程序的頁面將可能展示在搜索結果中。
重點：sitemap 索引提示是默認開啟的，如需要關閉 sitemap 的索引提示，可在小程序項目配置文件 project.config.json 的 setting 中配置字段 checkSiteMap 為 false
頁面的.json配置文件
小程序中的每一個頁面，可以使用 .json 文件來對本頁面的窗口外觀進行配置，頁面中的配置項會覆蓋app.json 的 windows 中相同的配置項，
新建小程序頁面
只需要在app.json~pages中新增頁面的存放路徑，小程序開發者工具即可幫我們自動創建對應的頁面文件，如圖所示：
首先，選中 app.json 在「 pages 」目錄下，輸入 「 pages/list/list 」新建一個文件夾並「 Ctrl+S 」 鍵保存，即可在「 pages 」文件夾中就會多出一個" pages/list/list "的文件夾。
修改項目首頁：
操作方法：選中app.json~pages 數組中頁面路徑的前後順序即可實現修改項目的首頁，小程序會把排在第一排的頁面，當做項目首頁進行渲染，如圖：
VXML
wxml是小程序框架設計的一套標籤語言，用來構建小程序頁面的結構，作用在於類似網頁中的HTML。
vxml與html的區別：
- 標籤名稱不同：
wxml：用(view、text、image、navigator)標籤來表示
html：用(div、span、img、a)標籤來表示
- 屬性節點不同：
wxml：<navigator url="根目錄文件 ">~</navigator>
html：<a herf="超鏈接 ">~</a>
- 提供類似Vue中的模板語法：
數據綁定；
列表渲染；
條件渲染；
wxss
wxss與css區別：
1、新增了rps尺寸單位
- CSS中需要手動進行像素單位換算，例如：rem
- wxss在底層支持新的尺寸單位
2、提供了全局的樣式和局部樣式
- 項目根目錄中的app.wxss會作用於所有小程序頁面
- 局部頁面的.wxss樣式僅對當前頁面生效
全局樣式.wxss
各個文件夾下的.wxss
3、wxss僅支持部分CSS選擇器
- .class和#id
- element
- 並集選擇器、後代選擇器
- ：：after和：：before等偽類選擇器
小程序中的.js文件
一個項目僅僅提供界面展示是不夠的，在小程序中，通過.js文件來處理用戶的操作。例如：響應用戶的點擊，獲取用戶的位置等。
小程序中.js文件的分類：
- app.js：是整個小程序項目的入口文件，通過使用App（函數）來啟動整個小程序。
- 頁面的.js文件：是頁面的入口文件，通過調用Page(函數)來創建並運行頁面
- 普通.js文件：是普通的功能模塊文件，用來封裝公共的函數或是屬性供頁面使用。
什麼是宿主環境
宿主環境是指程序運行所必須的依賴環境。例如：
Andrioid系統 和 IOS系統他們就可以被稱作是兩個不同的宿主，搭建的平台不一樣運行環境也不一樣，彼此間不共通也不共融各自有自己的相應APP程序平台。
小程序宿主環境包括的內容：
- 通信模型
- 運行環境與機制
- 小程序中的組件
- API
- 通訊模型：小程序中通信的主體是渲染層和邏輯層，其中：
- wxml模型和wxss樣式工作在渲染層；
- .js腳本工作在邏輯層；
- wxml模型和wxss樣式工作在渲染層；由微信客戶端進行轉發；邏輯層和第三方服務器之間的通信是由微信客戶端進行轉發；
小程序啟動運行機制：
1、啟動運行機制：
- 把小程序的代碼包下載到本地
- 解析app.json全局配置文件
- 執行app.js小程序入口文件，目的是調用APP(函數)創建小程序實例
- 渲染小程序首頁
- 小程序啟動完成
2、頁面渲染的過程：
- 加載解析頁面的.json配置文件
- 加載頁面的.wxml 模板和wxss 樣式
- 執行頁面的.js文件，目的是調用Page(函數)創建頁面實例
- 頁面渲染完成
小程序中組件的分類
小程序中的組件也是由宿主環境來提供的，開發者可以基於組件快速搭建出漂亮的頁面結構，官網把小程序組件分為9大類，分別是：
- 視圖容器
- 基礎內容
- 表單組件
- 媒體組件
- 導航組件
- map地圖組件
- canvas畫布組件
- 開放能力
- 無障礙訪問
常用視圖容器組件：
view
- 普通視圖區域
- 類似於htlm中的div，是一個塊元素
- 常用來實現頁面的布局效果
scroll-view
- 小程序網頁中不能全部顯示網頁內容時，通過滑動上下滾動欄來顯示
- 常用來實現頁面滾動列表的效果
swiper 和 swiper-item
- 輪播圖容器組件和輪播圖 item 組件
view組件的基本使用
實現fiex橫向布局效果：
首先，在app.json文件夾下創建「 pages/fist/fist 」，就會在「 pages 」文件夾下生成「 pages/fist/fist 」根目錄。
接着我們在pages/fist/fist 文件夾下的fist.wxml根目錄中新建一個結構標籤並ctrl+c保存
<!--pages/fist/fist.wxml-->
<view class="container1">
<view>A</view>
<view>B</view>
<view>C</view>
</view>
fist.wxss根目錄樣式中，創建
/* pages/fist/fist.wxss */
.container1 view {
width: 100;
height: 100;
text-align: center;
line-height: 100px;
}
然後我們給這組盒子賦予一組背景顏色作為區分。
.container1 view :nth-child(1) {
background-color: lightblue;
}
.container1 view :nth-child(2) {
background-color: lightblue;
}
.container1 view :nth-child(3) {
background-color: lightblue;
}
最後我們再賦予一個盒子橫向排列，兩邊分開對齊
container1 {
display: flex;
justify-content: space-around;
}
scroll-view 組件的基本使用
實現縱向滾動的效果：
<fist .wxml>中
<!--pages/fist/fist.wxml-->
<scroll-view class="container1">
<view>A</view>
<view>B</view>
<view>C</view>
</scroll-view>
<fist.wxss>根目錄中
container1 {
border: 1px solid red;
width: 100px;
height: 120px;
}
