目錄

1. WXML 模板語法 vs Vue3 模板系統
2. WXSS 樣式 vs Vue3 組件樣式
3. 全局配置 app.json vs Vue 應用結構
4. 頁面配置 page.json vs Vue 局部控制
5. 網絡數據請求對比：wx.request vs axios
6. 案例：本地生活首頁
7. Vue3 + 小程序思維對照總結

第一章：WXML 模板語法 vs Vue3 模板系統

🧠 背景理解

✨ 1. 數據綁定（Mustache 語法）

📘 小程序寫法

在頁面的 .js 文件中定義數據：

Page({ data: { msg: 'Hello 小程序！' } })

在 .wxml 模板中使用數據：

<view>{{ msg }}</view>

💡 Vue3 寫法

<script setup> 
import { ref } from 'vue' const msg = ref('Hello Vue3!') 
</script> 
<template> 
<div>{{ msg }}</div>
</template>

🔍 對比分析

✅ 總結：插值語法幾乎一致，但 Vue 自動追蹤依賴，小程序必須顯式調用 this.setData()。

✨ 2. 動態綁定屬性

📘 小程序寫法

<image src="{{imgUrl}}"></image>

💡 Vue3 寫法

<img :src="imgUrl" />

⚠️ 區別：

• 小程序使用 {{ }} 包裹；
• Vue3 使用 : 前綴（v-bind 的語法糖）。

✨ 3. 條件渲染

📘 小程序寫法

<view wx:if="{{isLogin}}">歡迎回來</view> <view wx:else>請登錄</view>

💡 Vue3 寫法

<div v-if="isLogin">歡迎回來</div> <div v-else>請登錄</div>

✅ 對比總結：

• wx:if ≈ v-if
• wx:elif ≈ v-else-if
• hidden="{{true}}" ≈ v-show="false"（兩者都僅切換顯示狀態）

✨ 4. 列表渲染

📘 小程序寫法

<view wx:for="{{list}}" wx:key="id"> {{index}} - {{item.name}} </view>

💡 Vue3 寫法

<div v-for="(item, index) in list" :key="item.id"> 
{{ index }} - {{ item.name }} 
</div>

⚠️ 不同點：

• 小程序的 wx:for 使用 Mustache 語法；
• Vue 的 v-for 是 JS 表達式，可直接在模板中寫邏輯；
• Vue 支持嵌套 v-for，小程序也支持但不推薦複雜邏輯。

✨ 5. 事件綁定

📘 小程序寫法

<button bindtap="sayHello">點擊我</button>


Page({ data: {}, sayHello(e) { console.log('點擊事件觸發') } })

💡 Vue3 寫法

<button @click="sayHello">
點擊我
</button> 
<script setup> 
function sayHello() { console.log('點擊事件觸發') } 
</script>

✅ 結論：

• bindtap ≈ @click
• 小程序沒有事件修飾符（如 @click.stop），需要手動控制冒泡。

✨ 6. 事件傳參

📘 小程序寫法

不能直接這樣寫：

<button bindtap="sayHello(123)">錯誤示例</button>

正確寫法：

<button bindtap="sayHello" data-id="123">點擊</button>


sayHello(e) { console.log(e.target.dataset.id) }

💡 Vue3 寫法

<button @click="sayHello(123)">點擊</button> 
<script setup> function sayHello(id) { console.log(id) } </script>

⚠️ 對比：

• 小程序使用 data-* 自定義屬性傳參；
• Vue3 可直接傳參；
• 小程序事件對象必須通過 dataset 取值。

✨ 7. 雙向綁定（input）

📘 小程序寫法

<input bindinput="onInput" value="{{username}}" /> 
<view>{{username}}</view>

Page({ 
data: { username: '' }, 
onInput(e) { 
    this.setData({ username: e.detail.value }) 
    } 
})

💡 Vue3 寫法

<input v-model="username" /> 
<p>{{ username }}</p> 

<script setup> 
import { ref } from 'vue' const username = ref('')
</script>

🔍 對比總結：

第二章：WXSS 樣式 vs Vue3 組件樣式

📘 相同點

• 都支持標準 CSS；
• 都可以使用類選擇器、ID 選擇器；
• 支持 @import 導入樣式。

💡 小程序特有：rpx 自適應單位

• 小程序自動將 750rpx 等比例映射為設備寬度；
• Vue3 中常用 vw/vh/rem 實現響應式。

📘 小程序樣式層級

• app.wxss → 全局；
• 每頁 .wxss → 局部；
• 局部優先級更高。

💡 Vue3 中的類比

• App.vue 中 <style> → 全局；
• <style scoped> → 局部；
• 同樣遵循就近覆蓋原則。

<a id="global"></a>

第三章：全局配置 app.json vs Vue 應用結構

📘 小程序結構

{ 
"pages": ["pages/home/home", "pages/contact/contact"], 
"window": { "navigationBarTitleText": "黑馬程序員" }, 
"tabBar": { "list": [ {"pagePath": "pages/home/home", "text": "首頁"}, 
{"pagePath": "pages/contact/contact", "text": "聯繫我們"} ] } 
}

💡 Vue3 對應概念

• main.js 註冊全局應用；
• router/index.js 配置頁面路由；
• App.vue 定義全局 UI 框架（如導航欄）。

✅ 小程序的 pages 數組 ≈ Vue Router 的 routes。

第四章：頁面配置 page.json vs Vue 局部控制

<a id="request"></a>

第五章：網絡數據請求

📘 小程序寫法

wx.request({ 
url: 'https://www.escook.cn/slides', 
method: 'GET', 
success(res) { console.log(res.data) } 
})

⚠️ 注意：

• 只能請求 HTTPS；
• 域名需備案並加入信任列表；
• 可臨時跳過校驗（開發模式）。

💡 Vue3 寫法（axios）

import axios from 'axios' 
axios.get('https://www.escook.cn/slides') .then(res => console.log(res.data))

🧩 Vue3 支持跨域，但需後端允許 CORS；
小程序無跨域問題（運行於微信環境）。

第六章：案例：本地生活首頁

實現思路：

1. 設置 tabBar；
2. 創建首頁；
3. 使用 wx.request() 請求接口；
4. 渲染輪播圖 + 九宮格佈局。

接口：

GET https://www.escook.cn/slides GET https://www.escook.cn/categories

第七章：Vue3 與微信小程序 思維總結表

🚀 總結建議

• 如果你熟悉 Vue3，小程序學習重點在：

• 理解 setData 的非響應式機制；
• 掌握配置文件（app.json / page.json）；
• 學會通過 data- 傳參事件；*
• 熟悉生命週期（onLoad、onShow、onReady）。

• 小程序邏輯更接近傳統前端，而 Vue3 屬於“框架化開發”；

• Vue → 自動化 & 組件化；
• 小程序 → 結構分離 & 手動更新。