小程序與普通網頁的區別 :
1.線程
網頁開發是單線程的,js線程和渲染線程是互斥的。
小程序有一條js邏輯線程和多條渲染線程兩種線程。
2.DOM
網頁開發可以操作DOM。
小程序中不能操作DOM。
3.運行環境
網頁是在PC 端和移動端的瀏覽器上運行
小程序是在android、iOS、小程序開發者工具上運行。
通信模型:
渲染層、邏輯層和服務端的通信都要由微信用戶端轉發。
小程序的渲染層由WebView 線程運行
小程序的邏輯層由JsCore 線程運行。
小程序的渲染層里有多個界面,一個界面對應一個WebView 線程。
邏輯層是單線程,只有的一個JsCore 線程。
常見的json 配置文件有3種:
小程序配置 app.json:做全局配置
頁面配置 page.json:對小程序具體頁面的配置
工具配置 project.config.json:對開發者工具的個性化配置,如域名校驗、代碼上傳時自動壓縮等
WXML 模板:
WXML 全稱是 WeiXin Markup Language 微信標記語言,結合小程序的基礎組件、事件系統,可以構建出頁面的結構。
創建WXML 文件的方法:在app.json 中的“pages/index/index” 上新增一行 “pages/wxml/index” ,便會自動創建WXML 文件
注意:在WXML里的標簽,就是組件的意思,這些組件是微信給封裝好的。我們以后也可以自定義組件,這會在后面會詳說。
數據綁定:
WXML 通過 {{ 變量名 }} 來映射js里的 data 數據。
變量名是大小寫敏感的,也就是說 {{name}} 和 {{NAME}} 是兩個不同的變量。
沒有被定義的變量的或者是被設置為 undefined 的變量不會被同步到 wxml 中。
示例:
<text id="{{id}}">{{msg}}</text>
data: {
id:1,
msg:'開課吧’
},
注:{{}} 叫做Mustache 語法。
{{}} 中的語法邏輯:
{{}} 具有兩種功能:動態渲染、邏輯運算。
{{}} 中除了變量名,還可以放置數字、字符串,并且做一些邏輯運算。
常見的邏輯運算的語法:
算數運算
字符串拼接
三元運算
文件組成:
項目公共樣式:app.wxss,它會作用到小程序的每個頁面。
頁面樣式:與app.json注冊過的頁面同名且位置同級的WXSS文件。
內聯樣式:在wxml 中,寫在標簽的style 屬性里的樣式
其它樣式:可以被項目公共樣式和頁面樣式引用的樣式,比如模板文件里的樣式。
注:小程序中不需要考慮樣式文件的請求數量,不用像前端那樣合并css 文件。
wxss和css區別:
wxss擁有相對的尺寸單位rpx,一個單位的rpx 是手機寬度的1/750
外聯樣式可用@import 導入
background-image 里的圖片為網絡圖片時,其圖片所在網絡的域名要經過微信許可。
position 為absolute 的元素,需要position 為fixed 的容器。(這是由小程序的文檔流中不存在window、document對象導致的)。
宿主環境是微信客戶端給小程序提供的一種環境 。
宿主指的就是微信客戶端,也就是官方API里的wx 對象。
宿主環境的作用是什么?
宿主環境會把我們寫的各種文件整合到一起,進行解析,然后在微信APP 里顯示出我們所看到的樣子。
宿主環境可以為小程序提供微信客戶端的能力,比如微信掃碼,這是普通網頁不具備的。
點開微信小程序的一瞬間,微信客戶端做了些什么?
小程序的后臺狀態和前臺狀態:
后臺狀態:用戶點擊小程序右上角關閉按鈕,或手機的home 鍵時,會離開小程序,但小程序并不會被銷毀,而是進入后臺狀態。此時,APP構造器參數里的onHide 方法會被調用。
前臺狀態:用戶再次小程序時,微信用戶端會喚醒后臺狀態的微信小程序,微信小程序就進入了前臺狀態,onShow 方法會被調用。
注意:App的生命周期是由用戶操作主動觸發的,開發者不能在代碼里主動調用