1.1. 小程式頁面的組成部分
1、小程式代碼構成 .json .wxml .wxss .js
組成部分
.json 后綴的 JSON 組態檔 // 組態檔 分為app.json 全域配置 區域組態檔比全域組態檔優先級要高
.wxml 后綴的 WXML 模板檔案
.wxss 后綴的 WXSS 樣式檔案
.js 后綴的 JS 腳本邏輯檔案
2、小程式配置 app.json
app.json 是當前小程式的全域配置，包括了小程式的所有頁面路徑、界面表現、網路超時時間、底部 tab 等
組態檔
{
"pages":[
"pages/index/index", //所有小程式的頁面，都存放在 pages 目錄中，以單獨的檔案夾存在
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",// 加載時候出現的三個小圓點 可以是light 和 dark
"navigationBarBackgroundColor": "#fff", // 導航欄背景顏色
"navigationBarTitleText": "Weixin", //導航欄標題文字內容
"navigationBarTextStyle":"black" //導航欄標題顏色，僅支持 black / white
}
}
1.2. 小程式的運行環境和通信機制
1.2.1、檔案：微信客戶端
1.2.2、概念
宿主環境（host environment）指的是程式運行所必須的依賴環境，例如：
Android系統和 iOS 系統是兩個不同的宿主環境，安卓版的微信 App 是不能在 iOS 環境下運行
的，所以，
Android 是安卓軟體的宿主環境，脫離了宿主環境的軟體是沒有任何意義的！
小程式借助宿主環境提供的能力，可以完成許多普通網頁無法完成的功能，例如：
微信掃碼、微信支付、微信登錄、地理定位、 etc …
小程式的宿主環境包含以下幾部分內容
① 通信模型
② 運行機制
③ 組件
④ API
1.2.3、通信模型 : 檔案
小程式中通信的主體是渲染層和邏輯層，其中：
① WXML 模板和 WXSS 樣式作業在渲染層
② JS 腳本作業在邏輯層
而所謂的通信模型指的是: ① 渲染層和邏輯層之間的通信
② 邏輯層和第三方服務器之間的通信
這兩部分的通信都是通過微信客戶端進行轉發
運行機制
小程式的運行機制主要講兩部分
① 小程式啟動的程序
把小程式的代碼包下載到本地
決議 app.json 全域組態檔
執行 app.js 小程式入口檔案，呼叫 App() 創建小程式實體
渲染小程式首頁
小程式啟動完成
② 某個頁面渲染的程序
加載決議頁面的 .json 組態檔
加載頁面的 .wxml 模板和 .wxss 樣式
執行頁面的 .js 檔案，呼叫 Page() 創建頁面實體
頁面渲染完成
1.3、常見組件
view div
text、 span
rich-text 富文本
scroll-view 滾動的組件
Swiper、輪播圖
button、按鈕組件
image…相當于 img =>也是個組件
1、Text and rich-text ：富文本
<view>
<!-- selectable is deprecated, use user-select instead -->
<text selectable>hello world</text>
<rich-text nodes="<h1 class='my-h1' style='color: red;'>Hello World</h1>"></rich-text>
</view>
2、Swiper 常見屬性 ：輪播圖
indicator-dots：是否顯示面板指示點
indicator-color：指示點顏色
indicator-active-color：激活指示點顏色
autoplay：是否自動切換
interval：自動切換時間間隔
circular：是否采用銜接滑動
3、Button ：按鈕組件
可以通過 open-type 屬性可以呼叫微信提供的各種功能（客服、轉發、獲取用戶授權、獲取用戶資訊等）
<button open-type="share">分享</button>
4、 image ： 圖片組件
scaleToFill：默認，不保持比例，使圖片填滿 image 元素
aspectFit：保持比例，使圖片長邊完全展示，image 區域可能有空白
aspectFill：保持比例，圖片完全填充 image，可能發生截取
1.4 常見 API
1.4.1 事件監聽類
特點：以 on 開頭，用來監聽某些事件的觸發
舉例：wx.onWindowResize(function callback) 監聽視窗尺寸變化的事件
1.4.2 同步 API
特點 1：以 Sync 結尾的 API 都是同步 API
特點 2：同步 API 的執行結果，可以通過函式回傳值直接獲取，如果執行出錯會拋出例外
舉例：wx.setStorageSync('key', 'value') 向本地存盤中寫入內容
1.4.3 異步 API
檔案
特點：類似于 jQuery 中的 $.ajax(options) 函式，需要通過 success、fail、complete 接收呼叫的結果
舉例：wx.request() 發起網路資料請求，通過 success 回呼函式接收資料
1.5 協同作業
檔案
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/274888.html
標籤：其他
上一篇：SWITCH TRANSFORMERS: SCALING TO TRILLION PARAMETER MODELS WITH SIMPLE AND EFFICIENT SPARSITY
下一篇：js異步執行與同步執行的決議