之前小專案的資料集還在收集製作中，有點麻煩，到最後準備順便做出一個小玩具（小程式的形式）。不過使用現成的小程式模板改起來有點複雜，而且很多語法和網頁開發所使用的不太一樣，因此一邊學一邊整理一下WXML+wxss的內容。。

簡介

1. 與普通網頁開發的區別

   • 執行環境不同
   • API不同（可以呼叫微信提供的各種API）
   • 開發模式不同（使用微信開發者工具）

2. 宿主環境——手機微信

   • 通訊模型：渲染層與邏輯層、邏輯層與通訊伺服器
   • 執行機制
     • 啟動：將程式碼包下載到本地\(\longrightarrow\)解析app.json全域性配置檔案\(\longrightarrow\)執行app.js入口檔案（呼叫App()建立小程式例項）\(\longrightarrow\)
       渲染小程式首頁，啟動完成
     • 頁面渲染：載入.json\(\longrightarrow\)載入.wxml模板和.wxss樣式\(\longrightarrow\)執行.js，呼叫Page()建立頁面例項，渲染完成
   • 元件
   • API：事件監聽API（on開頭監聽事件觸發）、同步API（Sync結尾）、非同步API（通過回撥函式接收結果）

3. WXML與HTML的區別

   • 標籤名稱不同——WXML常用的標籤名有：view（類似div）、text（類似span）、image（類似img）、navigator（類似a）

   • 屬性節點不同

     • <a href="#">HTML連結</a>
        
       

     • <navigator url="">WXML連結</navigator>
       

   • 提供了類似於Vue中的模板語法：資料繫結、列表渲染、條件渲染

4. WXSS與CSS的區別

   • 新增了rpx尺寸單位
   • 提供了全域性的樣式（app.wxss)和區域性樣式(<pagename>.wxss)
   • WXSS不支援某些CSS選擇器

5. 協同工作：管理員、專案成員（運營者、開發者、資料分析者）、體驗成員

6. 軟體版本：開發版本\(\rightarrow\)體驗版本\(\rightarrow\)稽核中的版本\(\rightarrow\)線上版本

專案結構

• pages資料夾：存放所有小程式的頁面
  • .js檔案：頁面的入口（指令碼）檔案，通過呼叫Page()函式來建立並執行頁面
  • .json檔案：當前頁面的配置檔案（會覆蓋全域性配置）
  • .wxml檔案：當前頁面模板結構檔案
  • .wxss檔案：當前頁面的樣式表文件
• utils資料夾：存放工具性質得模組
• app.js：專案入口檔案，通過呼叫App()函式來啟動整個小程式
• app.json：專案全域性配置檔案
  • pages：小程式所有頁面的路徑
  • window：全域性定義小程式所有頁面得到背景色、文字顏色等
  • style：全域性定義小程式元件所使用的樣式版本
  • sitemapLocation：指明sitemap.json的位置
• app.wxss：專案全域性樣式檔案
• project.config.json：專案配置檔案，記錄對開發工具所做的個性化配置
• sitemap.json：配置小程式及其頁面是否允許被微信索引（爬取）

操作技巧

1. 預覽方式：可以通過模擬器預覽，也可以微信掃碼在真機上預覽。

2. 頁面配置：建立頁面直接在app.json中的pages列表中新增即可；pages列表的第一個元素會被渲染為專案首頁。

元件

1. 檢視容器類：

• view：普通檢視區域
• scroll-view：可滾動檢視區域
• swiper和swiper-item：輪播圖容器元件和輪播圖item元件

<!--pages/list/list.wxml-->
<swiper class="swiper-container" indicator-dots autoplay interval="3000" 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>
<text>\n</text>
<view class="container1">
    <view>圖片檢測</view>
    <view>視訊檢測</view>
</view>
<text>\n</text>
<scroll-view class="container2" scroll-y>
    <view>A</view>
    <view>B</view>
    <view>C</view>
    <view>D</view>
</scroll-view>

/* pages/list/list.wxss */

.swiper-container{
    height: 150px;
}
.item{
    line-height: 150px;
    height: 100px;
    text-align: center;
}
.swiper-container swiper-item:nth-child(1){
    background-color: aqua;
}
.swiper-container swiper-item:nth-child(2){
    background-color:lime;
}
.swiper-container swiper-item:nth-child(3){
    background-color:mediumpurple;
}

.container1 view{
    width:175px;
    height: 100px;
    text-align: center;
    line-height: 100px;
}
.container1 view:nth-child(1){
    background-color: aqua;
}
.container1 view:nth-child(2){
    background-color: lightpink;
}
.container1 view:nth-child(3){
    background-color:darkturquoise;
}
.container1{
    height: 100px;
    display:flex;
    justify-content:space-around;
}

.container2 view{
    width:150px;
    height: 85px;
    text-align: center;
    line-height: 100px;
}
.container2 view:nth-child(1){
    background-color: aqua;
}
.container2 view:nth-child(2){
    background-color: lightpink;
}
.container2 view:nth-child(3){
    background-color:darkturquoise;
}
.container2 view:nth-child(4){
    background-color: rgb(238, 71, 71);
}
.container2{
    border: 1px solid rgb(0, 0, 0);
    width: 150px;
    height: 200px;
}

2. 文字元件

• text：文字元件

  <text user-select>1051434511</text>
  

• rich-text：富文字元件

  <rich-text nodes="<h1 style='color: red;'>Title</h1>"></rich-text>
  

3. 按鈕元件（button）

<button type="primary" size="mini" plain>主色調迷你鏤空按鈕</button>

4. 圖片元件（image）

<image src="/images/bs.jpg" mode="aspectFit"></image>

5. 導航欄（navigation-bar）