前言

最近用 uni-app 寫了一個項目，本地用 H5 模式開發(fā)和調(diào)試時一切正常，頁面、交互、數(shù)據(jù)更新都沒有問題。 但當(dāng)代碼部署到 微信小程序 后，卻陸續(xù)出現(xiàn)了一些詭異的問題： 有的邏輯在 H5 能跑，小程序卻完全不生效；有的組件在 H5 表現(xiàn)正常，小程序卻怎么調(diào)都不對。

一開始我以為是自己代碼寫得有問題，直到踩坑越來越多才發(fā)現(xiàn)—— H5 和微信小程序的差異，遠(yuǎn)比我最初想象的要大得多。

所以想寫篇博客記錄一下開發(fā)中遇到的坑以及是如何解決的

同一套 uni-app / Vue 代碼，H5 跑得好好的，到了微信小程序卻各種翻車。

v-show 不生效、table 里 ref 調(diào)不到、輸入框值怎么都回不去……

這些問題并不是偶發(fā) bug，而是微信小程序底層架構(gòu)與瀏覽器完全不同導(dǎo)致的必然結(jié)果。

本文從實際場景出發(fā)，把我在實際開發(fā)中高頻踩到的坑系統(tǒng)整理一遍，樹立一下小程序思維。

一、核心結(jié)論先行

一句話總結(jié)微信小程序的本質(zhì)：

微信小程序 = 雙線程 + setData + 自定義組件

而 H5 是：

瀏覽器 + DOM + 同步更新

你在開發(fā)中遇到的 80% 問題，都可以回到這條差異上來解釋。

二、什么是「雙線程模型」？

1. H5（瀏覽器）的運行方式

在瀏覽器中：

• JS 可以直接操作 DOM
• 數(shù)據(jù)變化 → 視圖幾乎同步更新
• v-model、input.value 都是“最終裁判”

可以理解為：

JS 線程
  ↓
DOM
  ↓
頁面立刻變化

這是一個單一運行環(huán)境。

2. 微信小程序的運行方式

微信小程序為了安全性和可控性，徹底禁用了 DOM，改成了雙線程架構(gòu)：

┌──────────────┐
│  邏輯層 JS   │  ← 你的 Vue / JS 代碼
└───────▲──────┘
        │ setData(JSON)
┌───────▼──────┐
│  視圖層 WXML │  ← 渲染、組件內(nèi)部狀態(tài)
└──────────────┘

特點：

• 邏輯層和視圖層完全隔離
• 只能通過 setData 傳 JSON 數(shù)據(jù)
• 所有 UI 更新都是異步的

JS 不能直接改 UI，只能“請求”視圖層更新。

三、為什么「H5 能跑，小程序翻車」？

下面這些你踩過的坑，其實都源于同一個原因。

四、v-show 在 th / td 不生效

1. H5 中的認(rèn)知

<td v-show="show">庫存</td>

在瀏覽器里：

• 本質(zhì)是 display: none
• DOM 仍然存在
• table 布局可以正確處理

2. 小程序中為什么不行？

原因有兩個：

1. 小程序沒有真實的 table DOM

   • table / tr / td 只是被編譯成普通 view
   • 表格布局是 uni-ui 模擬的

2. 表格結(jié)構(gòu)在視圖層一次性計算

   • v-show 只改邏輯層狀態(tài)
   • 列寬、行結(jié)構(gòu)不會重新計算

結(jié)果就是：

數(shù)據(jù)變了，但表格結(jié)構(gòu)不重算

正確做法

<th v-if="showCol">庫存</th>
<td v-if="showCol">{{ row.stock }}</td>

在 table 結(jié)構(gòu)里：只用 v-if，不要用 v-show。

五、table 點擊事件里調(diào)用 ref 不生效

1. 常見寫法

openPopup() {
  this.$refs.popupRef.open()
}

H5：大多能跑

小程序：經(jīng)常無效

2. 真正原因

在小程序中，事件鏈路是：

點擊 td（視圖層）
↓
事件傳到邏輯層
↓
你同步調(diào)用 ref
↓
popup 組件：
  - 可能還沒渲染
  - 可能被 v-show 隱藏

ref 在小程序中是異步可用的。

