宿主環境：程序運行必須依賴的環境

小程序的宿主環境 ---->手機微信(定位、掃碼、支付等)

小程序的通信模型：

• ?渲染層和邏輯層之間的通信(微信客戶端轉發)
• 邏輯層和第三方服務器之間的通信(微信客戶端轉發)

小程序的運行機制：

? ?啟動：

1. 下載代碼包
2. 解析app.json全局配置文件
3. 執行app.js入口文件
4. 渲染頁面
5. 啟動完成

? ?渲染：

1. 加載 .json配置文件
2. 加載 .xml模板 .wxss樣式
3. 執行.js文件,調用page創建頁面實例
4. 渲染完成

小程序的組件

? ? ? ? 視圖容器、基礎內容、表單組件、導航組件、媒體組件、map地圖組件、canvas畫布組件、開放能力、無障礙訪問

視圖容器:?

?????????view(布局)，scroll-view(滾動)，swiper和swiper-item(輪播圖)

?實現頁面的橫向布局

1.編寫頁面

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

?2.編寫樣式

.a view{width: 100px;height: 100px;text-align: center;line-height: 100px;
}
.a view:nth-child(1){background-color: lightblue;
}
.a view:nth-child(2){background-color: orangered;
}
.a view:nth-child(3){background-color: indigo;
}
.a {display: flex;justify-content: space-between;
}

?3.查看效果

?

實現頁面的滾動效果：scroll-view

1.在上面橫向布局的基礎上實現

<scroll-view class="a" scroll-y="true" scroll-x="true">
<view>A</view>
<view>B</view>
<view>C</view>
</scroll-view>

.a {border: 1px solid red;height: 200px;width: 50px;display: flex;justify-content: space-between;
}

2.布局可以進行滾動，需要給我給定固定的寬度和高度?

實現頁面的輪播圖效果：swiper和swiper-item

1.編寫頁面

<!-- 輪播圖 -->
<swiper class="s">
<!-- 一 -->
<swiper-item>
<view class="item">第一個頁面</view>
</swiper-item> 
<!-- 二 -->
<swiper-item>
<view class="item">第二個頁面</view>
</swiper-item> 
<!-- 三 -->
<swiper-item>
<view class="item">第三個頁面</view>
</swiper-item> </swiper>

2.編寫樣式

.s{height: 150px;
}
.item{width: 100%;line-height: 150px;text-align: center;
}
swiper-item:nth-child(1){background-color: lawngreen;
}
swiper-item:nth-child(2){background-color: rosybrown;
}
swiper-item:nth-child(3){background-color: aqua;
}

3.查看效果

?

?4.輪播圖的常用屬性

????????indicator-dots="true"? ?????????????????顯示面板指示點

????????indicator-color="white"? ? ? ????????? 指示點顏色

????????indicator-active-color="yellow"? ? ?當前選中指示點顏色

????????autoplay? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 自動切換

????????interval="3000? ? ? ? ? ? ? ? ? ? ? ? ? ? 切換的時間間隔，毫秒

????????"?circular="true"? ? ? ? ? ? ? ? ? ? ? ? ? 采用鏈接滑動