当前位置：首页 > news >正文

Vue3 与微信小程序模板语法全面对比学习笔记

news 2025/10/24 13:08:49

第一章：WXML 模板语法 vs Vue3 模板系统

🧠 背景理解

对比项	Vue3	微信小程序
模板语法	`v-` 指令体系	`wx:` 指令体系
数据绑定	响应式（`ref/reactive`）自动更新	通过 `this.setData()` 手动触发更新
模板引擎	编译成虚拟 DOM	渲染层与逻辑层分离，通过数据通信更新 UI
文件结构	`.vue` 单文件组件	`.wxml` + `.wxss` + `.js` + `.json` 四文件并行

✨ 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>

🔍 对比分析

对比点	Vue3	小程序
数据声明	`ref()` / `reactive()`	`data` 对象
更新方式	自动响应式	手动 `this.setData()`
模板插值语法	`{{ }}`	`{{ }}`（相同）

✅ 总结：插值语法几乎一致，但 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>

🔍 对比总结：

对比点	Vue3	小程序
绑定方式	`v-model`	`bindinput` + `this.setData()`
数据更新	自动	手动
值获取方式	直接变量	`e.detail.value`

第二章：WXSS 样式 vs Vue3 组件样式

📘 相同点

都支持标准 CSS；
都可以使用类选择器、ID 选择器；
支持 @import 导入样式。

💡 小程序特有：`rpx` 自适应单位

小程序自动将 750rpx 等比例映射为设备宽度；
Vue3 中常用 vw/vh/rem 实现响应式。

📘 小程序样式层级

app.wxss → 全局；
每页 .wxss → 局部；
局部优先级更高。

💡 Vue3 中的类比

App.vue 中 <style> → 全局；
<style scoped> → 局部；
同样遵循就近覆盖原则。

第三章：全局配置 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 局部控制

对比项	小程序	Vue3
局部配置方式	每页一个 `.json` 文件	每组件独立控制逻辑
配置内容	导航栏标题、背景色等	props、meta、自定义钩子等
优先级	页面配置 > 全局配置	局部 > 全局默认值

第五章：网络数据请求

📘 小程序写法

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；
小程序无跨域问题（运行于微信环境）。

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

实现思路：

设置 tabBar；
创建首页；
使用 wx.request() 请求接口；
渲染轮播图 + 九宫格布局。

接口：

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

第七章：Vue3 与微信小程序思维总结表

特性	Vue3	小程序
模板语法	`v-` 系列	`wx:` 系列
数据绑定	响应式 ref/reactive	手动 setData
事件绑定	`@click`	`bindtap`
条件渲染	`v-if/v-show`	`wx:if/hidden`
列表渲染	`v-for`	`wx:for`
双向绑定	`v-model`	`bindinput`
生命周期	`onMounted` 等	`onLoad/onShow`
全局样式	`<style>`	`app.wxss`
局部样式	`<style scoped>`	页面 wxss
网络请求	fetch/axios	wx.request

🚀 总结建议

如果你熟悉 Vue3，小程序学习重点在：
- 理解 setData 的非响应式机制；
- 掌握配置文件（app.json / page.json）；
- 学会通过 data- 传参事件；*
- 熟悉生命周期（onLoad、onShow、onReady）。
小程序逻辑更接近传统前端，而 Vue3 属于“框架化开发”；
- Vue → 自动化 & 组件化；
- 小程序 → 结构分离 & 手动更新。