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

【相關(guān)學(xué)習(xí)推薦：小程式學(xué)習(xí)教學(xué)】

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

手機微信是小程式的宿主環(huán)境，小程式藉由宿主環(huán)境提供的能力，可以實現(xiàn)許多普通網(wǎng)頁無法完成的功能。例如：小程式呼叫微信提供的API實作掃碼，支付等功能。

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

#通訊模型

執(zhí)行機制

#元件

API

通訊模型

1.通訊的主體

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

WXML 範(fàn)本和WXSS 樣式工作在渲染層

JS 腳本工作在邏輯層

2.小程式的通訊模型

小程式的通訊模型分為兩部分：

渲染層與邏輯層之間的通訊

邏輯層和第三方伺服器之間的通訊

兩者都透過微信客戶端進行轉(zhuǎn)送

運作機制

1.小程式的啟動過程

把小程式的程式碼包下載到本機

解析app.json 全域設(shè)定檔

執(zhí)行app.js 小程式入口文件，呼叫App() 建立小程式實例

#渲染小程式首頁

小程式啟動完成

2.頁面渲染的過程

#載入解析頁面的.json 設(shè)定檔

載入頁面的.wxml 範(fàn)本和.wxss 樣式

執(zhí)行頁面的.js 文件，呼叫Page() 建立頁面實例

頁面渲染完成

元件

1.小程式中元件的分類：

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

• 檢視容器

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

• 表單元件

• 導(dǎo)航元件

• #程式元件

• map 地圖元件

• canvas 畫布元件

• 開能力

• 無障礙存取

2. 常用的視圖容器類別元件

#view

普通檢視區(qū)域

#類似HTML 中的div，是一個區(qū)塊級元素

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

例如：使用flex實作橫向佈局。

wxml程式碼:

<view class="container1">
<view>A</view>
<view>B</view>
<view>C</view>
</view>

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;
}

實作效果：

##scroll-view

可捲動的視圖區(qū)域
常用來實作捲動清單效果

• ##利用scroll- view實作上下捲動的效果

wxml程式碼:

<scroll-view class="container1" scroll-y>
<view>A</view>
<view>B</view>
<view>C</view>
</scroll-view>

已修改的wxss程式碼：

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

實作效果：

#swiper 和swiper-item

輪播圖容器元件和輪播圖item 元件利用這兩個元件可以實現(xiàn)輪播圖效果：wxml程式碼:

<swiper class="swiper-container" indicator-dots="true" indicator-color="white" indicator-active-color="red" autoplay="true" interval="1000" circular>
<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) .item{
  background-color: aquamarine;
}
swiper-item:nth-child(2) .item{
  background-color: azure;
}
swiper-item:nth-child(3) .item{
  background-color: darkorange;
}

實作效果：

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

text

文字元件

###類似HTML 中的span 標(biāo)籤，是行內(nèi)元素######實作長按選取文字內(nèi)容的效果###

<view>
長按可以選中文本內(nèi)容:
<text user-select>HelloWorld!</text>
</view>

############rich-text######富文本元件支援把HTML 字串渲染為WXML 結(jié)構(gòu)######把HTML 字串渲染為對應(yīng)的UI 結(jié)構(gòu)###

<rich-text nodes="<h1 style=&#39;color:red&#39;>標(biāo)題</h1>"> </rich-text>

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í)教程】

以上是微信小程式開發(fā)之宿主環(huán)境詳解的詳細內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！