正確用法

openPopup() {
  this.$nextTick(() => {
    this.$refs.popupRef?.open()
  })
}

并且：

• popup 盡量用 v-if
• 不要指望 ref 在同一個 tick 里可用

其實$refs + $nextTick在微信小程序依然不生效的真實原因

很多人在 H5 中已經(jīng)形成了一個條件反射式寫法：

openPopup() {
  this.$nextTick(() => {
    this.$refs.popupRef?.open()
  })
}

在 H5 / WebView 下，這種寫法基本 100% 生效； 但在 微信小程序（包括 uni-app）中，這段代碼依然可能完全不生效。

為什么有時候$nextTick + ref在小程序里也不可靠？

核心原因只有一句話：

$nextTick 只能保證 Vue 虛擬 DOM 更新完成，不能保證小程序組件實例已經(jīng) ready。

在微信小程序中：

• 組件是 自定義組件（不是 DOM）
• 渲染發(fā)生在 渲染層線程
• 父組件邏輯運行在 邏輯層線程
• 組件實例的創(chuàng)建、掛載、通信，都需要經(jīng)過 setData 的異步橋接

因此會出現(xiàn)以下真實現(xiàn)象：

小程序中最穩(wěn)定、推薦的做法：狀態(tài)驅(qū)動 + emit 回傳

不要用父組件主動“命令式”調(diào)用子組件方法，而是：

?? 用狀態(tài)控制子組件，用事件通知父組件

父組件

<Popup
  :visible="popupVisible"
  @close="popupVisible = false"
/>

data() {
  return { popupVisible: false }
},
methods: {
  openPopup() {
    this.popupVisible = true
  }
}

子組件

props: { visible: Boolean },
watch: {
  visible(val) {
    val ? this.open() : this.close()
  }
},
methods: {
  close() {
    this.$emit('close')
  }
}

一句話總結(jié)

• H5：可以命令式（ref / 調(diào)方法）
• 小程序：必須聲明式（狀態(tài)驅(qū)動） v-show 在 th / td 不生效

六、輸入框值更新失?。╱ni-easyinput）

1. 現(xiàn)象

• H5：校驗后值能回退
• 小程序：輸入框仍顯示非法值

2. 根因

在小程序中：

組件內(nèi)部 value（視圖層）
≠
v-model 綁定值（邏輯層）

如果組件不是“完全受控”：

• 視圖層內(nèi)部狀態(tài)優(yōu)先
• 你 setData 只是建議

正確組合

<uni-easyinput
  v-model="row.qty"
  :controlled="true"
  @change="checkQty"
/>

關(guān)鍵點：

• 使用 change 而不是 input
• 開啟 controlled

七、input / change / blur 的正確選擇

業(yè)務(wù)校驗一律優(yōu)先用 change。

八、ref、v-for、響應(yīng)式的隱藏雷區(qū)

1. ref + v-for

• H5：ref 數(shù)組
• 小程序：可能只有最后一個

?? 不要依賴 ref 操作列表項

2. 深層對象更新

list[index].count = 1

在小程序中不穩(wěn)定，推薦：

this.list = this.list.map(item =>
  item.id === row.id ? { ...item, count: 1 } : item
)
//或者
const index=this.list.findIndex(item.id===row.id)
this.$set(this.list[index], 'count', 1)

不可變更新在小程序更安全。

九、統(tǒng)一解釋模型（記住這個）

你遇到的所有問題，其實都是：

邏輯層變了，但視圖層沒有按你預(yù)期同步

對應(yīng)關(guān)系：

十、小程序開發(fā)「安全原則」

1. 少用 input，多用 change
2. 表格、彈窗優(yōu)先 v-if
3. ref 一律 nextTick
4. 組件要么全受控，要么不受控
5. 減少 setData 次數(shù)

十一、一句話總結(jié)

H5 是“我命令頁面怎么變” 小程序是“我請求頁面幫我變”

當(dāng)你真正接受這一點，80% 的坑都會自動消失。

到此這篇關(guān)于uni-app開發(fā)之為什么H5正常、微信小程序頻繁踩坑記錄的文章就介紹到這了,更多相關(guān)uni-app H5正常、微信小程序踩坑內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論