CINXE.COM

<!DOCTYPE html> <html lang="en-US" dir="ltr"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>周边拓展 | Mpx 框架</title> <meta name="description" content="A VitePress site"> <meta name="generator" content="VitePress v1.6.3"> <link rel="preload stylesheet" href="/assets/style.D9lwO_cj.css" as="style"> <link rel="preload stylesheet" href="/vp-icons.css" as="style"> <script type="module" src="/assets/app.-jTyqA5_.js"></script> <link rel="preload" href="/assets/inter-roman-latin.Di8DUHzh.woff2" as="font" type="font/woff2" crossorigin=""> <link rel="modulepreload" href="/assets/chunks/theme.wl7iradx.js"> <link rel="modulepreload" href="/assets/chunks/framework.BRjwFPxv.js"> <link rel="modulepreload" href="/assets/api_extend.md.COshM7be.lean.js"> <link rel="icon" href="/favicon.ico"> <link rel="manifest" href="/manifest.webmanifest"> <script type="text/javascript">(function(e,r,t,i,a,n,s){e[t]=e[t]||function(){(e[t].q=e[t].q||[]).push(arguments)},n=r.createElement(i),n.async=1,n.src="https://www.clarity.ms/tag/"+a,s=r.getElementsByTagName(i)[0],s.parentNode.insertBefore(n,s)})(window,document,"clarity","script","jtvvy52wxy");</script> <meta name="author" content="Mpx 框架"> <meta property="og:type" content="website"> <meta name="og:title" content="Mpx 框架"> <meta name="og:description" content="深度性能优化的增强型小程序开发框架"> <meta property="og:image" content="https://mpxjs.cn/logo.png"> <meta property="og:url" content="https://mpxjs.cn/"> <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script> <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script> <link rel="manifest" href="/manifest.webmanifest"> </head> <body> <div id="app"><div class="container"><div><div class="Layout" data-v-5d98c3a5><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0b0ada53>Skip to content</a><header class="VPNav" data-v-5d98c3a5 data-v-ae24b3ad><div class="VPNavBar" data-v-ae24b3ad data-v-6aa21345><div class="wrapper" data-v-6aa21345><div class="container" data-v-6aa21345><div class="title" data-v-6aa21345><div class="VPNavBarTitle has-sidebar" data-v-6aa21345 data-v-1168a8e4><a class="title" href="/" data-v-1168a8e4><img class="VPImage logo" src="/favicon.ico" alt data-v-8426fc1a>Mpx 框架</a></div></div><div class="content" data-v-6aa21345><div class="content-body" data-v-6aa21345><div class="VPNavBarSearch search" data-v-6aa21345><div id="local-search"><button type="button" class="DocSearch DocSearch-Button" aria-label="搜索文档">搜索文档<kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></button></div></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-6aa21345 data-v-dc692963> Main Navigation <a class="VPLink link VPNavBarMenuLink" href="/guide/basic/start.html" tabindex="0" data-v-dc692963 data-v-e56f3d57>指南</a><a class="VPLink link VPNavBarMenuLink active" href="/api/" tabindex="0" data-v-dc692963 data-v-e56f3d57>API</a><a class="VPLink link VPNavBarMenuLink" href="/articles/" tabindex="0" data-v-dc692963 data-v-e56f3d57>文章</a><a class="VPLink link vp-external-link-icon VPNavBarMenuLink" href="https://github.com/didi/mpx/releases" target="_blank" rel="noreferrer" tabindex="0" data-v-dc692963 data-v-e56f3d57>更新记录</a></nav><div class="VPNavBarAppearance appearance" data-v-6aa21345 data-v-6c893767><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title aria-checked="false" data-v-6c893767 data-v-5337faa4 data-v-1d5665e3></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-6aa21345 data-v-0394ad82 data-v-7bc22406><a class="VPSocialLink no-icon" href="https://github.com/didi/mpx" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-bd121fe5></a></div><div class="VPFlyout VPNavBarExtra extra" data-v-6aa21345 data-v-bb2aa2f0 data-v-cf11d7a2><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-cf11d7a2></button><div class="menu" data-v-cf11d7a2><div class="VPMenu" data-v-cf11d7a2 data-v-b98bc113><div class="group" data-v-bb2aa2f0><div class="item appearance" data-v-bb2aa2f0>外观<div class="appearance-action" data-v-bb2aa2f0><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title aria-checked="false" data-v-bb2aa2f0 data-v-5337faa4 data-v-1d5665e3></button></div></div></div><div class="group" data-v-bb2aa2f0><div class="item social-links" data-v-bb2aa2f0><div class="VPSocialLinks social-links-list" data-v-bb2aa2f0 data-v-7bc22406><a class="VPSocialLink no-icon" href="https://github.com/didi/mpx" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-bd121fe5></a></div></div></div></div></div></div><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-6aa21345 data-v-e5dd9c1c></button></div></div></div></div><div class="divider" data-v-6aa21345><div class="divider-line" data-v-6aa21345></div></div></div></header><div class="VPLocalNav has-sidebar empty" data-v-5d98c3a5 data-v-a6f0e41e><div class="container" data-v-a6f0e41e><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-a6f0e41e>菜单</button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-a6f0e41e data-v-8a42e2b4><button data-v-8a42e2b4>返回顶部</button></div></div></div><aside class="VPSidebar" data-v-5d98c3a5 data-v-319d5ca6><div class="curtain" data-v-319d5ca6></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-319d5ca6> Sidebar Navigation <div class="no-transition group" data-v-c40bc020><section class="VPSidebarItem level-0 has-active" data-v-c40bc020 data-v-b3fd67f8><div class="item" role="button" tabindex="0" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><h2 class="text" data-v-b3fd67f8>API</h2></div><div class="items" data-v-b3fd67f8><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/api/" data-v-b3fd67f8>API 参考</a></div></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/api/app-config.html" data-v-b3fd67f8>全局配置</a></div></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/api/global-api.html" data-v-b3fd67f8>全局 API</a></div></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/api/instance-api.html" data-v-b3fd67f8>实例 API</a></div></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/api/store-api.html" data-v-b3fd67f8>Store API</a></div></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/api/directives.html" data-v-b3fd67f8>模板指令</a></div></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/api/compile.html" data-v-b3fd67f8>编译构建</a></div></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/api/builtIn.html" data-v-b3fd67f8>内建组件</a></div></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/api/reactivity-api.html" data-v-b3fd67f8>响应式 API</a></div></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/api/composition-api.html" data-v-b3fd67f8>组合式 API</a></div></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/api/optional-api.html" data-v-b3fd67f8>选项式 API</a></div></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/api/extend.html" data-v-b3fd67f8>周边拓展</a></div></div></div></section></div></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5d98c3a5 data-v-1428d186><div class="VPDoc has-sidebar has-aside" data-v-1428d186 data-v-39a288b8><div class="container" data-v-39a288b8><div class="aside" data-v-39a288b8><div class="aside-curtain" data-v-39a288b8></div><div class="aside-container" data-v-39a288b8><div class="aside-content" data-v-39a288b8><div class="VPDocAside" data-v-39a288b8 data-v-3f215769><nav aria-labelledby="doc-outline-aria-label" class="VPDocAsideOutline" data-v-3f215769 data-v-a5bbad30><div class="content" data-v-a5bbad30><div class="outline-marker" data-v-a5bbad30></div><div aria-level="2" class="outline-title" id="doc-outline-aria-label" role="heading" data-v-a5bbad30>本页目录</div><ul class="VPDocOutlineItem root" data-v-a5bbad30 data-v-b933a997></ul></div></nav><div class="spacer" data-v-3f215769></div></div></div></div></div><div class="content" data-v-39a288b8><div class="content-container" data-v-39a288b8><main class="main" data-v-39a288b8><div style="position:relative;" class="vp-doc _api_extend" data-v-39a288b8><div><h1 id="周边拓展" tabindex="-1">周边拓展 <a class="header-anchor" href="#周边拓展" aria-label="Permalink to "周边拓展""></a></h1><h2 id="mpx-fetch" tabindex="-1">mpx-fetch <a class="header-anchor" href="#mpx-fetch" aria-label="Permalink to "mpx-fetch""></a></h2>mpx-fetch提供了一个实例xfetch ，该实例包含以下api<h3 id="fetch-config" tabindex="-1">fetch(config) <a class="header-anchor" href="#fetch-config" aria-label="Permalink to "fetch(config)""></a></h3><blockquote>正常的promisify风格的请求方法</blockquote><ul><li><code>{Object} config</code>config 可指定以下属性：<ul><li>url<code>string</code>设置请求url</li><li>method<code>string</code>设置请求方式，默认为GET</li><li>data<code>object</code>设置请求参数</li><li>params<code>object</code>设置请求参数，参数会以 Query String 的形式进行传递</li><li>header<code>object</code>设置请求的 header，header 中不能设置 Referer。 <code>content-type</code> 默认为 <code>application/json</code></li><li>timeout<code>number</code>单位为毫秒。若不传，默认读取app.json文件中__networkTimeout属性。对于超时的处理可在 catch 方法中进行</li><li>emulateJSON<code>boolean</code>设置为 true 时，等价于 header =</li><li>usePre<code>boolean</code>预请求开关，若设置为 true，则两次请求间隔在有效期内且请求参数和请求方式对比一致的情况下，会返回上一次的请求结果</li><li>cacheInvalidationTime<code>number</code>预请求缓存有效时长，单位 ms，默认为 5000ms。当两次请求时间间隔超过设置时长后再发起二次请求时，上一次的请求缓存会失效然后重新发起请求</li><li>ignorePreParamKeys<code>array</code> | <code>string</code>在判断缓存请求是否可用对比前后两次请求参数时，默认对比的是 options 传入的所有参数（包括 params 和 data ）。但在具体业务场景下某些参数不一致时的缓存结果依旧可使用（比如参数中带有时间戳），所以提供 ignorePreParamKeys 来设置对比参数过程中可忽略的参数的 key，支持字符串数组和字符串（字符串传多个 key 时使用英文逗号分隔）类型。配置后在进行参数对比时，不会对比在 ignorePreParamKeys 设置的参数。</li></ul></li></ul><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button>js<pre class="shiki shiki-themes github-light github-dark vp-code" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0"><code>import mpx from '@mpxjs/core' import mpxFetch from '@mpxjs/fetch' mpx.use(mpxFetch) // 第一种访问形式 mpx.xfetch.fetch({ url: 'http://xxx.com', method: 'POST', params: { age: 10 }, data: { name: 'test' }, header: { 'content-type': 'application/x-www-form-urlencoded', }, emulateJSON: true, usePre: true, cacheInvalidationTime: 3000, ignorePreParamKeys: ['timestamp'] }).then(res => { console.log(res.data) }) mpx.createApp({ onLaunch() { // 第二种访问形式 this.$xfetch.fetch({url: 'http://test.com'}) } })</code></pre></div><h3 id="canceltoken" tabindex="-1">CancelToken <a class="header-anchor" href="#canceltoken" aria-label="Permalink to "CancelToken""></a></h3>命名导出，用于创建一个取消请求的凭证。<div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button>js<pre class="shiki shiki-themes github-light github-dark vp-code" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0"><code>import { CancelToken } from '@mpxjs/fetch' const cancelToken = new CancelToken() mpx.xfetch.fetch({ url: 'http://xxx.com', data: { name: 'test' }, cancelToken: cancelToken.token }) cancelToken.exec('手动取消请求') // 执行后请求中断，返回abort fail</code></pre></div><h3 id="xfetch" tabindex="-1">XFetch <a class="header-anchor" href="#xfetch" aria-label="Permalink to "XFetch""></a></h3>命名导出，用于创建一个新的mpx-fetch实例进行独立使用<div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button>ts<pre class="shiki shiki-themes github-light github-dark vp-code" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0"><code>interface FetchOptions{ useQueue: boolean // 是否开启队列功能 proxy: boolean // 是否开启代理功能 }</code></pre></div><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button>js<pre class="shiki shiki-themes github-light github-dark vp-code" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0"><code>import { XFetch } from '@mpxjs/fetch' const newFetch = new XFetch(options) // 生成新的mpx-fetch实例</code></pre></div><h3 id="interceptors" tabindex="-1">interceptors <a class="header-anchor" href="#interceptors" aria-label="Permalink to "interceptors""></a></h3><blockquote>实例属性，用于添加拦截器，包含两个属性，request & response</blockquote><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button>js<pre class="shiki shiki-themes github-light github-dark vp-code" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0"><code>mpx.xfetch.interceptors.request.use(function(config) { console.log(config) // 也可以返回promise return config }) mpx.xfetch.interceptors.response.use(function(res) { console.log(res) // 也可以返回promise return res })</code></pre></div><h3 id="proxy" tabindex="-1">proxy 代理 <a class="header-anchor" href="#proxy" aria-label="Permalink to "proxy 代理{#proxy}""></a></h3><h4 id="setproxy" tabindex="-1">setProxy <a class="header-anchor" href="#setproxy" aria-label="Permalink to "setProxy""></a></h4><blockquote>配置代理项，可以传入一个数组或者一个对象，请求会按设置的规则进行代理</blockquote><ul><li>参数：<code>{Array | Object}</code><ul><li>test<code>object</code><ul><li>url<code>string</code>全路径匹配，规则可以参考<a href="https://www.npmjs.com/package/path-to-regexp" target="_blank" rel="noreferrer">path-to-regexp</a>，也可参考下面的简单示例。<div class="warning custom-block">WARNING如果设置了此项，则 protocol、host、port、path 规则不再生效。此项支持 path-to-regexp 匹配，protocol、host、port、path 为全等匹配。</div></li><li>protocol<code>string</code>待匹配的协议头</li><li>host<code>string</code>不包含端口的 host</li><li>port<code>string</code>待匹配的端口</li><li>path<code>string</code>待匹配的路径</li><li>params<code>object</code>同时匹配请求中的 <code>params</code> 和 <code>query</code></li><li>data<code>object</code>匹配请求中的 <code>data</code></li><li>header<code>object</code>匹配请求中的 <code>header</code></li><li>method<code>Method | Method[]</code>匹配请求方法，不区分大小写，可以传一个方法，也可以传一个方法数组</li><li>custom<code>function</code>自定义匹配规则，参数会注入原始请求配置，结果需返回 <code>true</code> 或 <code>false</code><div class="warning custom-block">WARNING如果设置了此项，匹配结果以此项为准，以上规则均不再生效。</div></li></ul></li><li>proxy<code>object</code><ul><li>url<code>string</code>代理的 url</li><li>protocol<code>string</code>修改原请求的协议头</li><li>host<code>string</code>代理的 host，不包含端口号</li><li>port<code>string</code>修改端口号</li><li>path<code>string</code>修改原请求路径</li><li>params<code>object</code>合并原请求的 params</li><li>data<code>object</code>合并原请求的 data</li><li>header<code>object</code>合并原请求的 header</li><li>method<code>Method</code>替换原请求的方法</li><li>custom<code>function</code>自定义代理规则，会注入两个参数，第一个是上一个匹配规则处理后的请求配置，第二个是 match 的参数对象，结果需返回要修改的请求配置对象。<div class="warning custom-block">WARNING如果设置了此项，最终代理配置将以此项为准，其他配置规则均不再生效。</div></li></ul></li><li>waterfall<code>boolean</code>默认为 <code>false</code>，为 <code>false</code> 时，命中当前规则处理完就直接返回；为 <code>true</code> 时，命中当前匹配规则处理完成后将结果传递给下面命中匹配规则继续处理。</li></ul></li></ul><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button>js<pre class="shiki shiki-themes github-light github-dark vp-code" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0"><code>mpx.xfetch.setProxy([{ test: { // 此项匹配之后，会按下面 proxy 配置的修改请求配置 header: { 'content-type': 'application/x-www-form-urlencoded' }, method: 'get', params: { a: 1 }, data: { test1: 'abc' } }, proxy: { header: { env: 'env test' }, params: { b: 2 }, data: { test2: 'cba' } }, waterfall: true // 为 true 时会将此次修改后的请求配置继续传递给下面的规则处理 }, { test: {// 可以分别单独匹配 protocol、host、port、path；代理规则同样 protocol: 'http:', host: 'mock.didi.com', port: '', path: '/mock/test' }, proxy: { host: 'test.didi.com', port: 8888 }, waterfall: true }, { test: { // 自定义匹配规则 custom (config) { // config 为原始的请求配置 // 自定义匹配逻辑 if (xxx) { return true } return false } }, proxy: { // 自定义代理配置 custom (config, params) { // config 为上面匹配后修改过的请求配置 // params 为 match 后的参数对象 // 返回需要修改的请求配置对象 return { params: { c: 3 }, data: { test3: 'aaa' } } } }, waterfall: true }, { test: { // : 可以匹配目标项，并将 match 结果返回到代理 custom 函数中 // :和?都属于保留符号，若不想做匹配时需用 '\\' 转义 // (.*)为全匹配 url: ':protocol\\://mock.didi.com/mock/:id/oneapi/router/forum/api/v1/(.*)', method: ['get', 'post'] }, proxy: { url: 'https://127.0.0.1:8080/go/into/$id/api/v2/abcd' // '$'项在代理生效后会替换匹配规则中的':'项 }, waterfall: false // false 时不会继续匹配后面的规则 }])</code></pre></div><h4 id="prependproxy" tabindex="-1">prependProxy <a class="header-anchor" href="#prependproxy" aria-label="Permalink to "prependProxy""></a></h4><blockquote>向前追加代理规则</blockquote><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button>js<pre class="shiki shiki-themes github-light github-dark vp-code" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0"><code>mpx.xfetch.prependProxy({ test: {}, proxy: {}, waterfall: true })</code></pre></div><h4 id="appendproxy" tabindex="-1">appendProxy <a class="header-anchor" href="#appendproxy" aria-label="Permalink to "appendProxy""></a></h4><blockquote>向后追加代理规则</blockquote><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button>js<pre class="shiki shiki-themes github-light github-dark vp-code" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0"><code>mpx.xfetch.appendProxy({ test: {}, proxy: {}, waterfall: true })</code></pre></div><h4 id="getproxy" tabindex="-1">getProxy <a class="header-anchor" href="#getproxy" aria-label="Permalink to "getProxy""></a></h4><blockquote>查看已有的代理配置</blockquote><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button>js<pre class="shiki shiki-themes github-light github-dark vp-code" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0"><code>console.log(mpx.xfetch.getProxy())</code></pre></div><h4 id="clearproxy" tabindex="-1">clearProxy <a class="header-anchor" href="#clearproxy" aria-label="Permalink to "clearProxy""></a></h4><blockquote>解除所有的代理配置</blockquote><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button>js<pre class="shiki shiki-themes github-light github-dark vp-code" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0"><code>mpx.xfetch.clearProxy()</code></pre></div><h3 id="usefetch" tabindex="-1">useFetch <a class="header-anchor" href="#usefetch" aria-label="Permalink to "useFetch""></a></h3><div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button>ts<pre class="shiki shiki-themes github-light github-dark vp-code" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0"><code>useFetch(options?: FetchOptions):xfetch</code></pre></div>在组合式 API 中使用，用来获取 <code>@mpxjs/fetch</code> 插件的 xfetch 实例，等用于 <code>mpx.xfetch</code>。关于 xfetch 实例的详细介绍，请点击<a href="/api/extend.html#mpx-fetch">查看</a>此外该方法可选择传入 <code>options</code> 参数，若传入参数，则会创建一个新的 XFetch 实例返回，若不传入参数，则默认将全局 <code>xfetch</code> 实例返回。<div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button>js<pre class="shiki shiki-themes github-light github-dark vp-code" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0"><code>// app.mpx import mpx from '@mpxjs/core' import mpxFetch from '@mpxjs/fetch' mpx.use(mpxFetch) // script-setup.mpx import { useFetch } from '@mpxjs/fetch' useFetch().fetch({ url: 'http://xxx.com', method: 'POST', params: { age: 10 }, data: { name: 'test' }, emulateJSON: true, usePre: true, cacheInvalidationTime: 3000, ignorePreParamKeys: ['timestamp'] }).then(res => { console.log(res.data) })</code></pre></div><ul><li>注意： options 参数同 <a href="./extend.html#XFetch">XFetch</a> 章节。</li></ul><h2 id="api-proxy" tabindex="-1">api-proxy <a class="header-anchor" href="#api-proxy" aria-label="Permalink to "api-proxy""></a></h2>Mpx目前已经支持的API转换列表，供参考<table tabindex="0"><thead><tr><th>方法/平台</th><th style="text-align:center;">wx</th><th style="text-align:center;">ali</th><th style="text-align:center;">web</th><th style="text-align:center;">RN</th></tr></thead><tbody><tr><td>getSystemInfo</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td></tr><tr><td>getSystemInfoSync</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td></tr><tr><td>getDeviceInfo</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td></tr><tr><td>getWindowInfo</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td></tr><tr><td>getLaunchOptionsSync</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td></tr><tr><td>getEnterOptionsSync</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td></tr><tr><td>nextTick</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">❌</td></tr><tr><td>showToast</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">❌</td></tr><tr><td>hideToast</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">❌</td></tr><tr><td>showModal</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">❌</td></tr><tr><td>showLoading</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">❌</td></tr><tr><td>hideLoading</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">❌</td></tr><tr><td>showActionSheet</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">❌</td></tr><tr><td>createAnimation</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td></tr><tr><td>onAppShow</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td></tr><tr><td>onAppHide</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td></tr><tr><td>offAppShow</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td></tr><tr><td>offAppHide</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td></tr><tr><td>onError</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td></tr><tr><td>offError</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td></tr><tr><td>onUnhandledRejection</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td></tr><tr><td>offUnhandledRejection</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td></tr><tr><td>createInnerAudioContext</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">❌</td></tr><tr><td>closeBLEConnection</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">❌</td><td style="text-align:center;">❌</td></tr><tr><td>createBLEConnection</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">❌</td><td style="text-align:center;">❌</td></tr><tr><td>onBLEConnectionStateChange</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">❌</td><td style="text-align:center;">❌</td></tr><tr><td>createIntersectionObserver</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">❌</td><td style="text-align:center;">❌</td></tr><tr><td>createSelectorQuery</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td></tr><tr><td>getExtConfig</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">❌</td><td style="text-align:center;">❌</td></tr><tr><td>getExtConfigSync</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">❌</td><td style="text-align:center;">❌</td></tr><tr><td>onKeyboardHeightChange</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">❌</td><td style="text-align:center;">✅</td></tr><tr><td>offKeyboardHeightChange</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">❌</td><td style="text-align:center;">✅</td></tr><tr><td>hideKeyboard</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">❌</td><td style="text-align:center;">✅</td></tr><tr><td>getLocation</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td></tr><tr><td>openLocation</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">❌</td><td style="text-align:center;">❌</td></tr><tr><td>chooseLocation</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">❌</td><td style="text-align:center;">❌</td></tr><tr><td>pageScrollTo</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">❌</td></tr><tr><td>stopPullDownRefresh</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">❌</td></tr><tr><td>startPullDownRefresh</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">❌</td></tr><tr><td>redirectTo</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td></tr><tr><td>navigateTo</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td></tr><tr><td>navigateBack</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td></tr><tr><td>reLaunch</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td></tr><tr><td>switchTab</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">❌</td></tr><tr><td>setTabBarItem</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">❌</td></tr><tr><td>setTabBarStyle</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">❌</td></tr><tr><td>showTabBar</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">❌</td></tr><tr><td>hideTabBar</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">❌</td></tr><tr><td>vibrateShort</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">❌</td><td style="text-align:center;">✅</td></tr><tr><td>vibrateLong</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">❌</td><td style="text-align:center;">✅</td></tr><tr><td>showNavigationBarLoading</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">❌</td><td style="text-align:center;">❌</td></tr><tr><td>hideNavigationBarLoading</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">❌</td><td style="text-align:center;">❌</td></tr><tr><td>setNavigationBarTitle</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td></tr><tr><td>setNavigationBarColor</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td></tr><tr><td>request</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td></tr><tr><td>downloadFile</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">❌</td><td style="text-align:center;">✅</td></tr><tr><td>uploadFile</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">❌</td><td style="text-align:center;">❌</td></tr><tr><td>setStorage</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td></tr><tr><td>setStorageSync</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">❌</td></tr><tr><td>removeStorage</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td></tr><tr><td>removeStorageSync</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td></tr><tr><td>getStorage</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td></tr><tr><td>getStorageSync</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">❌</td></tr><tr><td>getStorageInfo</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td></tr><tr><td>getStorageInfoSync</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">❌</td></tr><tr><td>clearStorage</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td></tr><tr><td>clearStorageSync</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td></tr><tr><td>saveImageToPhotosAlbum</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">❌</td><td style="text-align:center;">❌</td></tr><tr><td>previewImage</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">❌</td><td style="text-align:center;">❌</td></tr><tr><td>compressImage</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">❌</td><td style="text-align:center;">❌</td></tr><tr><td>chooseImage</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">❌</td><td style="text-align:center;">❌</td></tr><tr><td>getImageInfo</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td></tr><tr><td>getLocation</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">❌</td><td style="text-align:center;">❌</td></tr><tr><td>saveFile</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">❌</td><td style="text-align:center;">❌</td></tr><tr><td>removeSavedFile</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">❌</td><td style="text-align:center;">❌</td></tr><tr><td>getSavedFileList</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">❌</td><td style="text-align:center;">❌</td></tr><tr><td>getSavedFileInfo</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">❌</td><td style="text-align:center;">❌</td></tr><tr><td>addPhoneContact</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">❌</td><td style="text-align:center;">❌</td></tr><tr><td>setClipboardData</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">❌</td><td style="text-align:center;">✅</td></tr><tr><td>getClipboardData</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">❌</td><td style="text-align:center;">✅</td></tr><tr><td>setScreenBrightness</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">❌</td><td style="text-align:center;">✅</td></tr><tr><td>getScreenBrightness</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">❌</td><td style="text-align:center;">✅</td></tr><tr><td>makePhoneCall</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">❌</td><td style="text-align:center;">✅</td></tr><tr><td>stopAccelerometer</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">❌</td><td style="text-align:center;">❌</td></tr><tr><td>startAccelerometer</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">❌</td><td style="text-align:center;">❌</td></tr><tr><td>stopCompass</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">❌</td><td style="text-align:center;">❌</td></tr><tr><td>startCompass</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">❌</td><td style="text-align:center;">❌</td></tr><tr><td>stopGyroscope</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">❌</td><td style="text-align:center;">❌</td></tr><tr><td>startGyroscope</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">❌</td><td style="text-align:center;">❌</td></tr><tr><td>scanCode</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">❌</td><td style="text-align:center;">❌</td></tr><tr><td>login</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">❌</td><td style="text-align:center;">❌</td></tr><tr><td>checkSession</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">❌</td><td style="text-align:center;">❌</td></tr><tr><td>getUserInfo</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">❌</td><td style="text-align:center;">❌</td></tr><tr><td>requestPayment</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">❌</td><td style="text-align:center;">❌</td></tr><tr><td>createCanvasContext</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">❌</td><td style="text-align:center;">❌</td></tr><tr><td>canvasToTempFilePath</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">❌</td><td style="text-align:center;">❌</td></tr><tr><td>canvasPutImageData</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">❌</td><td style="text-align:center;">❌</td></tr><tr><td>canvasGetImageData</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">❌</td><td style="text-align:center;">❌</td></tr><tr><td>createSelectorQuery</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">❌</td></tr><tr><td>onWindowResize</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td></tr><tr><td>offWindowResize</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td></tr><tr><td>arrayBufferToBase64</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td></tr><tr><td>base64ToArrayBuffer</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td></tr><tr><td>connectSocket</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td></tr><tr><td>getNetworkType</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td></tr><tr><td>onNetworkStatusChange</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td></tr><tr><td>offNetworkStatusChange</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td></tr><tr><td>createVideoContext</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">❌</td></tr></tbody></table><h2 id="webview-bridge" tabindex="-1">webview-bridge <a class="header-anchor" href="#webview-bridge" aria-label="Permalink to "webview-bridge""></a></h2>Mpx 支持小程序跨平台后，多个平台的小程序里都提供了 webview 组件，webview 打开的 H5 页面可以通过小程序提供的 API 来与小程序通信以及调用一些小程序的能力，但是各家小程序对于 webview 提供的API是不一样的。比如微信的 webview 打开的 H5 页面里是通过调用 wx.miniProgram.navigateTo 来跳转到原生小程序页面的，而在支付宝是通过调用 my.navigateTo 来实现跳转的，那么我们开发 H5 时候为了让 H5 能适应各家小程序平台就需要写多份对应逻辑。为解决这个问题，Mpx 提供了抹平平台差异的bridge库：@mpxjs/webview-bridge。安装：<div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button>js<pre class="shiki shiki-themes github-light github-dark vp-code" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0"><code>npm install @mpxjs/webview-bridge</code></pre></div>使用：<div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button>js<pre class="shiki shiki-themes github-light github-dark vp-code" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0"><code>import mpx from '@mpxjs/webview-bridge' mpx.navigateBack() mpx.env // 输出：wx/qq/ali/baidu/tt mpx.checkJSApi()</code></pre></div>cdn地址引用：<div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button>js<pre class="shiki shiki-themes github-light github-dark vp-code" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0"><code> <script src="https://dpubstatic.udache.com/static/dpubimg/D2JeLyT0_Y/2.2.43.webviewbridge.js"></script>  <script src="https://dpubstatic.udache.com/static/dpubimg/PRg145LZ-i/2.2.43.webviewbridge.min.js"></script>  // index.html <script type="module" src="https://dpubstatic.udache.com/static/dpubimg/6MQOo-ocI4/2.2.43.webviewbridge.esm.browser.min.js"></script> // main.js import mpx from "https://dpubstatic.udache.com/static/dpubimg/6MQOo-ocI4/2.2.43.webviewbridge.esm.browser.min.js" //ES Module 开发版本地址： https://dpubstatic.udache.com/static/dpubimg/cdhpNhmWmJ/2.2.43.webviewbridge.esm.browser.js</code></pre></div>基础方法提供：<table tabindex="0"><thead><tr><th>方法/平台</th><th style="text-align:center;">wx</th><th style="text-align:center;">qq</th><th style="text-align:center;">ali</th><th style="text-align:center;">baidu</th><th style="text-align:right;">tt</th></tr></thead><tbody><tr><td>navigateTo</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:right;">✅</td></tr><tr><td>navigateBack</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:right;">✅</td></tr><tr><td>switchTab</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:right;">✅</td></tr><tr><td>reLaunch</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:right;">✅</td></tr><tr><td>redirectTo</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:right;">✅</td></tr><tr><td>getEnv</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:right;">✅</td></tr><tr><td>postMessage</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:right;">✅</td></tr><tr><td>getLoadError</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:right;">✅</td></tr><tr><td>onMessage</td><td style="text-align:center;">❌</td><td style="text-align:center;">❌</td><td style="text-align:center;">✅</td><td style="text-align:center;">❌</td><td style="text-align:right;">❌</td></tr></tbody></table>扩展方法提供：<table tabindex="0"><thead><tr><th>方法/平台</th><th style="text-align:center;">wx</th><th style="text-align:center;">qq</th><th style="text-align:center;">ali</th><th style="text-align:center;">baidu</th><th style="text-align:right;">tt</th></tr></thead><tbody><tr><td>checkJSApi</td><td style="text-align:center;">✅</td><td style="text-align:center;">❌</td><td style="text-align:center;">❌</td><td style="text-align:center;">❌</td><td style="text-align:right;">❌</td></tr><tr><td>chooseImage</td><td style="text-align:center;">✅</td><td style="text-align:center;">❌</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:right;">❌</td></tr><tr><td>previewImage</td><td style="text-align:center;">✅</td><td style="text-align:center;">❌</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:right;">❌</td></tr><tr><td>uploadImage</td><td style="text-align:center;">✅</td><td style="text-align:center;">❌</td><td style="text-align:center;">❌</td><td style="text-align:center;">❌</td><td style="text-align:right;">❌</td></tr><tr><td>downloadImage</td><td style="text-align:center;">✅</td><td style="text-align:center;">❌</td><td style="text-align:center;">❌</td><td style="text-align:center;">❌</td><td style="text-align:right;">❌</td></tr><tr><td>getLocalImgData</td><td style="text-align:center;">✅</td><td style="text-align:center;">❌</td><td style="text-align:center;">❌</td><td style="text-align:center;">❌</td><td style="text-align:right;">❌</td></tr><tr><td>startRecord</td><td style="text-align:center;">✅</td><td style="text-align:center;">❌</td><td style="text-align:center;">❌</td><td style="text-align:center;">❌</td><td style="text-align:right;">❌</td></tr><tr><td>stopRecord</td><td style="text-align:center;">✅</td><td style="text-align:center;">❌</td><td style="text-align:center;">❌</td><td style="text-align:center;">❌</td><td style="text-align:right;">❌</td></tr><tr><td>onVoiceRecordEnd</td><td style="text-align:center;">✅</td><td style="text-align:center;">❌</td><td style="text-align:center;">❌</td><td style="text-align:center;">❌</td><td style="text-align:right;">❌</td></tr><tr><td>playVoice</td><td style="text-align:center;">✅</td><td style="text-align:center;">❌</td><td style="text-align:center;">❌</td><td style="text-align:center;">❌</td><td style="text-align:right;">❌</td></tr><tr><td>pauseVoice</td><td style="text-align:center;">✅</td><td style="text-align:center;">❌</td><td style="text-align:center;">❌</td><td style="text-align:center;">❌</td><td style="text-align:right;">❌</td></tr><tr><td>stopVoice</td><td style="text-align:center;">✅</td><td style="text-align:center;">❌</td><td style="text-align:center;">❌</td><td style="text-align:center;">❌</td><td style="text-align:right;">❌</td></tr><tr><td>onVoicePlayEnd</td><td style="text-align:center;">✅</td><td style="text-align:center;">❌</td><td style="text-align:center;">❌</td><td style="text-align:center;">❌</td><td style="text-align:right;">❌</td></tr><tr><td>uploadVoice</td><td style="text-align:center;">✅</td><td style="text-align:center;">❌</td><td style="text-align:center;">❌</td><td style="text-align:center;">❌</td><td style="text-align:right;">❌</td></tr><tr><td>downloadVoice</td><td style="text-align:center;">✅</td><td style="text-align:center;">❌</td><td style="text-align:center;">❌</td><td style="text-align:center;">❌</td><td style="text-align:right;">❌</td></tr><tr><td>translateVoice</td><td style="text-align:center;">✅</td><td style="text-align:center;">❌</td><td style="text-align:center;">❌</td><td style="text-align:center;">❌</td><td style="text-align:right;">❌</td></tr><tr><td>getNetworkType</td><td style="text-align:center;">✅</td><td style="text-align:center;">❌</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:right;">❌</td></tr><tr><td>openLocation</td><td style="text-align:center;">✅</td><td style="text-align:center;">❌</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:right;">❌</td></tr><tr><td>getLocation</td><td style="text-align:center;">✅</td><td style="text-align:center;">❌</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:right;">❌</td></tr><tr><td>stopSearchBeacons</td><td style="text-align:center;">✅</td><td style="text-align:center;">❌</td><td style="text-align:center;">❌</td><td style="text-align:center;">❌</td><td style="text-align:right;">❌</td></tr><tr><td>onSearchBeacons</td><td style="text-align:center;">✅</td><td style="text-align:center;">❌</td><td style="text-align:center;">❌</td><td style="text-align:center;">❌</td><td style="text-align:right;">❌</td></tr><tr><td>scanQRCode</td><td style="text-align:center;">✅</td><td style="text-align:center;">❌</td><td style="text-align:center;">❌</td><td style="text-align:center;">❌</td><td style="text-align:right;">❌</td></tr><tr><td>chooseCard</td><td style="text-align:center;">✅</td><td style="text-align:center;">❌</td><td style="text-align:center;">❌</td><td style="text-align:center;">❌</td><td style="text-align:right;">❌</td></tr><tr><td>addCard</td><td style="text-align:center;">✅</td><td style="text-align:center;">❌</td><td style="text-align:center;">❌</td><td style="text-align:center;">❌</td><td style="text-align:right;">❌</td></tr><tr><td>openCard</td><td style="text-align:center;">✅</td><td style="text-align:center;">❌</td><td style="text-align:center;">❌</td><td style="text-align:center;">❌</td><td style="text-align:right;">❌</td></tr><tr><td>alert</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">❌</td><td style="text-align:center;"></td><td style="text-align:right;"></td></tr><tr><td>showLoading</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">❌</td><td style="text-align:center;"></td><td style="text-align:right;"></td></tr><tr><td>hideLoading</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">❌</td><td style="text-align:center;"></td><td style="text-align:right;"></td></tr><tr><td>setStorage</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;"></td><td style="text-align:right;"></td></tr><tr><td>getStorage</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;"></td><td style="text-align:right;"></td></tr><tr><td>removeStorage</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;"></td><td style="text-align:right;"></td></tr><tr><td>clearStorage</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;"></td><td style="text-align:right;"></td></tr><tr><td>getStorageInfo</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;"></td><td style="text-align:right;"></td></tr><tr><td>startShare</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">❌</td><td style="text-align:center;"></td><td style="text-align:right;"></td></tr><tr><td>tradePay</td><td style="text-align:center;">✅</td><td style="text-align:center;">✅</td><td style="text-align:center;">❌</td><td style="text-align:center;"></td><td style="text-align:right;"></td></tr><tr><td>onMessage</td><td style="text-align:center;">❌</td><td style="text-align:center;">❌</td><td style="text-align:center;">✅</td><td style="text-align:center;">❌</td><td style="text-align:right;">❌</td></tr></tbody></table><div class="warning custom-block">WARNING这个库仅提供给 H5 使用，请勿在小程序环境引入</div><h2 id="size-report" tabindex="-1">size-report <a class="header-anchor" href="#size-report" aria-label="Permalink to "size-report""></a></h2>Mpx框架项目包体积可以进行分组、分包、页面、冗余Npm包等维度的分析和对比，详细<a href="/advance/size-report.html">请见</a><h3 id="插件配置项" tabindex="-1">插件配置项 <a class="header-anchor" href="#插件配置项" aria-label="Permalink to "插件配置项""></a></h3><ul><li>server<code>object</code>本地可视化服务相关配置</li><li>filename<code>string</code>构建生成的包体积详细输出文件地址</li><li>threshold<code>object</code>配置项目总体积和分包体积阈值，包含两个字段，size 为项目总体积阈值，packages 为分包体积阈值<div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button>html<pre class="shiki shiki-themes github-light github-dark vp-code" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0"><code>{ size: '16MB', // 项目总包体积限额 16M packages: '2MB' // 项目每个分包体积限额 2M }</code></pre></div></li><li>groups<code>Array<object></code>配置体积计算分组，以输入分组为维度对体积进行分析，当没有该配置时结果中将不会包含分组体积信息<ul><li>name<code>string</code>分组名称</li><li>threshold<code>string | object</code>分组相关体积阈值，若不配置则该分组不校验体积阈值，同时也支持对分组中占各分包体积阈值<div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button>html<pre class="shiki shiki-themes github-light github-dark vp-code" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0"><code>// 分组体积限额 500KB threshold: '500KB' // 或者如下方，分组体积限额500KB，分组占主包体积限额160KB threshold: { size: '500KB', packages: { main: '160KB' } }</code></pre></div></li><li>entryRules<code>object</code>配置分组 entry 匹配规则，小程序中所有的页面和组件都可被视为 entry<ul><li>include: 包含符合条件的入口文件，默认为空数组，规则数组中支持函数、正则、字符串</li><li>exclude: 剔除符合条件的入口文件，默认为空数组，规则数组中支持函数、正则、字符串</li></ul><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button>html<pre class="shiki shiki-themes github-light github-dark vp-code" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0"><code>include: [/@someGroup\/some-npm-package/], exclude: [/@someGroup\/some-two-pack/]</code></pre></div></li><li>noEntryRules<code>object</code>配置计算分组中纯 js 入口引入的体积（不包含组件和页面）<ul><li>include: 包含符合条件的 js 文件，默认为空数组，规则数组中支持函数、正则、字符串</li><li>exclude: 剔除符合条件的 js 文件，默认为空数组，规则数组中支持函数、正则、字符串</li></ul><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button>html<pre class="shiki shiki-themes github-light github-dark vp-code" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0"><code>include: [/@someGroup\/some-npm-package/], exclude: [/@someGroup\/some-two-pack/]</code></pre></div></li></ul></li><li>reportPages<code>boolean</code>是否收集页面维度体积详情，默认 false</li><li>reportAssets<code>boolean</code>是否收集资源维度体积详情，默认 false</li><li>reportRedundance<code>boolean</code>是否收集冗余资源，默认 false</li><li>showEntrysPackages<code>Array<string></code>展示某些分包资源的引用来源信息，例如 ['main'] 为查看主包资源的引用来源信息，默认为 []</li></ul>配置使用示例：<div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button>html<pre class="shiki shiki-themes github-light github-dark vp-code" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0"><code>{ // 本地可视化服务相关配置 server: { enable: true, // 是否启动本地服务，非必填，默认 true autoOpenBrowser: true, // 是否自动打开可视化平台页面，非必填，默认 true port: 0, // 本地服务端口，非必填，默认 0(随机端口) host: '127.0.0.1', // 本地服务host，非必填 }, // 体积报告生成后输出的文件地址名，路径相对为 dist/wx 或者 dist/ali filename: '../report.json', // 配置阈值，此处代表总包体积阈值为 16MB，分包体积阈值为 2MB，超出将会触发编译报错提醒，该报错不阻断构建 threshold: { size: '16MB', packages: '2MB' }, // 配置体积计算分组，以输入分组为维度对体积进行分析，当没有该配置时结果中将不会包含分组体积信息 groups: [ { // 分组名称 name: 'vant', // 配置分组 entry 匹配规则，小程序中所有的页面和组件都可被视为 entry，如下所示的分组配置将计算项目中引入的 vant 组件带来的体积占用 entryRules: { include: '@vant/weapp' } }, { name: 'pageGroup', // 每个分组中可分别配置阈值，如果不配置则表示 threshold: '500KB', entryRules: { include: ['src/pages/index', 'src/pages/user'] } }, { name: 'someSdk', entryRules: { include: ['@somegroup/someSdk/index', '@somegroup/someSdk2/index'] }, // 有的时候你可能希望计算纯 js 入口引入的体积（不包含组件和页面），这种情况下需要使用 noEntryRules noEntryRules: { include: 'src/lib/sdk.js' } } ], // 是否收集页面维度体积详情，默认 false reportPages: true, // 是否收集资源维度体积详情，默认 false reportAssets: true, // 是否收集冗余资源，默认 false reportRedundance: true, // 展示某些分包资源的引用来源信息，默认为 [] showEntrysPackages: ['main'] }</code></pre></div><h2 id="i18n" tabindex="-1">i18n <a class="header-anchor" href="#i18n" aria-label="Permalink to "i18n""></a></h2><h3 id="usei18n" tabindex="-1">useI18n <a class="header-anchor" href="#usei18n" aria-label="Permalink to "useI18n""></a></h3>组合式 API 中使用，用来获取 i18n 实例。参数选项<hr><h4 id="locale" tabindex="-1">locale <a class="header-anchor" href="#locale" aria-label="Permalink to "locale""></a></h4><code>Locale</code>设置语言环境注意： 只传 locale，不传 messages 属性时不起作用<h4 id="fallbacklocale" tabindex="-1">fallbackLocale <a class="header-anchor" href="#fallbacklocale" aria-label="Permalink to "fallbackLocale""></a></h4><code>Locale</code>预设的语言环境，找不到语言环境时进行回退。<h4 id="messages" tabindex="-1">messages <a class="header-anchor" href="#messages" aria-label="Permalink to "messages""></a></h4><code>LocaleMessages</code>本地化的语言环境信息。返回实例属性和方法<hr><h4 id="locale-1" tabindex="-1">locale <a class="header-anchor" href="#locale-1" aria-label="Permalink to "locale""></a></h4><code>WritableComputedRef<Locale></code>可响应性的 ref 对象，表示当前 i18n 实例所使用的 locale。修改 ref 值会对局部或者全局语言集的 locale 进行更改，并触发翻译方法重新执行。<h4 id="fallbackroot" tabindex="-1">fallbackRoot <a class="header-anchor" href="#fallbackroot" aria-label="Permalink to "fallbackRoot""></a></h4><code>boolean</code>本地化失败时是否回归到全局作用域。<h4 id="getlocalemessage-locale" tabindex="-1">getLocaleMessage( locale ) <a class="header-anchor" href="#getlocalemessage-locale" aria-label="Permalink to "getLocaleMessage( locale )""></a></h4><div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button>ts<pre class="shiki shiki-themes github-light github-dark vp-code" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0"><code>function getLocaleMessage (locale: string): LocaleMessageObject</code></pre></div>获取语言环境的 <code>locale</code> 信息。<h4 id="setlocalemessage-locale-message" tabindex="-1">setLocaleMessage( locale, message ) <a class="header-anchor" href="#setlocalemessage-locale-message" aria-label="Permalink to "setLocaleMessage( locale, message )""></a></h4><div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button>ts<pre class="shiki shiki-themes github-light github-dark vp-code" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0"><code>function setLocaleMessage(locale: Locale, messages: LocaleMessageObject): void</code></pre></div>设置语言环境的 <code>locale</code> 信息。<h4 id="mergelocalemessage-locale-message" tabindex="-1">mergeLocaleMessage( locale, message ) <a class="header-anchor" href="#mergelocalemessage-locale-message" aria-label="Permalink to "mergeLocaleMessage( locale, message )""></a></h4><div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button>ts<pre class="shiki shiki-themes github-light github-dark vp-code" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0"><code>function mergeLocaleMessage(locale: Locale, messages: LocaleMessageObject): void</code></pre></div>将语言环境信息 <code>locale</code> 合并到已注册的语言环境信息中。<h4 id="messages-1" tabindex="-1">messages <a class="header-anchor" href="#messages-1" aria-label="Permalink to "messages""></a></h4><div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button>ts<pre class="shiki shiki-themes github-light github-dark vp-code" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0"><code>readonly messages: ComputedRef<{ [K in keyof Messages]: Messages[K]; }>;</code></pre></div><ul><li>只读</li></ul>局部或者全局的语言环境信息。<h4 id="isglobal" tabindex="-1">isGlobal <a class="header-anchor" href="#isglobal" aria-label="Permalink to "isGlobal""></a></h4><code>boolean</code>是否是全局 i18n 实例。<h4 id="t" tabindex="-1">t <a class="header-anchor" href="#t" aria-label="Permalink to "t""></a></h4><div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button>ts<pre class="shiki shiki-themes github-light github-dark vp-code" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0"><code>function t(key: string, choice?: number, values: Array | Object): TranslateResult</code></pre></div>文案翻译函数根据传入的 key 以及当前 locale 环境获取对应文案，文案来源是全局作用域还是本地作用域取决于 <code>useI18n</code> 执行时是否传入对应的 <code>messages、locale</code> 等值。choice 参数可选 ，当传入 choice 时，t 函数的表现为使用复数进行翻译，和老版本中的 tc 函数表现一致。<div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button>html<pre class="shiki shiki-themes github-light github-dark vp-code" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0"><code><template> <view>{{t('car', 1)}}</view> <view>{{t('car', 2)}}</view> <view>{{t('apple', 0)}}</view> <view>{{t('apple', 1)}}</view> <view>{{t('apple', 10, {count: 10})}}</view> </template> <script> // 语言环境信息如下： const messages = { en: { car: 'car | cars', apple: 'no apples | one apple | {count} apples' } } </script></code></pre></div>输入如下：<div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button>html<pre class="shiki shiki-themes github-light github-dark vp-code" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0"><code><view>car</view> <view>cars</view> <view>no apples</view> <view>one apple</view> <view>10 apples</view></code></pre></div>关于复数的更多信息可以点击<a href="https://kazupon.github.io/vue-i18n/zh/guide/pluralization.html#%E5%A4%8D%E6%95%B0" target="_blank" rel="noreferrer">查看</a>values 参数可选 ，如果需要对文案信息即逆行格式化处理，则需要传入 values。<div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button>html<pre class="shiki shiki-themes github-light github-dark vp-code" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0"><code><template> // 模版输出 hello world <view>{{t('message.hello', { msg: 'hello'})}}</view> </template> <script> import {createComponent, useI18n} from "@mpxjs/core" const messages = { en: { message: { hello: '{msg} world' } } } createComponent({ setup(){ const { t } = useI18n({ messages: { 'en-US': en } }) return {t} } }) </script></code></pre></div><h4 id="te" tabindex="-1">te <a class="header-anchor" href="#te" aria-label="Permalink to "te""></a></h4><div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button>ts<pre class="shiki shiki-themes github-light github-dark vp-code" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0"><code>function te(key: string): boolean</code></pre></div>检查 key 是否存在。</div></div></main><footer class="VPDocFooter" data-v-39a288b8 data-v-e257564d><div class="edit-info" data-v-e257564d><div class="last-updated" data-v-e257564d>最后更新于: <time datetime="2025-01-15T10:07:24.000Z" data-v-e98dd255></time></div></div><nav class="prev-next" aria-labelledby="doc-footer-aria-label" data-v-e257564d>Pager<div class="pager" data-v-e257564d><a class="VPLink link pager-link prev" href="/api/optional-api.html" data-v-e257564d>上一页选项式 API</a></div><div class="pager" data-v-e257564d></div></nav></footer></div></div></div></div></div></div></div></div></div> <script>window.__VP_HASH_MAP__=JSON.parse("{\"api_app-config.md\":\"8yUvMnrA\",\"api_builtin.md\":\"zC7lHwxi\",\"api_compile.md\":\"5MYyG7PG\",\"api_composition-api.md\":\"Clk-dbRQ\",\"api_directives.md\":\"Iz0_eRUW\",\"api_extend.md\":\"COshM7be\",\"api_global-api.md\":\"DekFw7fO\",\"api_index.md\":\"DWA54RPB\",\"api_instance-api.md\":\"D7wqBPPP\",\"api_optional-api.md\":\"C9RjUBcS\",\"api_reactivity-api.md\":\"Br0_H2qt\",\"api_store-api.md\":\"D58j1Loq\",\"articles_1.0.md\":\"CX3uMEvE\",\"articles_2.0.md\":\"BiE2-Btj\",\"articles_2.7-release.md\":\"CtxTlBaz\",\"articles_2.8-release-alter.md\":\"O870wUeV\",\"articles_2.8-release.md\":\"DUJxybJv\",\"articles_2.9-release-alter.md\":\"B0zILKuf\",\"articles_2.9-release.md\":\"-fAvpoEu\",\"articles_index.md\":\"PgSaR_s8\",\"articles_mpx-cli-next.md\":\"DLApcxVv\",\"articles_mpx-cube-ui.md\":\"DPiau_2k\",\"articles_mpx1.md\":\"CPF70K1U\",\"articles_mpx2.md\":\"ChNa77kM\",\"articles_performance.md\":\"BF8yiIIl\",\"articles_size-control.md\":\"DH0nqEH7\",\"articles_ts-derivation.md\":\"Y2VtWgAq\",\"articles_unit-test.md\":\"D45q9SRT\",\"desc.md\":\"CRM-d_8c\",\"guide_advance_ability-compatible.md\":\"DUUqlGU1\",\"guide_advance_async-subpackage.md\":\"YdRmCpxD\",\"guide_advance_build-config.md\":\"CK_KSb3r\",\"guide_advance_custom-output-path.md\":\"CcDbiRF1\",\"guide_advance_dll-plugin.md\":\"CtchVSg7\",\"guide_advance_i18n.md\":\"D7eAH4JX\",\"guide_advance_image-process.md\":\"R7ATnHM_\",\"guide_advance_mixin.md\":\"BA5vitiz\",\"guide_advance_npm.md\":\"Cel872y9\",\"guide_advance_pinia.md\":\"D3A9y0Gw\",\"guide_advance_platform.md\":\"C-a6y7Wp\",\"guide_advance_plugin.md\":\"EgOm6-ei\",\"guide_advance_progressive.md\":\"DJ7EwCPw\",\"guide_advance_provide-inject.md\":\"FHPTn5Pf\",\"guide_advance_resource-resolve.md\":\"CQ0_dCIQ\",\"guide_advance_size-report.md\":\"DsRaf5lZ\",\"guide_advance_ssr.md\":\"Dighccx3\",\"guide_advance_store.md\":\"RxkbMHcD\",\"guide_advance_subpackage.md\":\"BO3rQ_SJ\",\"guide_advance_utility-first-css.md\":\"DRTXuxCL\",\"guide_basic_class-style-binding.md\":\"CHjIhjm9\",\"guide_basic_component.md\":\"BVlz4Z0G\",\"guide_basic_conditional-render.md\":\"CqWMRF4_\",\"guide_basic_css.md\":\"CMhUuiRO\",\"guide_basic_event.md\":\"CJro7QhD\",\"guide_basic_ide.md\":\"J6p9ySwr\",\"guide_basic_intro.md\":\"BQ5nSHat\",\"guide_basic_list-render.md\":\"DJ0nmxdg\",\"guide_basic_option-chain.md\":\"1crAkqm-\",\"guide_basic_reactive.md\":\"ZEZ7uVds\",\"guide_basic_refs.md\":\"BlYk9tcG\",\"guide_basic_single-file.md\":\"pOorh032\",\"guide_basic_start.md\":\"DsaWQHXU\",\"guide_basic_template.md\":\"Bcxqv41D\",\"guide_basic_two-way-binding.md\":\"B_KA2k94\",\"guide_composition-api_composition-api.md\":\"Bh8pACFE\",\"guide_composition-api_reactive-api.md\":\"WOHtEb5G\",\"guide_extend_api-proxy.md\":\"CKVZi01O\",\"guide_extend_fetch.md\":\"DoVBrdcs\",\"guide_extend_index.md\":\"B-AnIYDs\",\"guide_extend_mock.md\":\"CfZHEPBA\",\"guide_migrate_2.7.md\":\"BRNs6PtI\",\"guide_migrate_2.8.md\":\"DUgpXI5-\",\"guide_migrate_2.9.md\":\"DZXr1Vtv\",\"guide_migrate_mpx-cli-3.md\":\"BlX0YUtQ\",\"guide_platform_basic.md\":\"WikgVNAd\",\"guide_platform_miniprogram.md\":\"X8yJCeEN\",\"guide_platform_rn.md\":\"Cw4g6zSW\",\"guide_platform_web.md\":\"CcHiVFzp\",\"guide_tool_e2e-test.md\":\"EMUVz3nW\",\"guide_tool_ts.md\":\"CH10H8U-\",\"guide_tool_unit-test.md\":\"BNWMp2Lt\",\"guide_understand_compile.md\":\"DS5TaIwp\",\"guide_understand_runtime.md\":\"Cc3uol1G\",\"index.md\":\"De5Lhfdz\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"Mpx 框架\",\"description\":\"A VitePress site\",\"base\":\"/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"search\":{\"provider\":\"local\",\"options\":{\"translations\":{\"button\":{\"buttonText\":\"搜索文档\",\"buttonAriaLabel\":\"搜索文档\"},\"modal\":{\"displayDetails\":\"显示详细列表\",\"resetButtonTitle\":\"重置搜索\",\"backButtonTitle\":\"关闭搜索\",\"noResultsText\":\"没有结果\",\"footer\":{\"selectText\":\"选择\",\"selectKeyAriaLabel\":\"输入\",\"navigateText\":\"导航\",\"navigateUpKeyAriaLabel\":\"上箭头\",\"navigateDownKeyAriaLabel\":\"下箭头\",\"closeText\":\"关闭\",\"closeKeyAriaLabel\":\"esc\"}}}}},\"logo\":\"/favicon.ico\",\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/didi/mpx\"}],\"nav\":[{\"text\":\"指南\",\"activeMatch\":\"^/guide/\",\"link\":\"/guide/basic/start\"},{\"text\":\"API\",\"activeMatch\":\"^/api/\",\"link\":\"/api/\"},{\"text\":\"文章\",\"activeMatch\":\"^/articles/\",\"link\":\"/articles/\"},{\"text\":\"更新记录\",\"activeMatch\":\"^/releases/\",\"link\":\"https://github.com/didi/mpx/releases\",\"target\":\"_blank\"}],\"outline\":{\"level\":[2,3],\"label\":\"本页目录\"},\"sidebar\":{\"/guide/\":[{\"text\":\"基础\",\"collapsable\":false,\"items\":[{\"text\":\"快速开始\",\"link\":\"/guide/basic/start\"},{\"text\":\"介绍\",\"link\":\"/guide/basic/intro\"},{\"text\":\"单文件开发\",\"link\":\"/guide/basic/single-file\"},{\"text\":\"IDE 高亮配置\",\"link\":\"/guide/basic/ide\"},{\"text\":\"模板语法\",\"link\":\"/guide/basic/template\"},{\"text\":\"CSS 处理\",\"link\":\"/guide/basic/css\"},{\"text\":\"数据响应\",\"link\":\"/guide/basic/reactive\"},{\"text\":\"类名样式绑定\",\"link\":\"/guide/basic/class-style-binding\"},{\"text\":\"条件渲染\",\"link\":\"/guide/basic/conditional-render\"},{\"text\":\"列表渲染\",\"link\":\"/guide/basic/list-render\"},{\"text\":\"事件处理\",\"link\":\"/guide/basic/event\"},{\"text\":\"双向绑定\",\"link\":\"/guide/basic/two-way-binding\"},{\"text\":\"自定义组件\",\"link\":\"/guide/basic/component\"},{\"text\":\"获取组件实例/节点信息\",\"link\":\"/guide/basic/refs\"},{\"text\":\"模版内可选链表达式\",\"link\":\"/guide/basic/option-chain\"}]},{\"text\":\"进阶\",\"collapsable\":false,\"items\":[{\"text\":\"状态管理（store）\",\"link\":\"/guide/advance/store\"},{\"text\":\"状态管理（pinia）\",\"link\":\"/guide/advance/pinia\"},{\"text\":\"使用 mixin\",\"link\":\"/guide/advance/mixin\"},{\"text\":\"使用 npm\",\"link\":\"/guide/advance/npm\"},{\"text\":\"使用分包\",\"link\":\"/guide/advance/subpackage\"},{\"text\":\"分包异步化\",\"link\":\"/guide/advance/async-subpackage\"},{\"text\":\"跨平台\",\"link\":\"/guide/advance/platform\"},{\"text\":\"国际化 i18n\",\"link\":\"/guide/advance/i18n\"},{\"text\":\"包体积分析\",\"link\":\"/guide/advance/size-report\"},{\"text\":\"图像资源处理\",\"link\":\"/guide/advance/image-process\"},{\"text\":\"原生渐进迁移\",\"link\":\"/guide/advance/progressive\"},{\"text\":\"原生能力兼容\",\"link\":\"/guide/advance/ability-compatible\"},{\"text\":\"小程序插件\",\"link\":\"/guide/advance/plugin\"},{\"text\":\"自定义路径\",\"link\":\"/guide/advance/custom-output-path\"},{\"text\":\"使用原子类\",\"link\":\"/guide/advance/utility-first-css\"},{\"text\":\"SSR\",\"link\":\"/guide/advance/ssr\"},{\"text\":\"依赖注入（Provide/Inject）\",\"link\":\"/guide/advance/provide-inject\"},{\"text\":\"编译配置\",\"link\":\"/guide/advance/build-config\"}]},{\"text\":\"跨端\",\"collapsable\":false,\"items\":[{\"text\":\"跨端输出基础\",\"link\":\"/guide/platform/basic\"},{\"text\":\"跨端输出 RN\",\"link\":\"/guide/platform/rn\"}]},{\"text\":\"组合式 API\",\"collapsable\":false,\"items\":[{\"text\":\"组合式 API\",\"link\":\"/guide/composition-api/composition-api\"},{\"text\":\"响应式 API\",\"link\":\"/guide/composition-api/reactive-api\"}]},{\"text\":\"工具\",\"collapsable\":false,\"items\":[{\"text\":\"使用TypeScript开发小程序\",\"link\":\"/guide/tool/ts\"},{\"text\":\"单元测试\",\"link\":\"/guide/tool/unit-test\"},{\"text\":\"E2E自动化测试\",\"link\":\"/guide/tool/e2e-test\"}]},{\"text\":\"拓展\",\"collapsable\":false,\"items\":[{\"text\":\"网络请求\",\"link\":\"/guide/extend/fetch\"},{\"text\":\"API 转换\",\"link\":\"/guide/extend/api-proxy\"},{\"text\":\"数据 Mock\",\"link\":\"/guide/extend/mock\"}]},{\"text\":\"理解\",\"collapsable\":false,\"items\":[{\"text\":\"Mpx运行时增强原理\",\"link\":\"/guide/understand/runtime\"},{\"text\":\"Mpx编译构建原理\",\"link\":\"/guide/understand/compile\"}]},{\"text\":\"迁移\",\"collapsable\":false,\"items\":[{\"text\":\"从 2.8 升级至 2.9\",\"link\":\"/guide/migrate/2.9\"},{\"text\":\"从 2.7 升级至 2.8\",\"link\":\"/guide/migrate/2.8\"},{\"text\":\"从旧版本迁移至 2.7\",\"link\":\"/guide/migrate/2.7\"},{\"text\":\"mpx-cli v2 迁移到 v3\",\"link\":\"/guide/migrate/mpx-cli-3\"}]}],\"/api/\":[{\"text\":\"API\",\"collapsable\":false,\"items\":[{\"text\":\"API 参考\",\"link\":\"/api/\"},{\"text\":\"全局配置\",\"link\":\"/api/app-config\"},{\"text\":\"全局 API\",\"link\":\"/api/global-api\"},{\"text\":\"实例 API\",\"link\":\"/api/instance-api\"},{\"text\":\"Store API\",\"link\":\"/api/store-api\"},{\"text\":\"模板指令\",\"link\":\"/api/directives\"},{\"text\":\"编译构建\",\"link\":\"/api/compile\"},{\"text\":\"内建组件\",\"link\":\"/api/builtIn\"},{\"text\":\"响应式 API\",\"link\":\"/api/reactivity-api\"},{\"text\":\"组合式 API\",\"link\":\"/api/composition-api\"},{\"text\":\"选项式 API\",\"link\":\"/api/optional-api\"},{\"text\":\"周边拓展\",\"link\":\"/api/extend\"}]}],\"/articles/\":[{\"text\":\"文章\",\"collapsable\":false,\"items\":[{\"text\":\"滴滴开源小程序框架Mpx\",\"link\":\"/articles/1.0\"},{\"text\":\"Mpx 发布2.0，完美支持跨平台开发\",\"link\":\"/articles/2.0\"},{\"text\":\"小程序框架运行时性能大测评\",\"link\":\"/articles/performance\"},{\"text\":\"小程序开发者，为什么你应该尝试下MPX\",\"link\":\"/articles/mpx1\"},{\"text\":\"Mpx 小程序框架技术揭秘\",\"link\":\"/articles/mpx2\"},{\"text\":\"滴滴出行小程序体积优化实践\",\"link\":\"/articles/size-control\"},{\"text\":\"使用Typescript新特性Template Literal Types完善链式key的类型推导\",\"link\":\"/articles/ts-derivation\"},{\"text\":\"Mpx2.7 版本正式发布，大幅提升编译构建速度\",\"link\":\"/articles/2.7-release\"},{\"text\":\"Mpx2.8 版本正式发布，使用组合式 API 开发小程序\",\"link\":\"/articles/2.8-release\"},{\"text\":\"Mpx2.9 版本正式发布，支持原子类、SSR 和包体积优化\",\"link\":\"/articles/2.9-release\"},{\"text\":\"小程序跨端组件库 Mpx-cube-ui 开源啦\",\"link\":\"/articles/mpx-cube-ui\"},{\"text\":\"@mpxjs/cli 插件化改造\",\"link\":\"/articles/mpx-cli-next\"},{\"text\":\"Mpx 小程序单元测试能力建设与实践\",\"link\":\"/articles/unit-test\"}]}]},\"darkModeSwitchLabel\":\"外观\",\"sidebarMenuLabel\":\"菜单\",\"returnToTopLabel\":\"返回顶部\",\"langMenuLabel\":\"语言\",\"notFound\":{\"title\":\"页面未找到\",\"linkText\":\"返回首页\",\"quote\":\"😩 抱歉，迷路了～\"},\"lastUpdated\":{\"text\":\"最后更新于\",\"formatOptions\":{\"dateStyle\":\"short\",\"timeStyle\":\"short\"}},\"docFooter\":{\"prev\":\"上一页\",\"next\":\"下一页\"}},\"locales\":{\"/\":{\"label\":\"中文\",\"lang\":\"zh-CN\",\"title\":\"Mpx 框架\",\"description\":\"深度性能优化的增强型小程序开发框架\"}},\"scrollOffset\":134,\"cleanUrls\":false}");</script> </body> </html>