項目結構
pages用來存放所有小程序的頁面
utils用來存放工具性質的模塊(例如:格式化時間的自定義模塊)
app.js小程序項目的入口文件
app.json小程序項目的全局配置文件
app.wxss小程序項目的全局樣式文件
project.config.json項目的配置文件
sitemap.json用來配置小程序及其頁面是否允許被微信索引
其中，每個頁面由4個基本文件組成，它們分別是:
①js文件(頁面的腳本文件，存放頁面的數據、事件處理函數等)
②json 文件(當前頁面的配置文件,配置窗口的外觀、表現等)
③.wxml文件(頁面的模板結構文件)
④.Wxss文件(當前頁面的樣式表文件)
JSON是一-種數據格式,在實際開發中, JSON總是以配置文件的形式出現。小程序項目中也不例外:通過不同的json配置文件，可以對小程序項目進行不同級別的配置。小程序項目中有4種json配置文件，分別是:
①項目根目錄中的app.json配置文件：app.json是當前小程序的全局配置，包括了小程序的所有頁面路徑、窗口外觀、界面表現、底部tab等。
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.configjson的setting中配置字段checkSiteMap為false
④每個頁面文件夾中的.json 配置文件
小程序中的每一個頁面，可以使用json文件來對本頁面的窗口外觀進行配置,頁面中的配置項會覆蓋app.json的window中相同的配置項。
創建新頁面
只需要在app.json -> pages中新增頁面的存放路徑，小程序開發者工具即可幫我們自動創建對應的頁面文件
什么是WXML
WXML ( WeiXin Markup Language)是小程序框架設計的一套標簽語言，用來構建小程序頁面的結構，其作用類似於網頁開發中的HTML。
XML和HTML的區別
①標簽名稱不同
HTML (div, span, img, a)
WXML (view, text, image, navigator)
②屬性節點不同
<a href="#">超鏈接</a> <navigator url="/pages/home/home"></ navigator>
③提供了類似於Vue中的模板語法
數據綁定
列表渲染
條件渲染
什么是WXSS
WXSS (WeiXin Style Sheets)是一套樣式語言,用於描述WXML的組件樣式,類似於網頁開發中的CSS。
wXSS和CSS的區別
①新增了rpx尺寸單位
CSS中需要手動進行像素單位換算,例如rem
WXSS 在底層支持新的尺寸單位rpx,在不同大小的屏幕.上小程序會自動進行換算
②提供了全局的樣式和局部樣式
項目根 目錄中的app.wxss會作用於所有小程序頁面
局部頁面的.wxss樣式僅對當前頁面生效
③WXSS 僅支持部分CSS選擇器
.class 和#id
element
並集選擇器、后代選擇器
::after和::before等偽類選擇器
小程序中的js文件
一個項目僅僅提供界面展示是不夠的,在小程序中，我們通過js文件來處理用戶的操作。例如:響應用戶的點擊、獲取用戶的位置等等。
小程序中js文件的分類
①app.js
是整個小程序項目 的入口文件,通過調用App()函數來啟動整個小程序
②頁面的js文件
是頁面的入口文件, 通過調用Page()函數來創建並運行頁面
③普通的.js文件
是普通的功能模塊文件， 用來封裝公共的函數或屬性供頁面使用
什么是宿主環境
宿主環境(host environment)指的是程序運行所必須的依賴環境。例如:Android系統和ios系統是兩個不同的宿主環境。安卓版的微信App是不能在ios環境下運行的，所以,Android是安卓軟件的宿主環境，脫離了宿主環境的軟件是沒有任何意義的!
小程序宿主環境包含的內容
①通信模型
小程序中的通信模型分為兩部分:
①渲染層和邏輯層之間的通信
●由微信客戶端進行轉發
②邏輯層和第三方服務 器之間的通信
●由微信客戶端進行轉發
②運行機制
③組件
④API
通信的主體
小程序中通信的主體是渲染層和邏輯層，其中:
①WXML模板和WXSS樣式工作在渲染層
②JS 腳本工作在邏輯層
小程序啟動的過程
①把小程序的代碼包下載到本地
②解析app.json全局配置文件
③執行appjs小程序入口文件,調用App()創建小程序實例
④渲染小程序首頁
⑤小程序啟動完成
頁面渲染的過程
①加載解析頁面的jison配置文件
②加載頁面的.wxml模板和.WXss樣式
③執行頁面的js文件,調用Page()創建頁面實例
④頁面渲染完成
小程序中組件的分類
小程序中的組件也是由宿主環境提供的，開發者可以基於組件快速搭建出漂亮的頁面結構。官方把小程序的組件分為了9大類,分別是:
①視圖容器
②基礎內容
③表單組件
④導航組件
⑤媒體組件
⑥map地圖組件
⑦canvas 畫布組件
⑧開放能力
⑨無障礙訪問
常用的視圖容器類組件
①view普通視圖區域
類似於 HTML中的div,是一個塊級元素 常用來實現頁面的布局效果
②scroll-view可滾動的視圖區域
常用來實現滾動列表效果
③swiper 和swiper-item
輪播圖容器組件 和輪播圖item組件
實例：滾動盒子效果
wxml文件
<!--pages/list/list.wxml-->
<!-- scroll-y屬性：允許縱向滾動 -->
<!-- scroll-x屬性：允許橫向滾動 -->
<!-- ps：使用豎向滾動時，必須給scroll-view一個固定高度 -->
<scroll-view class="container1" scroll-y>
<view>A</view>
<view>B</view>
<view>c</view>
</scroll-view>
wxss文件
/* pages/list/list.wxss */
.container1 view{
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
}
.container1 view:nth-child(1){
background-color: lightgreen;
}
.container1 view:nth-child(2){
background-color: lightskyblue;
}.container1 view:nth-child(3){
background-color: lightpink;
}
.container1{
/* 給scroll-view一個固定高度 */
border: 1px solid #000;
height: 120px;
width: 100px;
}
輪播圖寫法
wxml文件
<!-- 輪播圖區域 -->
<!-- indicator-dots顯示面板指示點 -->
<swiper class="swiper-container" indicator-dots>
<swiper-item>
<view class="item">A</view>
</swiper-item>
<swiper-item>
<view class="item">B</view>
</swiper-item><swiper-item>
<view class="item">C</view>
</swiper-item>
</swiper>
wxss文件
.swiper-container{
height: 150px;
}
.item{
height: 100%;
line-height: 150px;
text-align: center;
}
swiper-item:nth-child(1){
background-color: lightgreen;
}
swiper-item:nth-child(2){
background-color: lightblue;
}
swiper-item:nth-child(3){
background-color: lightpink;
}
常用的基礎內容組件
①text
●文本組件
●類似於 HTML中的span標簽,是一一個行內元素
②rich-text
●富文本組件
●支持把 HTML字符串渲染為WXML結構
常用的基礎內容組件 text和和rich-text的用法
<!-- 常用的基礎內容組件 text和和rich-text的用法 -->
<view>
手機號支持長按選中效果
<text user-select>136554654646</text>
</view>
<rich-text nodes="<h1 style='color:red'>標題</h1>"></rich-text>
其它常用組件
①button
按鈕組件
● 功能比HTML中的button按鈕豐富
●通過 open-type屬性可以調用微信提供的各種功能(客服、轉發、獲取用戶授權、獲取用戶信息等)
②image
圖片組件
●image 組件默認寬度約300px、高度約240px
③navigator
頁面導航組件
●類似於HTML中的a鏈接
按鈕組件的基本使用
<!-- 按鈕組件的基本使用 -->
<!-- 通過type屬性指定按鈕顏色類型 -->
<button>普通按鈕</button>
<button type="primary">主色調按鈕</button>
<button type="warn">警告按鈕</button>
<!-- size="mini"小尺寸按鈕 -->
<button size="mini">普通按鈕</button>
<button type="primary" size="mini">主色調按鈕</button>
<button type="warn" size="mini">警告按鈕</button>
<!-- plain鏤空按鈕 -->
<button size="mini" plain="true">普通按鈕</button>
<button type="primary" size="mini" plain="true">主色調按鈕</button>
<button type="warn" size="mini" plain="true">警告按鈕</button>
image組件使用wxml
<!-- 空圖片 -->
<image></image>
<image src=""></image>
image組件使用wxss
image{
/* 通過邊框線證明image有默認的寬和高 */
border: 1px solid red;
}
小程序API概述
小程序中的API是由宿主環境提供的，通過這些豐富的小程序API，開發者可以方便的調用微信提供的能力，例如:獲取用戶信息、本地存儲、支付功能等。
小程序API的3大分類
小程序官方把API分為了如下3大類:
1.事件監聽API
特點:以on開頭，用來監聽某些事件的觸發
舉例: wx.onWindowResize(function callback)監聽窗口尺寸變化的事件
2.同步API
特點1∶以Sync結尾的API都是同步API
特點2:同步API的執行結果，可以通過函數返回值直接獲取，如果執行出錯會拋出異常
舉例:wx.setStorageSync('key' , 'value')向本地存儲中寫入內容
3.異步API
特點:類似於jQuery 中的$.ajax(options)函數，需要通過success、fail、complete接收調用的結果舉例: wx.request()發起網絡數據請求，通過success回調函數接收數據
