一、小程序簡介
1.1 小程序代碼的構(gòu)成
1.1.1 項目結(jié)構(gòu)
1. 基本組成結(jié)構(gòu)
pages：用來存放所有小程序的頁面
utils：用來存放工具性質(zhì)的模塊（例如：格式化時間的自定義模塊）
app.js：小程序項目的入口文件
app.json：小程序項目的全局配置文件
app.wxss：小程序項目的全局樣式文件
project.config.json：項目的配置文件
sitemap.json：用來配置小程序及其頁面是否允許被微信索引
2. 頁面的組成部分
小程序官方建議把所有小程序的頁面浊猾，都存放在 pages 目錄中森瘪，以單獨的文件夾存在，如圖所示：
每個頁面由4個基本文件組成：
.js文件：頁面的腳本文件凉敲，存放頁面的數(shù)據(jù)戒职、事件處理函數(shù)等
.json文件：當(dāng)前頁面的配置文件域蜗，配置窗口的外觀、表現(xiàn)等
.wxml文件：頁面的模板結(jié)構(gòu)文件
.wxss文件：當(dāng)前頁面的樣式表文件
1.1.2 JSON 配置文件
1. JSON 配置文件的作用
JSON 是一種數(shù)據(jù)格式凛剥，在實際開發(fā)中侠仇，JSON 總是以配置文件的形式出現(xiàn)，通過不同的 .json 配置文件犁珠，可以對小程序項目進行不同級別的配置逻炊。
小程序項目中有4中 json 配置文件：
項目根目錄中的 app.json 配置文件
項目根目錄中的 project.config.json 配置文件
項目根目錄中的 sitemap.json 配置文件
每個頁面文件夾中的 .json 配置文件
2. app.json 文件
app.json是當(dāng)前小程序的全局配置，包括了小程序的所有頁面路徑犁享、窗口外觀余素、界面表現(xiàn)、底部tab等炊昆。
一個新建成的項目里的 app.json 配置內(nèi)容如下：
{
"pages": [
"pages/index/index",
"pages/logs/logs"
? ],
"window": {
"backgroundTextStyle":"light",
"navigationBarBackgroundColor":"#fff",
"navigationBarTitleText":"Weixin",
"navigationBarTextStyle":"black"
? },
"style":"v2",
"sitemapLocation":"sitemap.json",
"lazyCodeLoading":"requiredComponents"
}
pages：用來記錄當(dāng)前小程序所有頁面的路徑
window：全局定義小程序所有頁面的背景色桨吊、文字顏色等
style：全局定義小程序組件所使用的的樣式版本
sitemapLocation：用來指明 sitemap.json 的位置
3. project.config.json 文件
project.config.json 是項目配置文件，用來記錄我們對小程序開發(fā)工具所做的個性化配置
setting：保存了編譯相關(guān)的配置
projectname：項目名稱
appid：小程序的賬號 ID
4. sitemap.json 文件
sitemap.json 文件用來配置小程序頁面是否允許微信索引
當(dāng)開發(fā)者允許微信索引時凤巨，微信會通過爬蟲的形式视乐，為小程序的頁面內(nèi)容建立索引。當(dāng)用戶的搜索關(guān)鍵字和頁面的索引匹配成功的時候磅甩，小程序的頁面將可能展示在搜索結(jié)果中
sitemap 的索引提示是默認(rèn)開啟的炊林，如需要關(guān)閉 sitemap 的索引提示，可在小程序項目配置文件 project.config.json 的 setting 中配置字段 checkSiteMap 為 false
5. 頁面的 .json 配置文件
小程序中的每一個頁面卷要，可以使用 .json 文件來對本頁面的窗口外觀進行配置渣聚，頁面中的配置項會覆蓋app.json 的 window 中相同的配置項
如：在 index.json 中更改了 navigationBarBackgroundColor 頂部配置的背景顏色，會覆蓋 app.json 中配置的顏色
6. 新建小程序頁面
只需要在 app.json -> pages 中新增頁面的存放路徑僧叉，小程序開發(fā)者工具即可幫我們自動創(chuàng)建對應(yīng)的頁面文件
7. 修改項目首頁
只需要調(diào)整 app.json -> pages 數(shù)組中頁面路徑的前后順序奕枝，即可修改項目的首頁。小程序會把排在第一位的頁面瓶堕，當(dāng)作項目首頁進行渲染隘道。
1.1.3 WXML 模板
1. WXML
WXML（WeiXin Markup Language）是小程序框架設(shè)計的一套標(biāo)簽語言，用來構(gòu)建小程序頁面的結(jié)構(gòu)郎笆，其作用類似于網(wǎng)頁開發(fā)中的 HTML
2. WXML 與 HTML 的區(qū)別
標(biāo)簽名不同
HTML(div, span, img, a)
WXML(view, text, image, navigator)
屬性節(jié)點不同
<a href="#">超鏈接</a>
<navigator url="/pages/home/home"></navigator>
提供了類似于 Vue 中的模板語法
數(shù)據(jù)綁定
列表渲染
條件渲染
1.1.4 WXSS 樣式
1. WXSS
WXSS (WeiXin Style Sheets)是一套樣式語言谭梗，用于描述 WXML 的組件樣式，類似于網(wǎng)頁開發(fā)中的 CSS
2. WXSS 與 CSS 的區(qū)別
新增了 rpx 尺寸單位
CSS 中需要手動進行像素單位換算宛蚓，例如 rem
WXSS 在底層支持新的尺寸單位 rpx激捏，在不同大小的屏幕上小程序會自動進行換算
提供了全局的樣式和局部樣式
項目根目錄中的 app.wxss 會作用于所有小程序頁面
局部頁面的 .wxss 樣式僅對當(dāng)前頁面生效
WXSS 僅支持部分 CSS 選擇器
.class 和 #id
element
并集選擇器、后代選擇器
::after 和 ::before 等偽類選擇器
1.1.5 JS 邏輯交互
1. 小程序中的 .js 文件
通過 .js 文件來處理用戶的操作凄吏。例如：響應(yīng)用戶的點擊远舅、獲取用戶的位置等等
2. .js 文件的分類
app.js：整個小程序項目的入口文件，通過調(diào)用 App() 函數(shù)來啟動整個小程序
頁面的 .js 文件：頁面的入口文件序六，通過調(diào)用 Page() 函數(shù)來創(chuàng)建并運行頁面
普通的 .js 文件：普通的功能模塊文件蚤吹，用來封裝公共的函數(shù)或?qū)傩怨╉撁媸褂?/p>
1.2 小程序的宿主環(huán)境
1.2.1 簡介
1. 宿主環(huán)境
宿主環(huán)境（host environment）指的是程序運行所必須的依賴環(huán)境例诀。例如：
Android 系統(tǒng)和 iOS 系統(tǒng)是兩個不同的宿主環(huán)境。安卓版的微信 App 是不能在 iOS 環(huán)境下運行的余佃，所以跨算，Android 是安卓軟件的宿主環(huán)境，脫離了宿主環(huán)境的軟件是沒有任何意義的椭懊！
2. 小程序的宿主環(huán)境
手機微信是小程序的宿主環(huán)境
小程序借助宿主環(huán)境提供的能力诸蚕，可以完成許多普通網(wǎng)頁無法完成的功能背犯，例如：
微信掃碼盅抚、微信支付妄均、微信登錄、地理定位禁熏、etc…
3. 小程序宿主環(huán)境包含的內(nèi)容
通信模型
運行機制
組件
API
1.2.2 通信模型
1. 通信主體
小程序中通信的主體是 渲染層 和 邏輯層
WXML 模板和 WXSS 樣式工作在渲染層
JS 腳本工作在邏輯層
2. 小程序的通信模型
小程序中的通信模型分為兩部分：
渲染層和邏輯層之間的通信：由微信客戶端進行轉(zhuǎn)發(fā)
邏輯層和第三方服務(wù)器之間的通信：由微信客戶端進行轉(zhuǎn)發(fā)
1.2.3 運行機制
1. 啟動過程
把小程序的代碼包下載到本地
解析 app.json 全局配置文件
執(zhí)行 app.js 小程序入口文件瞧毙，調(diào)用 App() 創(chuàng)建小程序?qū)嵗?/p>
渲染小程序首頁
小程序啟動完成
2. 頁面渲染的過程
加載解析頁面的 .json 配置文件
加載頁面的 .wxml 模板和 .wxss 樣式
執(zhí)行頁面的 .js 文件宙彪，調(diào)用 Page() 創(chuàng)建頁面實例
頁面渲染完成
1.2.4 組件
1. 組件的分類
小程序中的組件也是由宿主環(huán)境提供的有巧，開發(fā)者可以基于組件快速搭建出漂亮的頁面結(jié)構(gòu)剪决。官方把小程序的組件分為了 9 大類檀训，分別是：
視圖容器
基礎(chǔ)內(nèi)容
表單組件
導(dǎo)航組件
媒體組件
map 地圖組件
canvas 畫布組件
開放能力
無障礙訪問
2.? 常用的視圖容器類組件
view
普通視圖區(qū)域
類似于 HTML 中的 div享言，是一個塊級元素
常用來實現(xiàn)頁面的布局效果
scroll-view
可滾動的視圖區(qū)域
常用來實現(xiàn)滾動列表效果
swiper 和 swiper-item
輪播圖容器組件 和 輪播圖 item 組件
3. View 組件的基本使用
實現(xiàn)如圖的 flex 橫向布局效果
<!--pages/list/list.wxml-->
<viewclass="container1">
<view>A</view>
<view>B</view>
</view>
/* pages/list/list.wxss */
.container1view{
width:100px;
height:100px;
text-align:center;
line-height:100px;
}
.container1view:nth-child(1){
background-color:lightgreen;
}
.container1view:nth-child(2){
background-color:lightskyblue;
}
.container1{
display:flex;
justify-content:space-around;
}
4. scroll-view 組件的基本使用
<!--pages/list/list.wxml-->
<!-- scroll-y 屬性：允許縱向滾動 -->
<!-- scroll-x 屬性：允許橫向滾動 -->
<!-- 注意：使用豎向滾動時荧琼，必須給 scroll-view 一個固定高度 -->
<scroll-viewclass="container1"scroll-y>
<view>A</view>
<view>B</view>
</scroll-view>
.container1view{
width:100px;
height:100px;
text-align:center;
line-height:100px;
}
.container1view:nth-child(1){
background-color:lightgreen;
}
.container1view:nth-child(2){
background-color:lightskyblue;
}
.container1{
border:1pxsolidred;
/* 給 scroll-view 固定高度 */
height:120px;
width:100px;
}
5. swiper 和 swiper-item 組件的基本使用
<!--pages/list/list.wxml-->
<!-- 輪播圖區(qū)域 -->
<!-- indicator-dots 屬性：顯示面板指示點 -->
<swiperclass="swiper-container"indicator-dots="false"autoplay="true"circular="true">
<swiper-item>
<viewclass="item">A</view>
</swiper-item>
<swiper-item>
<viewclass="item">B</view>
</swiper-item>
<swiper-item>
<viewclass="item">C</view>
</swiper-item>
</swiper>
/* pages/list/list.wxss */
.swiper-container{
height:150px;
}
.item{
height:100%;
line-height:150px;
text-align:center;
}
swiper-item:nth-child(1).item{
background-color:lightskyblue;
}
swiper-item:nth-child(2).item{
background-color:lightgreen;
}
swiper-item:nth-child(3).item{
background-color:lightcoral;
}
swiper 組件的常用屬性
屬性類型默認(rèn)值說明
indicator-dotsbooleanfalse是否顯示面板指示點
indicator-colorcolorrgba(0,0,0,3)指示點顏色
indicator-active-colorcolor#000000當(dāng)前選中的指示點顏色
autoplaybooleanfalse是否自動切換
intervalnumber5000自動切換時間間隔
circularbooleanfalse是否采用銜接滑動
只有親自動手試了才能真正體會記住。
6. 常用的基礎(chǔ)內(nèi)容組件
text
文本組件
類似于 HTML 中的 span 標(biāo)簽脐恩，是一個行內(nèi)元素
rich-text
富文本組件
支持把 HTML 字符串渲染成 WXML 結(jié)構(gòu)
7. text 組件的基本使用
通過 text 組件的 selectable 屬性侦讨，實現(xiàn)長按選中文本內(nèi)容的效果：
<!--pages/list/list.wxml-->
<view>
?? 手機號支持長按選中效果：
<textselectable>12345678900</text>
</view>
8. rich-text 組件的基本使用
通過 rich-text 組件的 nodes 屬性節(jié)點韵卤，把 HTML 字符串渲染為對應(yīng)的 UI 結(jié)構(gòu)：
<!--pages/list/list.wxml-->
<rich-textnodes="<h1 style='color:red'>標(biāo)題<h1>"></rich-text>
9. 其他常用組件
button
按鈕組件
功能比 HTML 中的 button 按鈕更豐富
通過 open-type 屬性可以調(diào)用微信提供的各種功能（客服沈条、轉(zhuǎn)發(fā)、獲取用戶授權(quán)屋厘、獲取用戶信息等）
image
圖片組件
image 組件默認(rèn)寬度約為 300px擅这、高度約為 240px
navigator
頁面導(dǎo)航組件
類似于 HTML 中的 a 鏈接
10. button 按鈕的基本使用
<!--pages/list/list.wxml-->
<view>------------- 通過 type 指定按鈕類型 -----------</view>
<button>默認(rèn)按鈕</button>
<buttontype="primary">主色調(diào)按鈕</button>
<buttontype="warn">警告按鈕</button>
<view>------------- size="mini" 小尺寸按鈕 -------------</view>
<buttonsize="mini">默認(rèn)按鈕</button>
<buttontype="primary"size="mini">主色調(diào)按鈕</button>
<buttontype="warn"size="mini">警告按鈕</button>
<view>-------------- plain 鏤空按鈕 -------------------</view>
<buttonsize="mini"plain>默認(rèn)按鈕</button>
<buttontype="primary"size="mini"plain>主色調(diào)按鈕</button>
<buttontype="warn"size="mini"plain>警告按鈕</button>
11. image 組件的基本使用
<!--pages/list/list.wxml-->
<!-- 1. 空圖片 -->
<image></image>
<!-- 2. 用 src 指向圖片路徑 -->
<imagesrc="/pages/list/images/2.jpg"></image>
/* pages/list/list.wxss */
image{
/* 通過邊框說明 image 有默認(rèn)的寬高 */
border:1pxsolidred;
}
image 組件的 mode 屬性
image 組件的 mode 屬性用來指定圖片的裁剪和縮放模式，常用的 mode 屬性值如下：
mode 值說明
scaleToFill（默認(rèn)值）縮放模式铛漓，不保持縱橫比縮放圖片浓恶，使圖片的寬高完全拉伸至填滿 image 元素
aspectFit縮放模式，保持縱橫比縮放圖片湿镀，使圖片的長邊能完全顯示出來。也就是說赫模，可以完整地將圖片顯示出來
aspectFill縮放模式蒸矛，保持縱橫比縮放圖片雏掠，只保證圖片的短邊能完全顯示出來。也就是說乡话，圖片通常只在水平或垂直方向是完整的绑青，另一個方向?qū)l(fā)生截取。
widthFix縮放模式，寬度不變掠拳，高度自動變化纸肉，保持原圖寬高比不變
heightFix縮放模式柏肪，高度不變，寬度自動變化聂使，保持原圖寬高比不變
1.2.5 API
1. 小程序 API 概述
小程序中的 API 是由宿主環(huán)境提供的谬俄，通過這些豐富的小程序 API，開發(fā)者可以方便的調(diào)用微信提供的能力屎蜓，例如：獲取用戶信息炬转、本地存儲、支付功能等
2. 小程序 API 的 3 大分類
事件監(jiān)聽 API
特點：以 on 開頭驻啤，用來監(jiān)聽某些事件的觸發(fā)
舉例：wx.onWindowResize(function callback)? 監(jiān)聽窗口尺寸變化的時間
同步 API
特點1：以 Sync 結(jié)尾的 API 都是同步 API
特點2：同步 API 的執(zhí)行結(jié)果测僵，可以通過函數(shù)返回值直接獲取捍靠，若執(zhí)行出錯會拋出異常
舉例：wx.setStorageSync('key', 'value')? 向本地存儲中寫入內(nèi)容
異步 API
特點：類似于 JQuery 中的 $.ajax(optins) 函數(shù)，需要通過 success磁携、fail良风、complete 接收調(diào)用的結(jié)果
舉例：wx.request() 發(fā)起網(wǎng)絡(luò)數(shù)據(jù)請求烟央，通過 success 回調(diào)函數(shù)接收數(shù)據(jù)
