本篇文章給大家?guī)砹岁P(guān)于微信小程序的相關(guān)知識，其中主要介紹了關(guān)于宿主環(huán)境的相關(guān)問題，手機(jī)微信是小程序的宿主環(huán)境，小程序借助宿主環(huán)境提供的能力，可以實現(xiàn)許多普通網(wǎng)頁不能完成的功能，下面一起來看一下，希望對大家有幫助。

程序員必備接口測試調(diào)試工具：立即使用
Apipost = Postman + Swagger + Mock + Jmeter
Api設(shè)計、調(diào)試、文檔、自動化測試工具
后端、前端、測試，同時在線協(xié)作，內(nèi)容實時同步

【相關(guān)學(xué)習(xí)推薦：小程序?qū)W習(xí)教程】

小程序的宿主環(huán)境

手機(jī)微信是小程序的宿主環(huán)境，小程序借助宿主環(huán)境提供的能力，可以實現(xiàn)許多普通網(wǎng)頁不能完成的功能。例如：小程序調(diào)用微信提供的API實現(xiàn)掃碼，支付等功能。

小程序的宿主環(huán)境包含的內(nèi)容：

通信模型

運行機(jī)制

組件

API

通信模型

1.通信的主體

小程序中通信的主體是渲染層和邏輯層，其中：

WXML 模板和 WXSS 樣式工作在渲染層

JS 腳本工作在邏輯層

2.小程序的通信模型

小程序的通信模型分為兩部分：

渲染層和邏輯層之間的通信

邏輯層和第三方服務(wù)器之間的通信

兩者都通過微信客戶端進(jìn)行轉(zhuǎn)發(fā)

運行機(jī)制

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.小程序中組件的分類：

小程序中的組件也是由宿主環(huán)境提供的，開發(fā)者可以基于組件快速搭建出漂亮的頁面結(jié)構(gòu)。官方把小程序的組件分為了 9 大類，分別是：

• 視圖容器

• 基礎(chǔ)內(nèi)容

• 表單組件

• 導(dǎo)航組件

• 體組件

• map 地圖組件

• canvas 畫布組件

• 開放能力

• 無障礙訪問

2. 常用的視圖容器類組件

view

普通視圖區(qū)域

類似于 HTML 中的 div，是一個塊級元素

常用來實現(xiàn)頁面的布局效果

例如：使用flex實現(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; }

實現(xiàn)效果：

scroll-view

• 可滾動的視圖區(qū)域

• 常用來實現(xiàn)滾動列表效果

利用scroll-view實現(xiàn)上下滾動的效果

wxml代碼:

 A B C 

修改的wxss代碼：

.container1 {   border:1px solid red;   height:110px;   /*使用scroll-view時設(shè)置固定的高度*/

實現(xiàn)效果：

swiper 和 swiper-item

輪播圖容器組件 和 輪播圖 item 組件

利用這兩個組件可以實現(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; }

實現(xiàn)效果：

3.常用的基礎(chǔ)內(nèi)容組件

text

文本組件

類似于 HTML 中的 span 標(biāo)簽，是一個行內(nèi)元素

實現(xiàn)長按選中文本內(nèi)容的效果

 長按可以選中文本內(nèi)容: HelloWorld! 

rich-text

富文本組件支持把 HTML 字符串渲染為 WXML 結(jié)構(gòu)

把 HTML 字符串渲染為對應(yīng)的 UI 結(jié)構(gòu)

4.其他常用組件

button

按鈕組件

功能比 HTML 中的 button 按鈕豐富

通過 open-type 屬性可以調(diào)用微信提供的各種功能（客服、轉(zhuǎn)發(fā)、獲取用戶授權(quán)、獲取用戶信息等）

image

圖片組件

image 組件默認(rèn)寬度約 300px、高度約 240px

navigator

頁面導(dǎo)航組件

類似于 HTML 中的 a 鏈接，實現(xiàn)頁面的跳轉(zhuǎn)

5.API

小程序中的 API 是由宿主環(huán)境提供的，通過這些豐富的小程序 API，開發(fā)者可以方便的調(diào)用微信提供的能力，例如：實現(xiàn)支付，掃碼等功能。

小程序 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(options) 函數(shù)，需要通過 success、fail、complete 接收調(diào)用的結(jié)果

• 舉例：wx.request() 發(fā)起網(wǎng)絡(luò)數(shù)據(jù)請求，通過 success 回調(diào)函數(shù)接收數(shù)據(jù)

【相關(guān)學(xué)習(xí)推薦：小程序?qū)W習(xí)教程】