之前在做小程序多端適配的時(shí)候我被一個(gè)問題反復(fù)折磨一套業(yè)務(wù)邏輯今天在微信小程序里跑通明天要投放到支付寶小程序又得重新抽離公共邏輯、調(diào)整 API 調(diào)用最后還要處理平臺(tái)差異帶來的樣式和交互問題。后來接觸到 MPX 這個(gè)增強(qiáng)型小程序框架發(fā)現(xiàn)它既不要求你完全拋棄原生小程序語(yǔ)法又能把一套代碼編譯到多個(gè)小程序平臺(tái)整體學(xué)習(xí)成本和改造成本都比預(yù)期低了不少。這篇文章就圍繞 MPX 展開梳理它的核心概念、環(huán)境搭建、語(yǔ)法增強(qiáng)、實(shí)戰(zhàn)示例和常見問題。如果你是一個(gè)寫過小程序但還沒接觸過多端框架的開發(fā)者或者正在調(diào)研小程序多端方案這篇文章可以幫你快速建立一套可落地、可排查的 MPX 實(shí)操認(rèn)知。1. MPX 是什么增強(qiáng)型小程序框架1.1 MPX 的基本定位MPX 是滴滴開源的一款增強(qiáng)型跨端小程序框架核心思路可以概括為“增強(qiáng)原生小程序而不是重寫一套 DSL”。也就是說你寫出來的代碼在語(yǔ)法上和原生小程序非常接近頁(yè)面文件里的template、script、style結(jié)構(gòu)、事件綁定方式、生命周期鉤子原生小程序開發(fā)者基本都能直接看懂。MPX 所做的是在編譯器層面把增強(qiáng)語(yǔ)法轉(zhuǎn)換、把跨平臺(tái)差異抹平最終產(chǎn)出的仍然是標(biāo)準(zhǔn)的小程序原生代碼。用一句話來解釋MPX 是在“小程序原生語(yǔ)法”和“多端復(fù)用能力”之間找到一個(gè)平衡點(diǎn)的框架。為什么要強(qiáng)調(diào)這一點(diǎn)因?yàn)槭忻嫔虾芏嗫缍朔桨付紩?huì)讓開發(fā)者用一種全新的 DSL 去描述界面比如類 Vue 或類 React 的寫法。雖然有生態(tài)和開發(fā)效率優(yōu)勢(shì)但對(duì)于已經(jīng)持有大量原生小程序代碼的團(tuán)隊(duì)來說遷移成本并不低。MPX 走的路線是“盡量兼容原生”讓老代碼可以漸進(jìn)式改造。1.2 MPX 解決了什么問題跨端小程序開發(fā)中最常見的痛點(diǎn)有三個(gè)第一平臺(tái) API 差異。wx.request、my.request、tt.request不同平臺(tái)的網(wǎng)絡(luò)請(qǐng)求接口長(zhǎng)得不一樣用戶授權(quán)、登錄、支付、分享等能力也各有各的調(diào)用方式。MPX 在運(yùn)行時(shí)做了一層封裝讓多數(shù) API 可以以統(tǒng)一的形式調(diào)用再編譯到各平臺(tái)。第二模板能力不足。原生小程序的模板語(yǔ)法相對(duì)基礎(chǔ)缺少類似 Vue 中computed、watch、靈活的循環(huán)和條件渲染能力。業(yè)務(wù)復(fù)雜之后setData滿天飛、模板里堆滿了wx:if和wx:for維護(hù)成本很高。MPX 引入了數(shù)據(jù)響應(yīng)式和模板增強(qiáng)讓開發(fā)者可以用更接近 Vue 的方式組織頁(yè)面邏輯。第三工程化能力弱。原生小程序項(xiàng)目在 TypeScript、樣式預(yù)編譯、npm 資源處理、多環(huán)境配置、代碼規(guī)范等方面都需要自己折騰。MPX 基于 webpack 構(gòu)建天然支持這些工程能力同時(shí)保留了小程序開發(fā)者工具的調(diào)試方式。1.3 MPX 與 Taro、uni-app 的對(duì)比很多人在選型時(shí)會(huì)糾結(jié) MPX、Taro、uni-app 到底怎么選。這里提供一個(gè)簡(jiǎn)單的判斷維度Taro 走的是 React 語(yǔ)法路線新一代 Taro 也在嘗試支持 Vueuni-app 走的是 Vue 語(yǔ)法編譯到多端覆蓋面非常廣包括 H5、App 等MPX 則更強(qiáng)調(diào)“原生小程序之上做增強(qiáng)”它不強(qiáng)行讓你換框架而是讓你繼續(xù)用原生小程序思維同時(shí)獲得響應(yīng)式、跨平臺(tái)和工程化能力。如果你維護(hù)的是已有原生小程序項(xiàng)目希望漸進(jìn)式接入多端能力MPX 的遷移路徑會(huì)更平滑。如果你是從零開始的新項(xiàng)目而且團(tuán)隊(duì) React 或 Vue 背景很強(qiáng)Taro 和 uni-app 可能學(xué)習(xí)曲線更短。這個(gè)沒有絕對(duì)優(yōu)劣取決于團(tuán)隊(duì)存量業(yè)務(wù)和長(zhǎng)期維護(hù)策略。1.4 適用人群與典型場(chǎng)景MPX 比較適合下面幾類場(chǎng)景團(tuán)隊(duì)里已經(jīng)有微信小程序線上業(yè)務(wù)后續(xù)需要同步輸出支付寶、抖音等平臺(tái)版本。團(tuán)隊(duì)整體是 Vue 技術(shù)棧或者對(duì) Vue 的響應(yīng)式原理比較熟悉。希望保留原生小程序開發(fā)體驗(yàn)不想把頁(yè)面全部改寫成 React DSL。對(duì)包體積和運(yùn)行性能有要求不希望瀏覽器引擎或大運(yùn)行時(shí)拖慢首屏加載。本文后續(xù)部分會(huì)圍繞 MPX 的環(huán)境準(zhǔn)備、核心語(yǔ)法、實(shí)戰(zhàn)案例和排錯(cuò)思路展開目標(biāo)是讓一個(gè)只寫過原生小程序的開發(fā)者也能在一兩天內(nèi)跑通一個(gè)多端 demo。2. 環(huán)境準(zhǔn)備與版本說明2.1 本地開發(fā)環(huán)境MPX 項(xiàng)目本質(zhì)上是 webpack 項(xiàng)目所以本地環(huán)境主要依賴 Node.js 和 npm。在開始之前先確認(rèn)你的機(jī)器上已經(jīng)安裝了 Node.js。不同版本的 MPX 對(duì) Node 版本要求不同總體建議使用 Node 16 或更高版本長(zhǎng)期穩(wěn)定版本更安全。除了 Node還需要安裝對(duì)應(yīng)的小程序開發(fā)者工具。比如做微信小程序就去微信開發(fā)者工具官網(wǎng)下載做支付寶小程序就下載支付寶小程序開發(fā)者工具。MPX 編譯輸出的目錄是各平臺(tái)開發(fā)者工具可以直接導(dǎo)入的“原生小程序項(xiàng)目”這一點(diǎn)會(huì)在后面反復(fù)提到。如果你目前不確定安裝的 Node 版本可以在終端執(zhí)行node -v npm -v如果版本過舊建議先升級(jí)到較新的穩(wěn)定版本再繼續(xù)后面的操作。MPX 的依賴包都會(huì)通過 npm 安裝網(wǎng)絡(luò)環(huán)境不穩(wěn)定時(shí)容易失敗建議先配置 npmmirror 鏡像避免頻繁出現(xiàn)安裝超時(shí)npm config set registry https://registry.npmmirror.com2.2 創(chuàng)建 MPX 項(xiàng)目推薦使用官方腳手架mpxjs/cli創(chuàng)建項(xiàng)目?？梢匀职惭b也可以直接用 npx 方式臨時(shí)代理。全局安裝方式npm install -g mpxjs/cli mpx create mpx-demo如果你不想全局安裝也可以這樣npx mpxjs/cli create mpx-demo執(zhí)行命令后腳手架會(huì)詢問你要?jiǎng)?chuàng)建哪類模板。一般選擇默認(rèn)的 mpx 項(xiàng)目模板即可。安裝過程會(huì)自動(dòng)拉取依賴整體完成后終端會(huì)提示你進(jìn)入項(xiàng)目目錄并啟動(dòng)對(duì)應(yīng)平臺(tái)的開發(fā)編譯。這里需要提醒一下mpxjs/cli的具體版本會(huì)隨時(shí)間更新命令交互也可能有一定變化。如果你執(zhí)行時(shí)發(fā)現(xiàn)命令和本文不完全一致以腳手架輸出的提示為準(zhǔn)不要強(qiáng)行跟著舊命令走。2.3 項(xiàng)目目錄結(jié)構(gòu)說明初始化完成后進(jìn)入項(xiàng)目目錄常見結(jié)構(gòu)大致如下mpx-demo/ ├── src/ │ ├── pages/ │ │ └── index/ │ │ └── index.mpx │ ├── app.mpx │ └── app.json ├── dist/ ├── mpx.config.js ├── package.json ├── tsconfig.json └── node_modules/src/pages存放頁(yè)面文件每個(gè)頁(yè)面是一個(gè).mpx文件內(nèi)部可以包含模板、腳本和樣式。src/app.mpx是應(yīng)用入口類似于原生小程序的App.js和App.wxss。mpx.config.js是 MPX 構(gòu)建相關(guān)配置一般在工程化調(diào)整時(shí)才需要修改。.mpx文件是 MPX 的單文件組件格式結(jié)構(gòu)上和 Vue 單文件組件極其相似一個(gè)文件搞定頁(yè)面或組件的模板、邏輯和樣式。這也是 MPX 上手快的重要原因之一。2.4 運(yùn)行與編譯流程在 package.json 的 scripts 中腳手架會(huì)生成多平臺(tái)命令。常見結(jié)構(gòu)如下{ scripts: { dev:wx: mpx serve -p wx, build:wx: mpx build -p wx, dev:ali: mpx serve -p ali, build:ali: mpx build -p ali } }mpx serve表示開發(fā)模式會(huì)監(jiān)聽文件變化并增量編譯mpx build表示生產(chǎn)構(gòu)建。-p后面的參數(shù)代表目標(biāo)平臺(tái)wx是微信小程序ali是支付寶小程序。啟動(dòng)微信小程序開發(fā)模式的命令npm run dev:wx編譯產(chǎn)物會(huì)輸出到dist/wx目錄。接下來打開微信開發(fā)者工具選擇“導(dǎo)入項(xiàng)目”目錄指向dist/wxAppID 可以先用測(cè)試號(hào)就能看到效果了。這里有一個(gè)很多新手容易忽略的點(diǎn)MPX 編譯輸出的是可以直接運(yùn)行的“原生小程序項(xiàng)目”所以發(fā)布、預(yù)覽、上傳等操作仍然是在各平臺(tái)開發(fā)者工具里完成的。MPX 不改變小程序最終的上線流程。3. MPX 核心原理與語(yǔ)法拆解3.1 編譯時(shí)框架與運(yùn)行時(shí)增強(qiáng)要理解 MPX首先要理解它“編譯時(shí) 運(yùn)行時(shí)”兩條線的分工。編譯時(shí)層面MPX 基于 webpack 做代碼轉(zhuǎn)換將.mpx單文件組件編譯成目標(biāo)小程序平臺(tái)的原生頁(yè)面或組件代碼。你寫的增強(qiáng)模板指令、響應(yīng)式數(shù)據(jù)聲明、跨平臺(tái)條件代碼都會(huì)在這一階段被處理成對(duì)應(yīng)平臺(tái)能識(shí)別的內(nèi)容。運(yùn)行時(shí)層面MPX 在mpxjs/core中提供了應(yīng)用創(chuàng)建、頁(yè)面創(chuàng)建、組件創(chuàng)建、狀態(tài)管理、API 封裝等能力。運(yùn)行時(shí)負(fù)責(zé)數(shù)據(jù)響應(yīng)式的依賴收集、更新觸發(fā)、以及跨平臺(tái) API 的統(tǒng)一適配。所以MPX 不是簡(jiǎn)單的模板翻譯器。它是在幫你把一套心智模型映射到不同平臺(tái)。你寫頁(yè)面時(shí)關(guān)注的是“業(yè)務(wù)邏輯本身”而不是“微信小程序怎么寫、支付寶小程序又怎么寫”。3.2 .mpx 單文件組件結(jié)構(gòu)一個(gè).mpx頁(yè)面文件通常包含四部分template、script、style以及可選的json配置塊。下面是一個(gè)最基本的結(jié)構(gòu)template view classwelcome text{{ message }}/text /view /template script import { createPage } from mpxjs/core createPage({ data: { message: Hello MPX } }) /script style .welcome { color: #333; } /styletemplate里寫頁(yè)面結(jié)構(gòu)script里通過createPage定義頁(yè)面邏輯style里寫樣式。這里的createPage是 MPX 提供的關(guān)鍵 API它和原生小程序的Page函數(shù)非常接近但多了對(duì) computed、watch、響應(yīng)式數(shù)據(jù)的支持。對(duì)于組件文件可以用createComponenttemplate view classcomponent-demo slot/slot /view /template script import { createComponent } from mpxjs/core createComponent({ properties: { title: { type: String, value: } }, data: {}, methods: {} }) /script如果你寫過 Vue 2會(huì)發(fā)現(xiàn)這套結(jié)構(gòu)非常友好。如果你只寫過原生小程序只要記住createPage對(duì)應(yīng)Page、createComponent對(duì)應(yīng)Component也能很快適應(yīng)。3.3 數(shù)據(jù)響應(yīng)式與頁(yè)面更新原生小程序里數(shù)據(jù)更新方式是setData。每當(dāng)需要修改頁(yè)面上的數(shù)據(jù)就要顯式調(diào)用this.setData({ count: this.data.count 1 })這種方式的問題在于業(yè)務(wù)復(fù)雜時(shí)很容易漏掉某個(gè)需要更新的字段或者更新順序出問題。MPX 的數(shù)據(jù)響應(yīng)式解決了這個(gè)痛點(diǎn)。在 MPX 頁(yè)面里你只需要像下面這樣修改數(shù)據(jù)視圖會(huì)同步更新import { createPage } from mpxjs/core createPage({ data: { count: 0 }, methods: { increment() { this.count } } })this.count之后模板中綁定count的位置會(huì)自動(dòng)刷新。MPX 在運(yùn)行時(shí)做了依賴收集和更新觸發(fā)開發(fā)者不再需要手動(dòng)維護(hù)setData調(diào)用。需要注意的是即使 MPX 提供了響應(yīng)式能力本質(zhì)上它仍然基于小程序的渲染機(jī)制最終數(shù)據(jù)還是會(huì)通過setData同步到視圖層?？蚣苤皇菐湍闶∪チ酥虚g的手工步驟。因此大規(guī)模數(shù)據(jù)更新時(shí)仍然要保持“按需更新”的意識(shí)不要在一個(gè)更新里塞入大量無關(guān)數(shù)據(jù)。3.4 模板增強(qiáng)指令MPX 對(duì)模板做了一系列增強(qiáng)最常用的是下面幾個(gè)。條件渲染類似 Vue 的v-if但指令名是mpx:ifview classempty mpx:if{{list.length 0}} 暫無數(shù)據(jù) /view view classlist mpx:else view mpx:for{{list}} mpx:keyid {{item.name}} /view /view注意這里 value 需要用{{ }}包裹這一點(diǎn)和原生小程序保持了一致。mpx:else與mpx:if對(duì)應(yīng)表示條件不滿足時(shí)的分支。列表渲染使用mpx:forview classtask-item mpx:for{{taskList}} mpx:keyid taptoggleTask(index) text{{item.name}}/text /viewmpx:key建議始終指定它幫助框架更高效地復(fù)用和更新節(jié)點(diǎn)。事件綁定上MPX 支持tap這種 Vue 風(fēng)格寫法也支持原生bindtap兩種都能用。雙向綁定使用mpx:modelinput classinput mpx:model{{inputValue}} placeholder請(qǐng)輸入內(nèi)容 /這個(gè)指令用于表單元素相當(dāng)于把數(shù)據(jù)綁定和 input 事件綁定合并在一起。輸入內(nèi)容變化時(shí)inputValue會(huì)自動(dòng)更新。模板增強(qiáng)的價(jià)值在于減少模板中重復(fù)的邏輯判斷讓頁(yè)面代碼更接近“聲明式”而不是一大堆零散的wx:if。不過也要注意指令越多編譯階段要做的工作也越多能用原生能力解決的地方不必強(qiáng)行套用增強(qiáng)指令。3.5 computed 與 watch在原生小程序中模板內(nèi)復(fù)雜的派生狀態(tài)往往要提前在邏輯層算好或者使用 WXS 處理。MPX 提供了computed和watch大大簡(jiǎn)化了派生狀態(tài)的管理。import { createPage } from mpxjs/core createPage({ data: { firstName: , lastName: , todos: [] }, computed: { fullName() { return this.firstName this.lastName }, unfinishedCount() { return this.todos.filter(todo !todo.done).length } }, watch: { firstName(newVal, oldVal) { console.log(firstName changed:, newVal) } } })computed適合聲明從已有數(shù)據(jù)推導(dǎo)出來的新數(shù)據(jù)比如總和、數(shù)量、過濾后的列表。它會(huì)被緩存只有依賴的字段變化時(shí)才會(huì)重新計(jì)算。watch適合在某個(gè)數(shù)據(jù)變化時(shí)觸發(fā)副作用比如埋點(diǎn)、聯(lián)動(dòng)請(qǐng)求、同步到其他頁(yè)面。這條語(yǔ)法對(duì) Vue 開發(fā)者來說幾乎零成本對(duì)原生小程序開發(fā)者來說也能顯著減少setData前手動(dòng)計(jì)算一堆中間變量的代碼。3.6 跨平臺(tái)編譯與差異處理MPX 的核心價(jià)值之一是跨平臺(tái)。編譯時(shí)MPX 會(huì)根據(jù)-p參數(shù)把代碼轉(zhuǎn)換為對(duì)應(yīng)平臺(tái)產(chǎn)物。為了保證代碼可以在多端復(fù)用開發(fā)時(shí)有幾點(diǎn)需要注意。API 調(diào)用層面建議優(yōu)先使用 MPX 對(duì)原生 API 的封裝而不是直接調(diào)用wx前綴的方法。因?yàn)?MPX 的運(yùn)行時(shí)會(huì)在不同平臺(tái)映射正確的底層 API。直接寫死的wx.request在支付寶小程序里是無法運(yùn)行的。平臺(tái)差異文件MPX 支持通過帶平臺(tái)后綴的文件來拆分邏輯。例如src/utils/ ├── auth.js ├── auth.wx.js └── auth.ali.js構(gòu)建時(shí)MPX 會(huì)選擇對(duì)應(yīng)的平臺(tái)文件。auth.wx.js只在微信平臺(tái)使用auth.ali.js只在支付寶平臺(tái)使用auth.js可以放公共工具函數(shù)。這是一種比較干凈的跨平臺(tái)適配方案比在代碼里寫大量if (isWeixin)要清晰得多。樣式差異方面不同平臺(tái)的小程序在部分 CSS 屬性支持上仍然不一致。建議盡量使用各平臺(tái)公共支持度較高的樣式能力差異較大的效果單獨(dú)抽成樣式片段必要時(shí)用平臺(tái)文件拆分。4. 完整實(shí)戰(zhàn)案例MPX 任務(wù)清單小程序4.1 需求與功能拆分為了驗(yàn)證上面的概念下面做一個(gè)“任務(wù)清單”小程序。功能雖然簡(jiǎn)單但覆蓋了 MPX 常用能力頁(yè)面初始化展示任務(wù)列表。輸入框輸入任務(wù)名稱點(diǎn)擊按鈕添加任務(wù)。點(diǎn)擊任務(wù)項(xiàng)可切換已完成狀態(tài)。統(tǒng)計(jì)未完成任務(wù)數(shù)量。模擬從接口獲取初始數(shù)據(jù)。功能拆分為三步搭建頁(yè)面結(jié)構(gòu)、編寫頁(yè)面邏輯、編譯運(yùn)行驗(yàn)證。4.2 創(chuàng)建項(xiàng)目與頁(yè)面結(jié)構(gòu)如果你的項(xiàng)目還沒有創(chuàng)建先按 2.2 節(jié)的方法創(chuàng)建npx mpxjs/cli create mpx-todo-demo進(jìn)入目錄后在src/pages下新建todo目錄然后創(chuàng)建todo.mpx文件。項(xiàng)目里需要一個(gè)應(yīng)用入口src/app.mpx腳手架默認(rèn)會(huì)生成內(nèi)容一般類似script import mpx from mpxjs/core mpx.createApp({ onLaunch() { console.log(MPX app launched) } }) /script style page { background-color: #f5f6f8; } /stylecreateApp類似于原生小程序的App()可以在這里配置全局生命周期。style塊中寫的page樣式會(huì)覆蓋到所有頁(yè)面。然后在src/app.json中注冊(cè)頁(yè)面路由。不同版本的腳手架結(jié)構(gòu)可能略有差異以實(shí)際生成的文件為準(zhǔn)核心配置項(xiàng)是pages數(shù)組{ pages: [ pages/todo/todo ], window: { navigationBarTitleText: 任務(wù)清單, navigationBarBackgroundColor: #3b82f6, navigationBarTextStyle: white } }4.3 編寫模板與樣式在src/pages/todo/todo.mpx中編寫模板。我在模板里加入了輸入框、添加按鈕、任務(wù)列表、未完成數(shù)量提示和空狀態(tài)template view classpage view classheader text classtitle任務(wù)清單/text text classsubtitle未完成{{unfinishedCount}} 項(xiàng)/text /view view classinput-row input classinput mpx:model{{inputValue}} placeholder請(qǐng)輸入新任務(wù) confirm-typedone confirmaddTask / button classadd-btn tapaddTask添加/button /view view classtask-list mpx:for{{taskList}} mpx:keyid view classtask-item taptoggleTask(index) text classtask-check{{item.done ? ? : ○}}/text text classtask-name {{item.done ? task-done : }}{{item.name}}/text /view /view view classempty mpx:if{{taskList.length 0}} text暫無任務(wù)先添加一條吧/text /view /view /template這里使用了mpx:model處理輸入框雙向綁定使用mpx:for渲染任務(wù)列表mpx:key指定唯一標(biāo)識(shí)字段mpx:if處理空狀態(tài)。事件綁定使用tap和confirm相比原生寫法更簡(jiǎn)潔。樣式部分關(guān)注布局和完成態(tài)效果style langscss .page { min-height: 100vh; padding: 40rpx 30rpx; box-sizing: border-box; } .header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 40rpx; } .title { font-size: 44rpx; font-weight: 600; color: #1f2937; } .subtitle { font-size: 26rpx; color: #6b7280; } .input-row { display: flex; align-items: center; margin-bottom: 40rpx; } .input { flex: 1; height: 80rpx; background: #ffffff; border-radius: 16rpx; padding: 0 24rpx; font-size: 28rpx; border: 2rpx solid #e5e7eb; } .add-btn { margin-left: 20rpx; height: 80rpx; line-height: 80rpx; padding: 0 36rpx; background-color: #3b82f6; color: #ffffff; font-size: 28rpx; border-radius: 16rpx; } .task-list { margin-bottom: 20rpx; } .task-item { display: flex; align-items: center; background: #ffffff; border-radius: 16rpx; padding: 24rpx; margin-bottom: 20rpx; box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04); } .task-check { font-size: 32rpx; color: #3b82f6; margin-right: 20rpx; } .task-name { font-size: 30rpx; color: #111827; } .task-done { text-decoration: line-through; color: #9ca3af; } .empty { text-align: center; padding: 80rpx 0; color: #9ca3af; font-size: 28rpx; } /stylelangscss表示這里的樣式會(huì)經(jīng)過 SCSS 預(yù)編譯MPX 腳手架默認(rèn)支持這種寫法。如果你更喜歡純 CSS也可以去掉lang屬性。4.4 編寫頁(yè)面邏輯接下來是邏輯部分。使用createPage創(chuàng)建頁(yè)面數(shù)據(jù)、計(jì)算屬性、監(jiān)聽器和方法都寫在配置對(duì)象里import { createPage } from mpxjs/core import { getTodoList } from ../../api/todo createPage({ data: { inputValue: , taskList: [] }, computed: { unfinishedCount() { return this.taskList.filter(item !item.done).length } }, watch: { taskList: { handler(newList) { console.log(任務(wù)列表變化當(dāng)前數(shù)量, newList.length) }, deep: true } }, onLoad() { this.fetchList() }, methods: { fetchList() { getTodoList().then(list { this.taskList list }) }, addTask() { const name this.inputValue.trim() if (!name) { wx.showToast({ title: 任務(wù)名稱不能為空, icon: none }) return } this.taskList.push({ id: Date.now(), name, done: false }) this.inputValue }, toggleTask(index) { this.taskList[index].done !this.taskList[index].done } } })computed中的unfinishedCount會(huì)根據(jù)taskList的變化自動(dòng)重新計(jì)算。watch里監(jiān)聽taskList的變化并開啟deep: true以便在數(shù)組元素屬性變化時(shí)也能觸發(fā)回調(diào)。addTask中做了簡(jiǎn)單的輸入校驗(yàn)任務(wù)名稱為空時(shí)會(huì)彈出輕提示。wx.showToast是微信小程序的 API。如果你需要更強(qiáng)的跨平臺(tái)能力也可以用 MPX 提供的mpx.showToast形式這樣在切換到支付寶平臺(tái)時(shí)也能自動(dòng)適配。下面請(qǐng)求封裝中會(huì)體現(xiàn)這種思路。4.5 請(qǐng)求接口數(shù)據(jù)為了讓示例更接近真實(shí)項(xiàng)目我加一個(gè)請(qǐng)求模塊。新建src/api/todo.js封裝一個(gè)返回 Promise 的請(qǐng)求方法。這里用mpx.request做跨平臺(tái)請(qǐng)求// src/api/todo.js import mpx from mpxjs/core export function getTodoList() { return new Promise((resolve) { mpx.request({ url: https://example.com/api/todo/list, method: GET, success(res) { if (res.statusCode 200) { resolve(res.data) } else { resolve([]) } }, fail() { resolve([ { id: 1, name: 學(xué)習(xí) MPX 基礎(chǔ)語(yǔ)法, done: true }, { id: 2, name: 完成跨平臺(tái)適配, done: false } ]) } }) }) }在這個(gè)示例里為了避免接口不可用導(dǎo)致頁(yè)面空白fail中返回了默認(rèn)數(shù)據(jù)。真實(shí)項(xiàng)目中這里應(yīng)該做更完善的錯(cuò)誤處理比如錯(cuò)誤提示、重試機(jī)制、超時(shí)控制等。如果你的項(xiàng)目目前沒有真實(shí)接口也可以把getTodoList直接改成返回本地 mock 數(shù)據(jù)先跑通頁(yè)面展示export function getTodoList() { return Promise.resolve([ { id: 1, name: 學(xué)習(xí) MPX 基礎(chǔ)語(yǔ)法, done: true }, { id: 2, name: 完成跨平臺(tái)適配, done: false } ]) }4.6 運(yùn)行與驗(yàn)證在項(xiàng)目根目錄執(zhí)行npm run dev:wx編譯完成后打開微信開發(fā)者工具導(dǎo)入dist/wx目錄就能看到任務(wù)清單頁(yè)面。你可以測(cè)試在輸入框輸入內(nèi)容后點(diǎn)擊“添加”任務(wù)列表會(huì)增加新條目。未完成數(shù)量會(huì)自動(dòng)更新。點(diǎn)擊任務(wù)條目前面的圓圈可以對(duì)任務(wù)進(jìn)行完成/未完成切換。刪除全部任務(wù)后會(huì)顯示空狀態(tài)文案。如果導(dǎo)入dist/wx時(shí)報(bào)錯(cuò)先確認(rèn)npm run dev:wx進(jìn)程是否在運(yùn)行以及開發(fā)者工具選擇的導(dǎo)入目錄是否正確。更多排錯(cuò)內(nèi)容見下一節(jié)。5. 常見問題與排查思路5.1 常見問題匯總下面把 MPX 開發(fā)中比較高頻的問題整理成表格方便快速定位問題現(xiàn)象常見原因解決思路編譯后開發(fā)者工具沒有反應(yīng)dev 命令未啟動(dòng)或?qū)肽夸洸粚?duì)確認(rèn)npm run dev:wx已啟動(dòng)導(dǎo)入dist/wx目錄編譯報(bào)錯(cuò) Cannot find module依賴未安裝完整或版本沖突刪除node_modules和 lock 文件重新npm install模板指令失效頁(yè)面空白小程序開發(fā)工具未開啟 ES6 轉(zhuǎn) ES5或基礎(chǔ)庫(kù)版本過低在開發(fā)者工具中開啟“ES6 轉(zhuǎn) ES5”更新調(diào)試基礎(chǔ)庫(kù)使用wx.request在支付寶端報(bào)錯(cuò)沒有使用跨平臺(tái) API 封裝改用mpx.request或使用平臺(tái)差異文件拆分修改數(shù)據(jù)后視圖不更新直接給數(shù)組下標(biāo)賦值或新增屬性未聲明使用this.taskList[index] newVal前先復(fù)制數(shù)組或提前在 data 中聲明字段異步回調(diào)中this指向不對(duì)普通函數(shù)寫法丟失上下文使用箭頭函數(shù)或在methods中定義方法包體積過大引入過多第三方依賴按需引入組件庫(kù)檢查 webpack 打包分析對(duì)平臺(tái)差異代碼做好分包5.2 數(shù)組更新不觸發(fā)視圖這是剛上手 MPX 時(shí)最容易踩的坑。雖然 MPX 有響應(yīng)式能力但對(duì)于小程序的數(shù)組和對(duì)象仍然有一些平臺(tái)限制。舉例來說你這樣寫可能不會(huì)觸發(fā)視圖更新this.taskList[index] newItem在原生小程序中這種“根據(jù)下標(biāo)修改數(shù)組元素”的方式本身就不會(huì)觸發(fā)setData。MPX 在編譯時(shí)雖然做了一層響應(yīng)式代理但有些平臺(tái)底層仍然無法感知這種修改。推薦的寫法是創(chuàng)建新數(shù)組再賦值toggleTask(index) { const newList this.taskList.map((item, i) { if (i index) { return { ...item, done: !item.done } } return item }) this.taskList newList }這樣能保證響應(yīng)式系統(tǒng)可靠地檢測(cè)到變化。同理新增對(duì)象屬性時(shí)最好在初始化 data 時(shí)就把字段聲明好不要依賴運(yùn)行期的動(dòng)態(tài)添加。5.3 跨平臺(tái) API 差異導(dǎo)致運(yùn)行報(bào)錯(cuò)很多同學(xué)寫 MPX 的第一個(gè)跨平臺(tái)項(xiàng)目時(shí)會(huì)在頁(yè)面里直接寫wx.getSystemInfoSync()在微信平臺(tái)沒問題但編譯到支付寶小程序后wx對(duì)象不存在運(yùn)行就會(huì)報(bào)錯(cuò)。MPX 提供了統(tǒng)一的 API 調(diào)用入口建議這樣寫import mpx from mpxjs/core const info mpx.getSystemInfoSync()MPX 運(yùn)行時(shí)會(huì)根據(jù)當(dāng)前平臺(tái)將調(diào)用映射到對(duì)應(yīng) API。真實(shí)項(xiàng)目中如果某個(gè)平臺(tái) API 的行為差異太大可以用平臺(tái)差異文件做單獨(dú)實(shí)現(xiàn)避免在業(yè)務(wù)代碼里堆if/else。5.4 編譯報(bào)錯(cuò)的排查順序當(dāng)你在終端看到編譯錯(cuò)誤時(shí)不要只看最后一行紅字按下面順序排查查看報(bào)錯(cuò)的文件路徑確認(rèn)是不是最近修改過的.mpx文件。檢查模板中的標(biāo)簽是否閉合mpx:for是否漏掉mpx:key。檢查script中是否引入了不存在的依賴路徑是否正確。如果報(bào)錯(cuò)和 webpack 相關(guān)嘗試刪掉node_modules重新安裝。如果報(bào)錯(cuò)和語(yǔ)法解析相關(guān)確認(rèn)是否使用了當(dāng)前版本不支持的語(yǔ)法。只要編譯輸出恢復(fù)正常并且dist/wx目錄中的產(chǎn)物有更新小程序端的問題通常只剩 API 兼容和樣式差異。6. 最佳實(shí)踐與工程建議6.1 目錄結(jié)構(gòu)規(guī)范當(dāng)業(yè)務(wù)逐漸變大不建議把所有頁(yè)面都放在pages下平鋪。推薦按業(yè)務(wù)模塊拆分src/ ├── pages/ │ ├── home/ │ ├── todo/ │ └── mine/ ├── components/ │ ├── custom-header/ │ └── empty-state/ ├── api/ │ ├── todo.js │ └── user.js ├── store/ │ └── index.js ├── utils/ │ ├── request.js │ └── format.js ├── app.mpx └── app.jsonapi集中放接口請(qǐng)求store放全局狀態(tài)components放公共組件utils放工具函數(shù)。組件和頁(yè)面各自維護(hù)自己的.mpx文件避免把公共邏輯塞進(jìn)頁(yè)面里。6.2 請(qǐng)求封裝與錯(cuò)誤處理上面的示例中已經(jīng)用到了mpx.request。在正式項(xiàng)目中建議在utils/request.js里做一層統(tǒng)一封裝統(tǒng)一處理 baseURL、超時(shí)、登錄態(tài)失效、錯(cuò)誤提示等邏輯。一個(gè)簡(jiǎn)化版封裝思路// src/utils/request.js import mpx from mpxjs/core const BASE_URL https://example.com export function request(path, options {}) { return new Promise((resolve, reject) { mpx.request({ url: BASE_URL path, method: options.method || GET, data: options.data || {}, timeout: options.timeout || 10000, success(res) { if (res.statusCode 200 res.statusCode 300) { resolve(res.data) } else { reject(new Error(請(qǐng)求失敗${res.statusCode})) } }, fail(err) { reject(err) } }) }) }這樣頁(yè)面里就不需要關(guān)心mpx.request的細(xì)節(jié)只要調(diào)用request(/api/todo/list, { method: GET })即可。6.3 全局狀態(tài)管理當(dāng)多個(gè)頁(yè)面需要共享用戶信息、購(gòu)物車數(shù)量等數(shù)據(jù)時(shí)建議引入 MPX 的createStore。它的用法接近 Vuex// src/store/index.js import { createStore } from mpxjs/core export default createStore({ state: { userInfo: null }, mutations: { SET_USER_INFO(state, payload) { state.userInfo payload } }, actions: { fetchUserInfo({ commit }) { return request(/api/user/info).then(data { commit(SET_USER_INFO, data) }) } } })在頁(yè)面中使用this.$store.dispatch或組件中this.$store.state訪問全局?jǐn)?shù)據(jù)。不要把所有頁(yè)面級(jí)數(shù)據(jù)都放進(jìn)全局 store。只有確實(shí)被多個(gè)頁(yè)面共享的數(shù)據(jù)才值得放進(jìn)去否則會(huì)帶來不必要的維護(hù)成本和內(nèi)存占用。6.4 樣式與設(shè)計(jì)的跨端適配跨平臺(tái)時(shí)最明顯的“坑”就是樣式。這里有幾個(gè)經(jīng)驗(yàn)盡量使用rpx作為尺寸單位它適配不同屏幕寬度的能力比較好。盡量避免使用平臺(tái)特有的組件和屬性例如open-type在不同平臺(tái)上的支持范圍不同。微信的button默認(rèn)樣式和支付寶的button默認(rèn)樣式并不一致需要顯式重置line-height、border-radius、background-color等屬性。字體圖標(biāo)、圖片資源等靜態(tài)文件建議放在項(xiàng)目?jī)?nèi)管理不要依賴跨域的網(wǎng)絡(luò)圖片。因?yàn)椴糠中〕绦蚱脚_(tái)對(duì)網(wǎng)絡(luò)圖片域名有白名單限制。6.5 性能與包體積優(yōu)化MPX 基于 webpack因此很多 webpack 優(yōu)化手段都可以沿用。按需引入很重要。如果你使用第三方組件庫(kù)盡量使用支持按需加載的庫(kù)避免一下子引入全部組件。可以使用分包加載把低頻業(yè)務(wù)頁(yè)面放到subPackages中減少主包體積。開發(fā)環(huán)境盡量少開“watch”之外的額外插件避免編譯速度下降。生產(chǎn)構(gòu)建時(shí)可以檢查構(gòu)建產(chǎn)物中是否有重復(fù)引入的庫(kù)及時(shí)收斂依賴。運(yùn)行層面注意減少不必要的大對(duì)象 setData。雖然 MPX 幫你封裝了數(shù)據(jù)響應(yīng)但底層同步到視圖層的數(shù)據(jù)最終仍然要經(jīng)過小程序的渲染管線。一次渲染的數(shù)據(jù)體積控制在合理范圍頁(yè)面滾動(dòng)和交互會(huì)更流暢。6.6 版本管理與發(fā)布流程MPX 項(xiàng)目的版本管理除了小程序端的三位版本號(hào)還要關(guān)注依賴包的鎖定。package-lock.json一定要提交到代碼倉(cāng)庫(kù)保證團(tuán)隊(duì)環(huán)境一致。發(fā)布流程建議為本地運(yùn)行npm run build:wx確認(rèn)構(gòu)建成功。在微信開發(fā)者工具中預(yù)覽走一遍核心鏈路。提交代碼由 CI 執(zhí)行構(gòu)建和基礎(chǔ)檢查。測(cè)試人員通過開發(fā)者工具上傳體驗(yàn)版。正式發(fā)布前再次核對(duì)dist/wx產(chǎn)物是否來自最新代碼。MPX 編譯產(chǎn)物是標(biāo)準(zhǔn)小程序項(xiàng)目所以平臺(tái)側(cè)的上傳、審核、發(fā)布流程和原生小程序完全一致不用額外學(xué)習(xí)新的發(fā)布方式。7. 總結(jié)與學(xué)習(xí)路線到這里MPX 的核心認(rèn)知就基本建立起來了。我們用一套任務(wù)清單項(xiàng)目走通了 MPX 從環(huán)境搭建、頁(yè)面編寫、邏輯處理到多端編譯發(fā)布的完整鏈路也看到了 MPX 和原生小程序的核心差異數(shù)據(jù)響應(yīng)式、模板增強(qiáng)、跨平臺(tái) API 封裝、基于 webpack 的工程能力。如果你是從原生小程序轉(zhuǎn)過來的下一步可以重點(diǎn)熟悉下面幾個(gè)方向createComponent與組件間通信包括properties、$emit、slot的用法。createStore與頁(yè)面間狀態(tài)共享。平臺(tái)差異文件的組織方式例如auth.wx.js和auth.ali.js怎么配合公共文件使用。MPX 對(duì) TypeScript 的支持把類型約束引入到頁(yè)面和組件里。小程序分包、預(yù)加載、骨架屏等性能優(yōu)化手段在 MPX 項(xiàng)目中的落地方式。每個(gè)方向都可以拿一個(gè)小功能做練習(xí)。比如把任務(wù)清單改成多人協(xié)作的“共享日程”加入登錄態(tài)、用戶信息持久化、跨頁(yè)面狀態(tài)同步這個(gè)過程中你會(huì)自然遇到 API 差異、存儲(chǔ)差異、組件生命周期差異等問題解決問題的過程就是對(duì) MPX 理解加深的過程。如果在實(shí)際項(xiàng)目中遇到報(bào)錯(cuò)建議先回到第 5 節(jié)排查確認(rèn)依賴安裝、確認(rèn)編譯目錄、確認(rèn) API 是否為跨平臺(tái)寫法、確認(rèn)數(shù)據(jù)結(jié)構(gòu)是否觸發(fā)響應(yīng)式更新。大部分 MPX 新手問題都不會(huì)超過這四個(gè)范圍。如果你也在做小程序多端項(xiàng)目建議先用一個(gè)真實(shí)小項(xiàng)目把 MPX 完整跑一遍遇到問題時(shí)回看本文的排查清單會(huì)比只看官方文檔高效很多。歡迎收藏備查也歡迎在評(píng)論區(qū)交流你在 MPX 實(shí)踐中遇到的問題。