站長(zhǎng)資訊網(wǎng)本篇文章給大家?guī)?lái)了關(guān)于微信小程序的相關(guān)知識(shí)，其中主要介紹了關(guān)于宿主環(huán)境的相關(guān)問(wèn)題，手機(jī)微信是小程序的宿主環(huán)境，小程序借助宿主環(huán)境提供的能力，可以實(shí)現(xiàn)許多普通網(wǎng)頁(yè)不能完成的功能，下面一起來(lái)看一下，希望對(duì)大家有幫助。
程序員必備接口測(cè)試調(diào)試工具：立即使用
Apipost = Postman + Swagger + Mock + Jmeter
Api設(shè)計(jì)、調(diào)試、文檔、自動(dòng)化測(cè)試工具
后端、前端、測(cè)試，同時(shí)在線協(xié)作，內(nèi)容實(shí)時(shí)同步
【相關(guān)學(xué)習(xí)推薦：小程序?qū)W習(xí)教程】
小程序的宿主環(huán)境
手機(jī)微信是小程序的宿主環(huán)境，小程序借助宿主環(huán)境提供的能力，可以實(shí)現(xiàn)許多普通網(wǎng)頁(yè)不能完成的功能。例如：小程序調(diào)用微信提供的API實(shí)現(xiàn)掃碼，支付等功能。
小程序的宿主環(huán)境包含的內(nèi)容：
通信模型
運(yùn)行機(jī)制
組件
API
通信模型
1.通信的主體
小程序中通信的主體是渲染層和邏輯層，其中：
WXML 模板和 WXSS 樣式工作在渲染層
JS 腳本工作在邏輯層
2.小程序的通信模型
小程序的通信模型分為兩部分：
渲染層和邏輯層之間的通信
邏輯層和第三方服務(wù)器之間的通信
兩者都通過(guò)微信客戶端進(jìn)行轉(zhuǎn)發(fā)
運(yùn)行機(jī)制
1.小程序的啟動(dòng)過(guò)程
把小程序的代碼包下載到本地
解析 app.json 全局配置文件
執(zhí)行 app.js 小程序入口文件，調(diào)用 App() 創(chuàng)建小程序?qū)嵗?/p>
渲染小程序首頁(yè)
小程序啟動(dòng)完成
2.頁(yè)面渲染的過(guò)程
加載解析頁(yè)面的 .json 配置文件
加載頁(yè)面的 .wxml 模板和 .wxss 樣式
執(zhí)行頁(yè)面的 .js 文件，調(diào)用 Page() 創(chuàng)建頁(yè)面實(shí)例
頁(yè)面渲染完成
組件
1.小程序中組件的分類：
小程序中的組件也是由宿主環(huán)境提供的，開(kāi)發(fā)者可以基于組件快速搭建出漂亮的頁(yè)面結(jié)構(gòu)。官方把小程序的組件分為了 9 大類，分別是：
-
視圖容器
-
基礎(chǔ)內(nèi)容
-
表單組件
-
導(dǎo)航組件
-
體組件
-
map 地圖組件
-
canvas 畫(huà)布組件
-
開(kāi)放能力
-
無(wú)障礙訪問(wèn)
2. 常用的視圖容器類組件
view
普通視圖區(qū)域
類似于 HTML 中的 div，是一個(gè)塊級(jí)元素
常用來(lái)實(shí)現(xiàn)頁(yè)面的布局效果
例如：使用flex實(shí)現(xiàn)橫向布局。
wxml代碼:
A B C
wxss代碼：
.container1 view{ width:100px; height:100px; text-align: center; line-height: 100px; } .container1 view:nth-child(1){ background-color: aquamarine; } .container1 view:nth-child(2){ background-color: azure; } .container1 view:nth-child(3){ background-color: darkorange; } .container1 { display: flex; justify-content: space-around; }
實(shí)現(xiàn)效果：
scroll-view
-
可滾動(dòng)的視圖區(qū)域
-
常用來(lái)實(shí)現(xiàn)滾動(dòng)列表效果
利用scroll-view實(shí)現(xiàn)上下滾動(dòng)的效果
wxml代碼:
A B C
修改的wxss代碼：
.container1 { border:1px solid red; height:110px; /*使用scroll-view時(shí)設(shè)置固定的高度*/
實(shí)現(xiàn)效果：
swiper 和 swiper-item
輪播圖容器組件 和 輪播圖 item 組件
利用這兩個(gè)組件可以實(shí)現(xiàn)輪播圖效果：
wxml代碼:
A B C
wxss代碼：
.swiper-container{ height:150px; } .item{ height:100%; line-height: 150px; text-align: center; } swiper-item:nth-child(1) .item{ background-color: aquamarine; } swiper-item:nth-child(2) .item{ background-color: azure; } swiper-item:nth-child(3) .item{ background-color: darkorange; }
實(shí)現(xiàn)效果：
3.常用的基礎(chǔ)內(nèi)容組件
text
文本組件
類似于 HTML 中的 span 標(biāo)簽，是一個(gè)行內(nèi)元素
實(shí)現(xiàn)長(zhǎng)按選中文本內(nèi)容的效果
長(zhǎng)按可以選中文本內(nèi)容: HelloWorld!
rich-text
富文本組件支持把 HTML 字符串渲染為 WXML 結(jié)構(gòu)
把 HTML 字符串渲染為對(duì)應(yīng)的 UI 結(jié)構(gòu)
4.其他常用組件
button
按鈕組件
功能比 HTML 中的 button 按鈕豐富
通過(guò) open-type 屬性可以調(diào)用微信提供的各種功能（客服、轉(zhuǎn)發(fā)、獲取用戶授權(quán)、獲取用戶信息等）
image
圖片組件
image 組件默認(rèn)寬度約 300px、高度約 240px
navigator
頁(yè)面導(dǎo)航組件
類似于 HTML 中的 a 鏈接，實(shí)現(xiàn)頁(yè)面的跳轉(zhuǎn)
5.API
小程序中的 API 是由宿主環(huán)境提供的，通過(guò)這些豐富的小程序 API，開(kāi)發(fā)者可以方便的調(diào)用微信提供的能力，例如：實(shí)現(xiàn)支付，掃碼等功能。
小程序 API 的 3 大分類：
事件監(jiān)聽(tīng) API
-
特點(diǎn)：以 on 開(kāi)頭，用來(lái)監(jiān)聽(tīng)某些事件的觸發(fā)
-
舉例：wx.onWindowResize(function callback) 監(jiān)聽(tīng)窗口尺寸變化的事件
同步 API
-
特點(diǎn)1：以 Sync 結(jié)尾的 API 都是同步 API
-
特點(diǎn)2：同步 API 的執(zhí)行結(jié)果，可以通過(guò)函數(shù)返回值直接獲取，如果執(zhí)行出錯(cuò)會(huì)拋出異常
-
舉例：wx.setStorageSync('key', 'value') 向本地存儲(chǔ)中寫(xiě)入內(nèi)容
異步 API
-
特點(diǎn)：類似于 jQuery 中的 $.ajax(options) 函數(shù)，需要通過(guò) success、fail、complete 接收調(diào)用的結(jié)果
-
舉例：wx.request() 發(fā)起網(wǎng)絡(luò)數(shù)據(jù)請(qǐng)求，通過(guò) success 回調(diào)函數(shù)接收數(shù)據(jù)
【相關(guān)學(xué)習(xí)推薦：小程序?qū)W習(xí)教程】
