這篇文章為大家帶來了關於微信小程式的相關知識,其中主要介紹了關於宿主環境的相關問題,手機微信是小程式的宿主環境,小程式借助宿主環境提供的能力,可以實現許多普通網頁不能完成的功能,下面一起來看一下,希望對大家有幫助。
【相關學習推薦:小程式學習教學】
手機微信是小程式的宿主環境,小程式藉由宿主環境提供的能力,可以實現許多普通網頁無法完成的功能。例如:小程式呼叫微信提供的API實作掃碼,支付等功能。
小程式的宿主環境所包含的內容:
#通訊模型
執行機制
#元件
API
1.通訊的主體
小程式中通訊的主體是渲染層和邏輯層,其中:
WXML 範本和WXSS 樣式工作在渲染層
JS 腳本工作在邏輯層
2.小程式的通訊模型
小程式的通訊模型分為兩部分:
渲染層與邏輯層之間的通訊
邏輯層和第三方伺服器之間的通訊
兩者都透過微信客戶端進行轉送
1.小程式的啟動過程
把小程式的程式碼包下載到本機
解析app.json 全域設定檔
執行app.js 小程式入口文件,呼叫App() 建立小程式實例
#渲染小程式首頁
小程式啟動完成
2.頁面渲染的過程
#載入解析頁面的.json 設定檔
載入頁面的.wxml 範本和.wxss 樣式
執行頁面的.js 文件,呼叫Page() 建立頁面實例
頁面渲染完成
1.小程式中元件的分類:
#小程式中的元件也是由宿主環境提供的,開發者可以基於元件快速建立出漂亮的頁面結構。官方把小程式的元件分成了9 大類,分別是:
檢視容器
2. 常用的視圖容器類別元件
#view普通檢視區域#類似HTML 中的div,是一個區塊級元素常用來實現頁面的佈局效果例如:使用flex實作橫向佈局。<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
<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时设置固定的高度*/實作效果:
#swiper 和swiper-item
輪播圖容器元件和輪播圖item 元件利用這兩個元件可以實現輪播圖效果: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.常用的基礎內容元件
text
文字元件
###類似HTML 中的span 標籤,是行內元素######實作長按選取文字內容的效果###<view> 长按可以选中文本内容: <text user-select>HelloWorld!</text> </view>############rich-text######富文本元件支援把HTML 字串渲染為WXML 結構######把HTML 字串渲染為對應的UI 結構###
<rich-text nodes="<h1 style='color:red'>标题</h1>"> </rich-text>
4.其他常用组件
button
按钮组件
功能比 HTML 中的 button 按钮丰富
通过 open-type 属性可以调用微信提供的各种功能(客服、转发、获取用户授权、获取用户信息等)
image
图片组件
image 组件默认宽度约 300px、高度约 240px
navigator
页面导航组件
类似于 HTML 中的 a 链接,实现页面的跳转
5.API
小程序中的 API 是由宿主环境提供的,通过这些丰富的小程序 API,开发者可以方便的调用微信提供的能力,例如:实现支付,扫码等功能。
小程序 API 的 3 大分类:
事件监听 API
特点:以 on 开头,用来监听某些事件的触发
举例:wx.onWindowResize(function callback) 监听窗口尺寸变化的事件
同步 API
特点1:以 Sync 结尾的 API 都是同步 API
特点2:同步 API 的执行结果,可以通过函数返回值直接获取,如果执行出错会抛出异常
举例:wx.setStorageSync('key', 'value') 向本地存储中写入内容
异步 API
特点:类似于 jQuery 中的 $.ajax(options) 函数,需要通过 success、fail、complete 接收调用的结果
举例:wx.request() 发起网络数据请求,通过 success 回调函数接收数据
【相关学习推荐:小程序学习教程】
以上是微信小程式開發之宿主環境詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!