diff --git a/packages/shims-uni-app.d.ts b/packages/shims-uni-app.d.ts
index 46164f7226bde5656b6cd25fb678ba20db236f95..7f46dc78cfa1f63074133eee2770e30493a89b28 100644
--- a/packages/shims-uni-app.d.ts
+++ b/packages/shims-uni-app.d.ts
@@ -104,17 +104,20 @@ declare namespace UniApp {
   }
 
   interface PageNavigationBar {
-    type?: 'default' | 'transparent' | 'float' | 'none'
+    type?: 'default' | 'transparent' | 'float'
     titleSize?: string
     titleText?: string
     titleImage?: string
-    titleColor?: '#000' | '#fff'
+    titleColor?: '#000000' | '#ffffff'
     timingFunc?: string
     duration?: string
     backgroundColor?: string
     titlePenetrate?: 'YES' | 'NO'
     shadowColorType?: 'grey' | 'blue' | 'green' | 'orange' | 'red' | 'yellow'
-    backButton?: boolean
+    backButton?: Omit<
+      PageNavigationBarButton,
+      'type' | 'float' | 'fontSrc' | 'fontFamily' | 'select' | 'text' | 'width'
+    >
     buttons?: PageNavigationBarButton[]
     searchInput?: PageNavigationBarSearchInput
     style?: 'default' | 'custom'
@@ -149,6 +152,7 @@ declare namespace UniApp {
     refreshOptions?: PageRefreshOptions
     onReachBottomDistance?: number
     pageOrientation?: 'auto' | 'portrait' | 'landscape'
+    backgroundColor?: string
   }
   interface PageRouteMeta extends PagesJsonPageStyle {
     id?: number
diff --git a/packages/uni-app-plus/dist/uni-app-service.es.js b/packages/uni-app-plus/dist/uni-app-service.es.js
index 71dde91dbadab565427da4959cbf89045c3d577e..492d8c0dba587c5362b10334af05b6fa60b88df7 100644
--- a/packages/uni-app-plus/dist/uni-app-service.es.js
+++ b/packages/uni-app-plus/dist/uni-app-service.es.js
@@ -21,7 +21,11 @@ var serviceContext = (function () {
         : {};
     (process.env.NODE_ENV !== 'production') ? Object.freeze([]) : [];
     const extend = Object.assign;
-    const isString = (val) => typeof val === 'string';
+    const isArray = Array.isArray;
+    const isString = (val) => typeof val === 'string';
+    const objectToString = Object.prototype.toString;
+    const toTypeString = (value) => objectToString.call(value);
+    const isPlainObject = (val) => toTypeString(val) === '[object Object]';
 
     let isInitEntryPage = false;
     function initEntry() {
@@ -82,11 +86,45 @@ var serviceContext = (function () {
         }
         return ret;
     };
+
+    const encode$1 = encodeURIComponent;
+    function stringifyQuery(obj, encodeStr = encode$1) {
+        const res = obj
+            ? Object.keys(obj)
+                .map((key) => {
+                let val = obj[key];
+                if (typeof val === undefined || val === null) {
+                    val = '';
+                }
+                else if (isPlainObject(val)) {
+                    val = JSON.stringify(val);
+                }
+                return encodeStr(key) + '=' + encodeStr(val);
+            })
+                .filter((x) => x.length > 0)
+                .join('&')
+            : null;
+        return res ? `?${res}` : '';
+    }
     const TABBAR_HEIGHT = 50;
+    const BACKGROUND_COLOR = '#f7f7f7'; // 背景色，如标题栏默认背景色
     const SCHEME_RE = /^([a-z-]+:)?\/\//i;
     const DATA_RE = /^data:.*,.*/;
     const WEB_INVOKE_APPSERVICE = 'WEB_INVOKE_APPSERVICE';
 
+    const PAGE_META_KEYS = ['navigationBar', 'refreshOptions'];
+    function initGlobalStyle() {
+        return JSON.parse(JSON.stringify(__uniConfig.globalStyle || {}));
+    }
+    function mergePageMeta(id, pageMeta) {
+        const globalStyle = initGlobalStyle();
+        const res = extend({ id }, globalStyle, pageMeta);
+        PAGE_META_KEYS.forEach((name) => {
+            res[name] = extend({}, globalStyle[name], pageMeta[name]);
+        });
+        return res;
+    }
+
     function getRealRoute(fromRoute, toRoute) {
         if (toRoute.indexOf('/') === 0) {
             return toRoute;
@@ -483,8 +521,252 @@ var serviceContext = (function () {
         initGlobalEvent();
     }
 
+    function initRouteOptions(path, openType) {
+        // 需要序列化一遍
+        const routeOptions = JSON.parse(JSON.stringify(__uniRoutes.find((route) => route.path === path)));
+        if (openType === 'reLaunch' ||
+            (!__uniConfig.realEntryPagePath && getCurrentPages().length === 0) // redirectTo
+        ) {
+            routeOptions.meta.isQuit = true;
+        }
+        else if (!routeOptions.meta.isTabBar) {
+            routeOptions.meta.isQuit = false;
+        }
+        // TODO
+        //   if (routeOptions.meta.isTabBar) {
+        //     routeOptions.meta.visible = true
+        //   }
+        return routeOptions;
+    }
+
+    function initNVue(webviewStyle, routeMeta, path) {
+        if (path && routeMeta.isNVue) {
+            webviewStyle.uniNView = {
+                path,
+                defaultFontSize: __uniConfig.defaultFontSize,
+                viewport: __uniConfig.viewport,
+            };
+        }
+    }
+
+    const colorRE = /^#[a-z0-9]{6}$/i;
+    function isColor(color) {
+        return color && (colorRE.test(color) || color === 'transparent');
+    }
+
+    function initBackgroundColor(webviewStyle, routeMeta) {
+        const { backgroundColor } = routeMeta;
+        if (!backgroundColor) {
+            return;
+        }
+        if (!isColor(backgroundColor)) {
+            return;
+        }
+        if (!webviewStyle.background) {
+            webviewStyle.background = backgroundColor;
+        }
+        if (!webviewStyle.backgroundColorTop) {
+            webviewStyle.backgroundColorTop = backgroundColor;
+        }
+    }
+
+    function initPopGesture(webviewStyle, routeMeta) {
+        // 不支持 hide
+        if (webviewStyle.popGesture === 'hide') {
+            delete webviewStyle.popGesture;
+        }
+        // 似乎没用了吧？记得是之前流应用时，需要 appback 的逻辑
+        if (routeMeta.isQuit) {
+            webviewStyle.popGesture = (plus.os.name === 'iOS' ? 'appback' : 'none');
+        }
+    }
+
+    function initPullToRefresh(webviewStyle, routeMeta) {
+        if (!routeMeta.enablePullDownRefresh) {
+            return;
+        }
+        webviewStyle.pullToRefresh = extend({}, plus.os.name === 'Android'
+            ? defaultAndroidPullToRefresh
+            : defaultPullToRefresh, routeMeta.refreshOptions);
+    }
+    const defaultAndroidPullToRefresh = { support: true, style: 'circle' };
+    const defaultPullToRefresh = {
+        support: true,
+        style: 'default',
+        height: '50px',
+        range: '200px',
+        contentdown: {
+            caption: '',
+        },
+        contentover: {
+            caption: '',
+        },
+        contentrefresh: {
+            caption: '',
+        },
+    };
+
+    function initTitleNView(webviewStyle, routeMeta) {
+        const { navigationBar } = routeMeta;
+        if (navigationBar.style === 'custom') {
+            return false;
+        }
+        let autoBackButton = true;
+        if (routeMeta.isQuit) {
+            autoBackButton = false;
+        }
+        const titleNView = {
+            autoBackButton,
+        };
+        Object.keys(navigationBar).forEach((name) => {
+            const value = navigationBar[name];
+            if (name === 'backgroundColor') {
+                titleNView.backgroundColor = isColor(value)
+                    ? value
+                    : BACKGROUND_COLOR;
+            }
+            else if (name === 'titleImage' && value) {
+                titleNView.tags = createTitleImageTags(value);
+            }
+            else if (name === 'buttons' && isArray(value)) {
+                titleNView.buttons = value.map((button, index) => {
+                    button.onclick = createTitleNViewBtnClick(index);
+                    return button;
+                });
+            }
+        });
+        webviewStyle.titleNView = titleNView;
+    }
+    function createTitleImageTags(titleImage) {
+        return [
+            {
+                tag: 'img',
+                src: titleImage,
+                position: {
+                    left: 'auto',
+                    top: 'auto',
+                    width: 'auto',
+                    height: '26px',
+                },
+            },
+        ];
+    }
+    function createTitleNViewBtnClick(index) {
+        return function onClick(btn) {
+            btn.index = index;
+            invokeHook('onNavigationBarButtonTap', btn);
+        };
+    }
+
+    function parseWebviewStyle(id, path, routeOptions) {
+        const webviewStyle = {
+            bounce: 'vertical',
+        };
+        const routeMeta = mergePageMeta(id, routeOptions.meta);
+        Object.keys(routeMeta).forEach((name) => {
+            if (WEBVIEW_STYLE_BLACKLIST.indexOf(name) === -1) {
+                webviewStyle[name] =
+                    routeMeta[name];
+            }
+        });
+        initNVue(webviewStyle, routeMeta, path);
+        initPopGesture(webviewStyle, routeMeta);
+        initBackgroundColor(webviewStyle, routeMeta);
+        initTitleNView(webviewStyle, routeMeta);
+        initPullToRefresh(webviewStyle, routeMeta);
+        return webviewStyle;
+    }
+    const WEBVIEW_STYLE_BLACKLIST = [
+        'id',
+        'route',
+        'isNVue',
+        'isQuit',
+        'isEntry',
+        'isTabBar',
+        'tabBarIndex',
+        'windowTop',
+        'topWindow',
+        'leftWindow',
+        'rightWindow',
+        'maxWidth',
+        'usingComponents',
+        'disableScroll',
+        'enablePullDownRefresh',
+        'navigationBar',
+        'refreshOptions',
+        'onReachBottomDistance',
+        'pageOrientation',
+        'backgroundColor',
+    ];
+
+    let id = 2;
+    let preloadWebview;
+    function getWebviewId() {
+        return id;
+    }
+    function genWebviewId() {
+        return id++;
+    }
+    function getPreloadWebview() {
+        return preloadWebview;
+    }
+    function encode(val) {
+        return val;
+    }
+    function initUniPageUrl(path, query) {
+        const queryString = query ? stringifyQuery(query, encode) : '';
+        return {
+            path: path.substr(1),
+            query: queryString ? queryString.substr(1) : queryString,
+        };
+    }
+
+    function createNVueWebview({ path, query, routeOptions, webviewStyle, }) {
+        const curWebviewId = genWebviewId();
+        const curWebviewStyle = parseWebviewStyle(curWebviewId, path, routeOptions);
+        curWebviewStyle.uniPageUrl = initUniPageUrl(path, query);
+        if ((process.env.NODE_ENV !== 'production')) {
+            console.log('[uni-app] createWebview', curWebviewId, path, curWebviewStyle);
+        }
+        curWebviewStyle.isTab = !!routeOptions.meta.isTabBar;
+        return plus.webview.create('', String(curWebviewId), curWebviewStyle, extend({
+            nvue: true,
+        }, webviewStyle));
+    }
+
+    function createWebview(options) {
+        if (options.routeOptions.meta.isNVue) {
+            return createNVueWebview(options);
+        }
+        if (getWebviewId() === 2) {
+            // 如果首页非 nvue，则直接返回 Launch Webview
+            return plus.webview.getLaunchWebview();
+        }
+        return getPreloadWebview();
+    }
+
+    function registerPage({ path, query, openType, webview, }) {
+        // fast 模式，nvue 首页时，会在nvue中主动调用registerPage并传入首页webview，此时初始化一下首页（因为此时可能还未调用registerApp）
+        if (webview) {
+            initEntry();
+        }
+        // TODO preloadWebview
+        const routeOptions = initRouteOptions(path, openType);
+        if (!webview) {
+            webview = createWebview({ path, routeOptions, query });
+        }
+        else {
+            webview = plus.webview.getWebviewById(webview.id);
+            webview.nvue = routeOptions.meta.isNVue;
+        }
+        if ((process.env.NODE_ENV !== 'production')) {
+            console.log(`[uni-app] registerPage(${path},${webview.id})`);
+        }
+    }
+
     var index = {
         __registerApp: registerApp,
+        __registerPage: registerPage,
     };
 
     return index;
diff --git a/packages/uni-app-plus/dist/uni-app-view.umd.js b/packages/uni-app-plus/dist/uni-app-view.umd.js
index cde367a1cbe56a3fd345819d07fd2334c2a104b9..3e95926fb29450809afa1cc1755e1b4ad65d86b5 100644
--- a/packages/uni-app-plus/dist/uni-app-view.umd.js
+++ b/packages/uni-app-plus/dist/uni-app-view.umd.js
@@ -625,16 +625,30 @@
   function PolySymbol(name) {
     return Symbol("[uni-app]: " + name);
   }
-  function rpx2px(str) {
+  function hasRpx(str) {
+    return str.indexOf("rpx") !== -1 || str.indexOf("upx") !== -1;
+  }
+  function rpx2px(str, replace = false) {
+    if (replace) {
+      return rpx2pxWithReplace(str);
+    }
     if (typeof str === "string") {
       const res = parseInt(str) || 0;
-      if (str.indexOf("rpx") !== -1 || str.indexOf("upx") !== -1) {
+      if (hasRpx(str)) {
         return uni.upx2px(res);
       }
       return res;
     }
     return str;
   }
+  function rpx2pxWithReplace(str) {
+    if (!hasRpx(str)) {
+      return str;
+    }
+    return str.replace(/(\d+(\.\d+)?)[ru]px/g, (_a, b) => {
+      return uni.upx2px(parseFloat(b)) + "px";
+    });
+  }
   const ICON_PATH_CANCEL = "M20.928 10.176l-4.928 4.928-4.928-4.928-0.896 0.896 4.928 4.928-4.928 4.928 0.896 0.896 4.928-4.928 4.928 4.928 0.896-0.896-4.928-4.928 4.928-4.928-0.896-0.896zM16 2.080q-3.776 0-7.040 1.888-3.136 1.856-4.992 4.992-1.888 3.264-1.888 7.040t1.888 7.040q1.856 3.136 4.992 4.992 3.264 1.888 7.040 1.888t7.040-1.888q3.136-1.856 4.992-4.992 1.888-3.264 1.888-7.040t-1.888-7.040q-1.856-3.136-4.992-4.992-3.264-1.888-7.040-1.888zM16 28.64q-3.424 0-6.4-1.728-2.848-1.664-4.512-4.512-1.728-2.976-1.728-6.4t1.728-6.4q1.664-2.848 4.512-4.512 2.976-1.728 6.4-1.728t6.4 1.728q2.848 1.664 4.512 4.512 1.728 2.976 1.728 6.4t-1.728 6.4q-1.664 2.848-4.512 4.512-2.976 1.728-6.4 1.728z";
   const ICON_PATH_CLEAR = "M16 0q-4.352 0-8.064 2.176-3.616 2.144-5.76 5.76-2.176 3.712-2.176 8.064t2.176 8.064q2.144 3.616 5.76 5.76 3.712 2.176 8.064 2.176t8.064-2.176q3.616-2.144 5.76-5.76 2.176-3.712 2.176-8.064t-2.176-8.064q-2.144-3.616-5.76-5.76-3.712-2.176-8.064-2.176zM22.688 21.408q0.32 0.32 0.304 0.752t-0.336 0.736-0.752 0.304-0.752-0.32l-5.184-5.376-5.376 5.184q-0.32 0.32-0.752 0.304t-0.736-0.336-0.304-0.752 0.32-0.752l5.376-5.184-5.184-5.376q-0.32-0.32-0.304-0.752t0.336-0.752 0.752-0.304 0.752 0.336l5.184 5.376 5.376-5.184q0.32-0.32 0.752-0.304t0.752 0.336 0.304 0.752-0.336 0.752l-5.376 5.184 5.184 5.376z";
   const ICON_PATH_DOWNLOAD = "M15.808 1.696q-3.776 0-7.072 1.984-3.2 1.888-5.088 5.152-1.952 3.392-1.952 7.36 0 3.776 1.952 7.072 1.888 3.2 5.088 5.088 3.296 1.952 7.072 1.952 3.968 0 7.36-1.952 3.264-1.888 5.152-5.088 1.984-3.296 1.984-7.072 0-4-1.984-7.36-1.888-3.264-5.152-5.152-3.36-1.984-7.36-1.984zM20.864 18.592l-3.776 4.928q-0.448 0.576-1.088 0.576t-1.088-0.576l-3.776-4.928q-0.448-0.576-0.24-0.992t0.944-0.416h2.976v-8.928q0-0.256 0.176-0.432t0.4-0.176h1.216q0.224 0 0.4 0.176t0.176 0.432v8.928h2.976q0.736 0 0.944 0.416t-0.24 0.992z";
@@ -677,34 +691,6 @@
     fromRouteArray.splice(fromRouteArray.length - i - 1, i + 1);
     return "/" + fromRouteArray.concat(toRouteArray).join("/");
   }
-  const callbacks = {};
-  function createCallbacks(namespace) {
-    let scopedCallbacks = callbacks[namespace];
-    if (!scopedCallbacks) {
-      scopedCallbacks = {
-        id: 1,
-        callbacks: Object.create(null)
-      };
-      callbacks[namespace] = scopedCallbacks;
-    }
-    return {
-      get(id) {
-        return scopedCallbacks.callbacks[id];
-      },
-      pop(id) {
-        const callback = scopedCallbacks.callbacks[id];
-        if (callback) {
-          delete scopedCallbacks.callbacks[id];
-        }
-        return callback;
-      },
-      push(callback) {
-        const id = scopedCallbacks.id++;
-        scopedCallbacks.callbacks[id] = callback;
-        return id;
-      }
-    };
-  }
   /* @__PURE__ */ extend(initBridge("service"), {
     invokeOnCallback(name, res) {
       return UniServiceJSBridge.emit("api." + name, res);
@@ -1489,8 +1475,6 @@
       resetSize
     };
   }
-  createCallbacks("canvasEvent");
-  createCallbacks("getSelectedTextRangeEvent");
   function _isSlot(s) {
     return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !vue.isVNode(s);
   }
diff --git a/packages/uni-app-plus/src/service/framework/page/index.ts b/packages/uni-app-plus/src/service/framework/page/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..d166c616d66f4ca508507f882057df426009e846
--- /dev/null
+++ b/packages/uni-app-plus/src/service/framework/page/index.ts
@@ -0,0 +1,45 @@
+import { initEntry } from '../app/initEntry'
+import { initRouteOptions } from './initRouteOptions'
+import { createWebview } from './webview'
+
+export type OpenType =
+  | 'navigateTo'
+  | 'redirectTo'
+  | 'reLaunch'
+  | 'switchTab'
+  | 'navigateBack'
+  | 'preloadPage'
+
+interface RegisterPageOptions {
+  url: string
+  path: string
+  query: Record<string, string>
+  openType: OpenType
+  webview?: PlusWebviewWebviewObject
+  eventChannel: unknown
+}
+
+export function registerPage({
+  path,
+  query,
+  openType,
+  webview,
+}: RegisterPageOptions) {
+  // fast 模式，nvue 首页时，会在nvue中主动调用registerPage并传入首页webview，此时初始化一下首页（因为此时可能还未调用registerApp）
+  if (webview) {
+    initEntry()
+  }
+  // TODO preloadWebview
+
+  const routeOptions = initRouteOptions(path, openType)
+
+  if (!webview) {
+    webview = createWebview({ path, routeOptions, query })
+  } else {
+    webview = plus.webview.getWebviewById(webview.id)
+    ;(webview as any).nvue = routeOptions.meta.isNVue
+  }
+  if (__DEV__) {
+    console.log(`[uni-app] registerPage(${path},${webview.id})`)
+  }
+}
diff --git a/packages/uni-app-plus/src/service/framework/page/initRouteOptions.ts b/packages/uni-app-plus/src/service/framework/page/initRouteOptions.ts
new file mode 100644
index 0000000000000000000000000000000000000000..78d701276cbcb13698bc735af4ab049090926bdf
--- /dev/null
+++ b/packages/uni-app-plus/src/service/framework/page/initRouteOptions.ts
@@ -0,0 +1,21 @@
+import { OpenType } from '.'
+
+export function initRouteOptions(path: string, openType: OpenType) {
+  // 需要序列化一遍
+  const routeOptions = JSON.parse(
+    JSON.stringify(__uniRoutes.find((route) => route.path === path))
+  ) as UniApp.UniRoute
+  if (
+    openType === 'reLaunch' ||
+    (!__uniConfig.realEntryPagePath && getCurrentPages().length === 0) // redirectTo
+  ) {
+    routeOptions.meta.isQuit = true
+  } else if (!routeOptions.meta.isTabBar) {
+    routeOptions.meta.isQuit = false
+  }
+  // TODO
+  //   if (routeOptions.meta.isTabBar) {
+  //     routeOptions.meta.visible = true
+  //   }
+  return routeOptions
+}
diff --git a/packages/uni-app-plus/src/service/framework/page/webview/index.ts b/packages/uni-app-plus/src/service/framework/page/webview/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..ae7ed8a9abd318511524c66979792cdb3c307314
--- /dev/null
+++ b/packages/uni-app-plus/src/service/framework/page/webview/index.ts
@@ -0,0 +1,20 @@
+import { createNVueWebview } from './nvue'
+import { getPreloadWebview, getWebviewId } from './utils'
+
+export interface CreateWebviewOptions {
+  path: string
+  query: Record<string, string>
+  routeOptions: UniApp.UniRoute
+  webviewStyle?: Record<string, any>
+}
+
+export function createWebview(options: CreateWebviewOptions) {
+  if (options.routeOptions.meta.isNVue) {
+    return createNVueWebview(options)
+  }
+  if (getWebviewId() === 2) {
+    // 如果首页非 nvue，则直接返回 Launch Webview
+    return plus.webview.getLaunchWebview()
+  }
+  return getPreloadWebview()
+}
diff --git a/packages/uni-app-plus/src/service/framework/page/webview/nvue.ts b/packages/uni-app-plus/src/service/framework/page/webview/nvue.ts
new file mode 100644
index 0000000000000000000000000000000000000000..3f21bf8959dbd9532b4d2bb894b9f6a520387cd6
--- /dev/null
+++ b/packages/uni-app-plus/src/service/framework/page/webview/nvue.ts
@@ -0,0 +1,32 @@
+import { extend } from '@vue/shared'
+
+import { CreateWebviewOptions } from '.'
+import { parseWebviewStyle } from './style'
+import { genWebviewId, initUniPageUrl } from './utils'
+
+export function createNVueWebview({
+  path,
+  query,
+  routeOptions,
+  webviewStyle,
+}: CreateWebviewOptions) {
+  const curWebviewId = genWebviewId()
+  const curWebviewStyle = parseWebviewStyle(curWebviewId, path, routeOptions)
+  ;(curWebviewStyle as any).uniPageUrl = initUniPageUrl(path, query)
+  if (__DEV__) {
+    console.log('[uni-app] createWebview', curWebviewId, path, curWebviewStyle)
+  }
+  // android 需要使用
+  ;(curWebviewStyle as any).isTab = !!routeOptions.meta.isTabBar
+  return plus.webview.create(
+    '',
+    String(curWebviewId),
+    curWebviewStyle,
+    extend(
+      {
+        nvue: true,
+      },
+      webviewStyle
+    )
+  )
+}
diff --git a/packages/uni-app-plus/src/service/framework/page/webview/style/backgroundColor.ts b/packages/uni-app-plus/src/service/framework/page/webview/style/backgroundColor.ts
new file mode 100644
index 0000000000000000000000000000000000000000..e55af7693c8a41dd5b46cfe449b310017f730090
--- /dev/null
+++ b/packages/uni-app-plus/src/service/framework/page/webview/style/backgroundColor.ts
@@ -0,0 +1,20 @@
+import { isColor } from './utils'
+
+export function initBackgroundColor(
+  webviewStyle: PlusWebviewWebviewStyles,
+  routeMeta: UniApp.PageRouteMeta
+) {
+  const { backgroundColor } = routeMeta
+  if (!backgroundColor) {
+    return
+  }
+  if (!isColor(backgroundColor)) {
+    return
+  }
+  if (!webviewStyle.background) {
+    webviewStyle.background = backgroundColor
+  }
+  if (!webviewStyle.backgroundColorTop) {
+    webviewStyle.backgroundColorTop = backgroundColor
+  }
+}
diff --git a/packages/uni-app-plus/src/service/framework/page/webview/style/index.ts b/packages/uni-app-plus/src/service/framework/page/webview/style/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..1eb39ce8deb63645aedfc66ef7766f045f23555d
--- /dev/null
+++ b/packages/uni-app-plus/src/service/framework/page/webview/style/index.ts
@@ -0,0 +1,55 @@
+import { mergePageMeta } from '@dcloudio/uni-core'
+import { initNVue } from './nvue'
+import { initBackgroundColor } from './backgroundColor'
+import { initPopGesture } from './popGesture'
+import { initPullToRefresh } from './pullToRefresh'
+import { initTitleNView } from './titleNView'
+
+export function parseWebviewStyle(
+  id: number,
+  path: string,
+  routeOptions: UniApp.UniRoute
+): PlusWebviewWebviewStyles {
+  const webviewStyle: PlusWebviewWebviewStyles = {
+    bounce: 'vertical',
+  }
+  const routeMeta = mergePageMeta(id, routeOptions.meta)
+
+  Object.keys(routeMeta).forEach((name) => {
+    if (WEBVIEW_STYLE_BLACKLIST.indexOf(name) === -1) {
+      webviewStyle[name as keyof PlusWebviewWebviewStyles] =
+        routeMeta[name as keyof UniApp.PageRouteMeta]
+    }
+  })
+
+  initNVue(webviewStyle, routeMeta, path)
+  initPopGesture(webviewStyle, routeMeta)
+  initBackgroundColor(webviewStyle, routeMeta)
+  initTitleNView(webviewStyle, routeMeta)
+  initPullToRefresh(webviewStyle, routeMeta)
+
+  return webviewStyle
+}
+
+const WEBVIEW_STYLE_BLACKLIST = [
+  'id',
+  'route',
+  'isNVue',
+  'isQuit',
+  'isEntry',
+  'isTabBar',
+  'tabBarIndex',
+  'windowTop',
+  'topWindow',
+  'leftWindow',
+  'rightWindow',
+  'maxWidth',
+  'usingComponents',
+  'disableScroll',
+  'enablePullDownRefresh',
+  'navigationBar',
+  'refreshOptions',
+  'onReachBottomDistance',
+  'pageOrientation',
+  'backgroundColor',
+]
diff --git a/packages/uni-app-plus/src/service/framework/page/webview/style/nvue.ts b/packages/uni-app-plus/src/service/framework/page/webview/style/nvue.ts
new file mode 100644
index 0000000000000000000000000000000000000000..158ffd58baf818126cb2f9d450fd2d1bfc13cf4f
--- /dev/null
+++ b/packages/uni-app-plus/src/service/framework/page/webview/style/nvue.ts
@@ -0,0 +1,13 @@
+export function initNVue(
+  webviewStyle: PlusWebviewWebviewStyles,
+  routeMeta: UniApp.PageRouteMeta,
+  path: string
+) {
+  if (path && routeMeta.isNVue) {
+    ;(webviewStyle as any).uniNView = {
+      path,
+      defaultFontSize: (__uniConfig as any).defaultFontSize,
+      viewport: (__uniConfig as any).viewport,
+    }
+  }
+}
diff --git a/packages/uni-app-plus/src/service/framework/page/webview/style/popGesture.ts b/packages/uni-app-plus/src/service/framework/page/webview/style/popGesture.ts
new file mode 100644
index 0000000000000000000000000000000000000000..9f60bb02c1f2b37d06abd898e28b035411f92d8e
--- /dev/null
+++ b/packages/uni-app-plus/src/service/framework/page/webview/style/popGesture.ts
@@ -0,0 +1,16 @@
+export function initPopGesture(
+  webviewStyle: PlusWebviewWebviewStyles,
+  routeMeta: UniApp.PageRouteMeta
+) {
+  // 不支持 hide
+  if (webviewStyle.popGesture === 'hide') {
+    delete webviewStyle.popGesture
+  }
+
+  // 似乎没用了吧？记得是之前流应用时，需要 appback 的逻辑
+  if (routeMeta.isQuit) {
+    webviewStyle.popGesture = (
+      plus.os.name === 'iOS' ? 'appback' : 'none'
+    ) as PlusWebviewWebviewStyles['popGesture']
+  }
+}
diff --git a/packages/uni-app-plus/src/service/framework/page/webview/style/pullToRefresh.ts b/packages/uni-app-plus/src/service/framework/page/webview/style/pullToRefresh.ts
new file mode 100644
index 0000000000000000000000000000000000000000..e5e390605b54f5f0d0bf3729e1d8628902587bfc
--- /dev/null
+++ b/packages/uni-app-plus/src/service/framework/page/webview/style/pullToRefresh.ts
@@ -0,0 +1,34 @@
+import { extend } from '@vue/shared'
+
+export function initPullToRefresh(
+  webviewStyle: PlusWebviewWebviewStyles,
+  routeMeta: UniApp.PageRouteMeta
+) {
+  if (!routeMeta.enablePullDownRefresh) {
+    return
+  }
+  webviewStyle.pullToRefresh = extend(
+    {},
+    plus.os.name === 'Android'
+      ? defaultAndroidPullToRefresh
+      : defaultPullToRefresh,
+    routeMeta.refreshOptions
+  ) as unknown as PlusWebviewWebviewPullToRefreshStyles
+}
+
+const defaultAndroidPullToRefresh = { support: true, style: 'circle' }
+const defaultPullToRefresh = {
+  support: true,
+  style: 'default',
+  height: '50px',
+  range: '200px',
+  contentdown: {
+    caption: '',
+  },
+  contentover: {
+    caption: '',
+  },
+  contentrefresh: {
+    caption: '',
+  },
+}
diff --git a/packages/uni-app-plus/src/service/framework/page/webview/style/titleNView.ts b/packages/uni-app-plus/src/service/framework/page/webview/style/titleNView.ts
new file mode 100644
index 0000000000000000000000000000000000000000..09324d90794ddf3b374afd1ebf4af771ba82c577
--- /dev/null
+++ b/packages/uni-app-plus/src/service/framework/page/webview/style/titleNView.ts
@@ -0,0 +1,61 @@
+import { isArray } from '@vue/shared'
+import { BACKGROUND_COLOR } from '@dcloudio/uni-shared'
+import { isColor } from './utils'
+import { invokeHook } from '@dcloudio/uni-core'
+export function initTitleNView(
+  webviewStyle: PlusWebviewWebviewStyles,
+  routeMeta: UniApp.PageRouteMeta
+) {
+  const { navigationBar } = routeMeta
+  if (navigationBar.style === 'custom') {
+    return false
+  }
+  let autoBackButton = true
+  if (routeMeta.isQuit) {
+    autoBackButton = false
+  }
+  const titleNView: PlusWebviewWebviewTitleNViewStyles = {
+    autoBackButton,
+  }
+  Object.keys(navigationBar).forEach((name) => {
+    const value = navigationBar[name as keyof UniApp.PageNavigationBar]
+    if (name === 'backgroundColor') {
+      titleNView.backgroundColor = isColor(value as string)
+        ? (value as string)
+        : BACKGROUND_COLOR
+    } else if (name === 'titleImage' && value) {
+      titleNView.tags = createTitleImageTags(value as string)
+    } else if (name === 'buttons' && isArray(value)) {
+      titleNView.buttons = (value as UniApp.PageNavigationBar['buttons'])!.map(
+        (button, index) => {
+          ;(button as any).onclick = createTitleNViewBtnClick(index)
+          return button
+        }
+      )
+    }
+  })
+
+  webviewStyle.titleNView = titleNView
+}
+
+function createTitleImageTags(titleImage: string) {
+  return [
+    {
+      tag: 'img',
+      src: titleImage,
+      position: {
+        left: 'auto',
+        top: 'auto',
+        width: 'auto',
+        height: '26px',
+      },
+    },
+  ]
+}
+
+function createTitleNViewBtnClick(index: number) {
+  return function onClick(btn: UniApp.PageNavigationBarButton) {
+    ;(btn as any).index = index
+    invokeHook('onNavigationBarButtonTap', btn)
+  }
+}
diff --git a/packages/uni-app-plus/src/service/framework/page/webview/style/utils.ts b/packages/uni-app-plus/src/service/framework/page/webview/style/utils.ts
new file mode 100644
index 0000000000000000000000000000000000000000..91d5afb7df6fce85fbe564acb8f1ff8bb13f54da
--- /dev/null
+++ b/packages/uni-app-plus/src/service/framework/page/webview/style/utils.ts
@@ -0,0 +1,4 @@
+const colorRE = /^#[a-z0-9]{6}$/i
+export function isColor(color?: string) {
+  return color && (colorRE.test(color) || color === 'transparent')
+}
diff --git a/packages/uni-app-plus/src/service/framework/page/webview/utils.ts b/packages/uni-app-plus/src/service/framework/page/webview/utils.ts
new file mode 100644
index 0000000000000000000000000000000000000000..e0984fbe4002f3905c867de1217a5436f475c10a
--- /dev/null
+++ b/packages/uni-app-plus/src/service/framework/page/webview/utils.ts
@@ -0,0 +1,28 @@
+import { stringifyQuery } from '@dcloudio/uni-shared'
+
+let id = 2
+let preloadWebview: PlusWebviewWebviewObject
+
+export function getWebviewId() {
+  return id
+}
+
+export function genWebviewId() {
+  return id++
+}
+
+export function getPreloadWebview() {
+  return preloadWebview
+}
+
+function encode(val: Parameters<typeof encodeURIComponent>[0]) {
+  return val as string
+}
+
+export function initUniPageUrl(path: string, query: Record<string, string>) {
+  const queryString = query ? stringifyQuery(query, encode) : ''
+  return {
+    path: path.substr(1),
+    query: queryString ? queryString.substr(1) : queryString,
+  }
+}
diff --git a/packages/uni-app-plus/src/service/index.ts b/packages/uni-app-plus/src/service/index.ts
index 8aeabb5f893a0fda66e8c810d3c3b1759160d58a..a330dcd8b430230173c93014610f16a7c64821cd 100644
--- a/packages/uni-app-plus/src/service/index.ts
+++ b/packages/uni-app-plus/src/service/index.ts
@@ -1,5 +1,6 @@
 import { registerApp as __registerApp } from './framework/app'
-
+import { registerPage as __registerPage } from './framework/page'
 export default {
   __registerApp,
+  __registerPage,
 }
diff --git a/packages/uni-cli-shared/src/json/pages.ts b/packages/uni-cli-shared/src/json/pages.ts
index 6191260b8c8896d2e9068428f8bfb09227741272..d3a562e5afd5a30a6162195b8dc6374b23177a15 100644
--- a/packages/uni-cli-shared/src/json/pages.ts
+++ b/packages/uni-cli-shared/src/json/pages.ts
@@ -58,11 +58,10 @@ export function normalizePagesJson(jsonStr: string, platform: UniApp.PLATFORM) {
 function validatePages(pagesJson: Record<string, any>, jsonStr: string) {
   if (!Array.isArray(pagesJson.pages)) {
     pagesJson.pages = []
-    console.error(`[uni-app] Error: pages.json->pages parse failed.\n`, jsonStr)
+    throw new Error(`[uni-app] Error: pages.json->pages parse failed.`)
   } else if (!pagesJson.pages.length) {
-    console.error(
-      `[uni-app] Error: pages.json->pages must contain at least 1 page.\n`,
-      jsonStr
+    throw new Error(
+      `[uni-app] Error: pages.json->pages must contain at least 1 page.`
     )
   }
 }
@@ -105,6 +104,10 @@ function normalizePageStyle(
     extend(pageStyle, pageStyle[platform] || {})
     if (['h5', 'app'].includes(platform)) {
       pageStyle.navigationBar = normalizeNavigationBar(pageStyle)
+      if (isEnablePullDownRefresh(pageStyle)) {
+        pageStyle.enablePullDownRefresh = true
+        pageStyle.refreshOptions = normalizePullToRefresh(pageStyle)
+      }
     }
     return removePlatformStyle(pageStyle)
   }
@@ -127,8 +130,8 @@ function normalizeNavigationBar(
 
   Object.keys(navigationBarMaps).forEach((name) => {
     if (hasOwn(pageStyle, name)) {
-      // @ts-ignore
-      navigationBar[navigationBarMaps[name]] = pageStyle[name]
+      navigationBar[navigationBarMaps[name] as keyof UniApp.PageNavigationBar] =
+        pageStyle[name]
       delete pageStyle[name]
     }
   })
@@ -137,10 +140,33 @@ function normalizeNavigationBar(
   if (isPlainObject(titleNView)) {
     extend(navigationBar, titleNView)
     delete pageStyle.titleNView
+  } else if (titleNView === false) {
+    navigationBar.style = 'custom'
+  }
+
+  if (hasOwn(navigationBar, 'transparentTitle')) {
+    const transparentTitle = (navigationBar as any).transparentTitle as
+      | 'none'
+      | 'auto'
+      | 'always'
+    if (transparentTitle === 'always') {
+      navigationBar.style = 'custom'
+      navigationBar.type = 'float'
+    } else if (transparentTitle === 'auto') {
+      navigationBar.type = 'transparent'
+    } else {
+      navigationBar.type = 'default'
+    }
+    delete (navigationBar as any).transparentTitle
+  }
+
+  if (navigationBar.titleImage && navigationBar.titleText) {
+    delete navigationBar.titleText
   }
+
   if (!navigationBar.titleColor && hasOwn(navigationBar, 'textStyle')) {
     navigationBar.titleColor =
-      (navigationBar as any).textStyle === 'black' ? '#000' : '#fff'
+      (navigationBar as any).textStyle === 'black' ? '#000000' : '#ffffff'
     delete (navigationBar as any).textStyle
   }
 
@@ -175,9 +201,9 @@ function normalizeNavigationBar(
 function normalizeNavigationBarButton(
   btn: UniApp.PageNavigationBarButton,
   type: UniApp.PageNavigationBar['type'],
-  titleColor: '#000' | '#fff'
+  titleColor: UniApp.PageNavigationBar['titleColor']
 ) {
-  btn.color = type === 'transparent' ? '#fff' : btn.color || titleColor
+  btn.color = type === 'transparent' ? '#ffffff' : btn.color || titleColor!
   if (!btn.fontSize) {
     btn.fontSize =
       type === 'transparent' || (btn.text && /\\u/.test(btn.text))
@@ -315,3 +341,13 @@ export function normalizePagesRoute(
     }
   })
 }
+
+function isEnablePullDownRefresh(pageStyle: Record<string, any>) {
+  return pageStyle.enablePullDownRefresh || pageStyle.pullToRefresh?.support
+}
+
+function normalizePullToRefresh(
+  pageStyle: Record<string, any>
+): UniApp.PageRefreshOptions | undefined {
+  return pageStyle.pullToRefresh
+}
diff --git a/packages/uni-components/src/components/swiper/index.tsx b/packages/uni-components/src/components/swiper/index.tsx
index fb87f689a71979744f859409437482a0f5a55d75..52de7f6069215275d34580ffdfa668eaca74bf06 100644
--- a/packages/uni-components/src/components/swiper/index.tsx
+++ b/packages/uni-components/src/components/swiper/index.tsx
@@ -12,11 +12,11 @@ import {
   markRaw,
   SetupContext,
 } from 'vue'
-import { upx2px } from '@dcloudio/uni-api'
 import { defineBuiltInComponent } from '../../helpers/component'
 import { useCustomEvent, CustomEventTrigger } from '../../helpers/useEvent'
 import { useTouchtrack } from '../../helpers/useTouchtrack'
 import { flatVNode } from '../../helpers/flatVNode'
+import { rpx2px } from '@dcloudio/uni-core'
 
 const props = {
   indicatorDots: {
@@ -92,15 +92,6 @@ export interface SwiperContext {
 export type AddSwiperContext = (context: SwiperContext) => void
 export type RemoveSwiperContext = (context: SwiperContext) => void
 
-function upx2pxStr(val: string): string {
-  if (/\d+[ur]px$/i.test(val)) {
-    val.replace(/\d+[ur]px$/i, (text) => {
-      return `${upx2px(parseFloat(text))}px`
-    })
-  }
-  return val || ''
-}
-
 interface State {
   interval: number
   duration: number
@@ -633,14 +624,14 @@ export default /*#__PURE__*/ defineBuiltInComponent({
           ? {
               left: 0,
               right: 0,
-              top: upx2pxStr(props.previousMargin),
-              bottom: upx2pxStr(props.nextMargin),
+              top: rpx2px(props.previousMargin, true),
+              bottom: rpx2px(props.nextMargin, true),
             }
           : {
               top: 0,
               bottom: 0,
-              left: upx2pxStr(props.previousMargin),
-              right: upx2pxStr(props.nextMargin),
+              left: rpx2px(props.previousMargin, true),
+              right: rpx2px(props.nextMargin, true),
             }
       }
       return style
diff --git a/packages/uni-core/src/helpers/page.ts b/packages/uni-core/src/helpers/page.ts
index fc6a56e5a6e3231ba41303ca44b1392a02f67f55..63af8d0b2d61a17c71f69637db931cc050b98dcd 100644
--- a/packages/uni-core/src/helpers/page.ts
+++ b/packages/uni-core/src/helpers/page.ts
@@ -1,3 +1,4 @@
+import { extend } from '@vue/shared'
 import { ComponentPublicInstance, getCurrentInstance } from 'vue'
 
 export function useCurrentPageId() {
@@ -13,3 +14,21 @@ export function getPageIdByVm(vm: ComponentPublicInstance) {
     return rootProxy.$page.id
   }
 }
+
+const PAGE_META_KEYS = ['navigationBar', 'refreshOptions'] as const
+
+function initGlobalStyle() {
+  return JSON.parse(JSON.stringify(__uniConfig.globalStyle || {}))
+}
+
+export function mergePageMeta(
+  id: number,
+  pageMeta: UniApp.PageRouteMeta
+): UniApp.PageRouteMeta {
+  const globalStyle = initGlobalStyle()
+  const res = extend({ id }, globalStyle, pageMeta)
+  PAGE_META_KEYS.forEach((name) => {
+    ;(res as any)[name] = extend({}, globalStyle[name], pageMeta[name])
+  })
+  return res
+}
diff --git a/packages/uni-core/src/helpers/util.ts b/packages/uni-core/src/helpers/util.ts
index 30badbb6c9b63e44a84b94b62e8df587c8ea72d0..08e9a3cb74d96b1b6911414b6af851dcdd486002 100644
--- a/packages/uni-core/src/helpers/util.ts
+++ b/packages/uni-core/src/helpers/util.ts
@@ -2,16 +2,37 @@ export function PolySymbol(name: string) {
   return Symbol(__DEV__ ? '[uni-app]: ' + name : name)
 }
 
-export function rpx2px(str: string | number) {
+function hasRpx(str: string) {
+  return str.indexOf('rpx') !== -1 || str.indexOf('upx') !== -1
+}
+
+export function rpx2px(str: string | number): number
+export function rpx2px(str: string, replace: true): string
+export function rpx2px(str: string | number, replace = false) {
+  if (replace) {
+    return rpx2pxWithReplace(str as string)
+  }
   if (__NODE_JS__) {
     return parseInt(str + '')
   }
   if (typeof str === 'string') {
     const res = parseInt(str) || 0
-    if (str.indexOf('rpx') !== -1 || str.indexOf('upx') !== -1) {
+    if (hasRpx(str)) {
       return uni.upx2px(res)
     }
     return res
   }
   return str
 }
+
+function rpx2pxWithReplace(str: string) {
+  if (__NODE_JS__) {
+    return str
+  }
+  if (!hasRpx(str)) {
+    return str
+  }
+  return str.replace(/(\d+(\.\d+)?)[ru]px/g, (_a, b) => {
+    return uni.upx2px(parseFloat(b)) + 'px'
+  })
+}
diff --git a/packages/uni-h5/dist/uni-h5.cjs.js b/packages/uni-h5/dist/uni-h5.cjs.js
index 697ed63e72c6a63f965824c732f61c7e2638ea56..78b06b666b7f535e75a7b73d96a8bd1cb30ce24a 100644
--- a/packages/uni-h5/dist/uni-h5.cjs.js
+++ b/packages/uni-h5/dist/uni-h5.cjs.js
@@ -387,11 +387,19 @@ function updatePageCssVar(cssVars) {
 function PolySymbol(name) {
   return Symbol(process.env.NODE_ENV !== "production" ? "[uni-app]: " + name : name);
 }
-function rpx2px(str) {
+function rpx2px(str, replace = false) {
+  if (replace) {
+    return rpx2pxWithReplace(str);
+  }
   {
     return parseInt(str + "");
   }
 }
+function rpx2pxWithReplace(str) {
+  {
+    return str;
+  }
+}
 const ICON_PATH_CANCEL = "M20.928 10.176l-4.928 4.928-4.928-4.928-0.896 0.896 4.928 4.928-4.928 4.928 0.896 0.896 4.928-4.928 4.928 4.928 0.896-0.896-4.928-4.928 4.928-4.928-0.896-0.896zM16 2.080q-3.776 0-7.040 1.888-3.136 1.856-4.992 4.992-1.888 3.264-1.888 7.040t1.888 7.040q1.856 3.136 4.992 4.992 3.264 1.888 7.040 1.888t7.040-1.888q3.136-1.856 4.992-4.992 1.888-3.264 1.888-7.040t-1.888-7.040q-1.856-3.136-4.992-4.992-3.264-1.888-7.040-1.888zM16 28.64q-3.424 0-6.4-1.728-2.848-1.664-4.512-4.512-1.728-2.976-1.728-6.4t1.728-6.4q1.664-2.848 4.512-4.512 2.976-1.728 6.4-1.728t6.4 1.728q2.848 1.664 4.512 4.512 1.728 2.976 1.728 6.4t-1.728 6.4q-1.664 2.848-4.512 4.512-2.976 1.728-6.4 1.728z";
 const ICON_PATH_CLEAR = "M16 0q-4.352 0-8.064 2.176-3.616 2.144-5.76 5.76-2.176 3.712-2.176 8.064t2.176 8.064q2.144 3.616 5.76 5.76 3.712 2.176 8.064 2.176t8.064-2.176q3.616-2.144 5.76-5.76 2.176-3.712 2.176-8.064t-2.176-8.064q-2.144-3.616-5.76-5.76-3.712-2.176-8.064-2.176zM22.688 21.408q0.32 0.32 0.304 0.752t-0.336 0.736-0.752 0.304-0.752-0.32l-5.184-5.376-5.376 5.184q-0.32 0.32-0.752 0.304t-0.736-0.336-0.304-0.752 0.32-0.752l5.376-5.184-5.184-5.376q-0.32-0.32-0.304-0.752t0.336-0.752 0.752-0.304 0.752 0.336l5.184 5.376 5.376-5.184q0.32-0.32 0.752-0.304t0.752 0.336 0.304 0.752-0.336 0.752l-5.376 5.184 5.184 5.376z";
 const ICON_PATH_DOWNLOAD = "M15.808 1.696q-3.776 0-7.072 1.984-3.2 1.888-5.088 5.152-1.952 3.392-1.952 7.36 0 3.776 1.952 7.072 1.888 3.2 5.088 5.088 3.296 1.952 7.072 1.952 3.968 0 7.36-1.952 3.264-1.888 5.152-5.088 1.984-3.296 1.984-7.072 0-4-1.984-7.36-1.888-3.264-5.152-5.152-3.36-1.984-7.36-1.984zM20.864 18.592l-3.776 4.928q-0.448 0.576-1.088 0.576t-1.088-0.576l-3.776-4.928q-0.448-0.576-0.24-0.992t0.944-0.416h2.976v-8.928q0-0.256 0.176-0.432t0.4-0.176h1.216q0.224 0 0.4 0.176t0.176 0.432v8.928h2.976q0.736 0 0.944 0.416t-0.24 0.992z";
@@ -418,6 +426,18 @@ function createSvgIconVNode(path, color = "#000", size = 27) {
 function useCurrentPageId() {
   return vue.getCurrentInstance().root.proxy.$page.id;
 }
+const PAGE_META_KEYS = ["navigationBar", "refreshOptions"];
+function initGlobalStyle() {
+  return JSON.parse(JSON.stringify(__uniConfig.globalStyle || {}));
+}
+function mergePageMeta(id, pageMeta) {
+  const globalStyle = initGlobalStyle();
+  const res = shared.extend({ id }, globalStyle, pageMeta);
+  PAGE_META_KEYS.forEach((name) => {
+    res[name] = shared.extend({}, globalStyle[name], pageMeta[name]);
+  });
+  return res;
+}
 function getRealRoute(fromRoute, toRoute) {
   if (toRoute.indexOf("/") === 0) {
     return toRoute;
@@ -1297,19 +1317,6 @@ function defineSyncApi(name, fn, protocol, options) {
 function defineAsyncApi(name, fn, protocol, options) {
   return promisify(wrapperAsyncApi(name, fn, process.env.NODE_ENV !== "production" ? protocol : void 0, options));
 }
-const API_UPX2PX = "upx2px";
-const Upx2pxProtocol = [
-  {
-    name: "upx",
-    type: [Number, String],
-    required: true
-  }
-];
-const upx2px = /* @__PURE__ */ defineSyncApi(API_UPX2PX, (number, newDeviceWidth) => {
-  {
-    return number;
-  }
-}, Upx2pxProtocol);
 createCallbacks("canvasEvent");
 const API_ON_TAB_BAR_MID_BUTTON_TAP = "onTabBarMidButtonTap";
 createCallbacks("getSelectedTextRangeEvent");
@@ -5678,14 +5685,6 @@ const props$c = {
     default: false
   }
 };
-function upx2pxStr(val) {
-  if (/\d+[ur]px$/i.test(val)) {
-    val.replace(/\d+[ur]px$/i, (text) => {
-      return `${upx2px(parseFloat(text))}px`;
-    });
-  }
-  return val || "";
-}
 function useState$1(props2) {
   const interval = vue.computed(() => {
     const interval2 = Number(props2.interval);
@@ -6016,13 +6015,13 @@ var index$g = /* @__PURE__ */ defineBuiltInComponent({
         style = props2.vertical ? {
           left: 0,
           right: 0,
-          top: upx2pxStr(props2.previousMargin),
-          bottom: upx2pxStr(props2.nextMargin)
+          top: rpx2px(props2.previousMargin, true),
+          bottom: rpx2px(props2.nextMargin, true)
         } : {
           top: 0,
           bottom: 0,
-          left: upx2pxStr(props2.previousMargin),
-          right: upx2pxStr(props2.nextMargin)
+          left: rpx2px(props2.previousMargin, true),
+          right: rpx2px(props2.nextMargin, true)
         };
       }
       return style;
@@ -6544,17 +6543,6 @@ function initPageMeta(id) {
   }
   return vue.reactive(normalizePageMeta(JSON.parse(JSON.stringify(mergePageMeta(id, __uniRoutes[0].meta)))));
 }
-const PAGE_META_KEYS = [
-  "navigationBar",
-  "refreshOptions"
-];
-function mergePageMeta(id, pageMeta) {
-  const res = shared.extend({ id }, __uniConfig.globalStyle, pageMeta);
-  PAGE_META_KEYS.forEach((name) => {
-    res[name] = shared.extend({}, __uniConfig.globalStyle[name], pageMeta[name]);
-  });
-  return res;
-}
 function normalizePageMeta(pageMeta) {
   if (__UNI_FEATURE_PULL_DOWN_REFRESH__) {
     const { enablePullDownRefresh, navigationBar } = pageMeta;
diff --git a/packages/uni-h5/dist/uni-h5.es.js b/packages/uni-h5/dist/uni-h5.es.js
index d6948a543e64451a12b2c4c885c39f18f9eca381..5b2cec37115f65a01d49f77f07e8404991f04dc9 100644
--- a/packages/uni-h5/dist/uni-h5.es.js
+++ b/packages/uni-h5/dist/uni-h5.es.js
@@ -753,16 +753,30 @@ function removeStyle(id2) {
 function PolySymbol(name) {
   return Symbol(process.env.NODE_ENV !== "production" ? "[uni-app]: " + name : name);
 }
-function rpx2px(str) {
+function hasRpx(str) {
+  return str.indexOf("rpx") !== -1 || str.indexOf("upx") !== -1;
+}
+function rpx2px(str, replace = false) {
+  if (replace) {
+    return rpx2pxWithReplace(str);
+  }
   if (typeof str === "string") {
     const res = parseInt(str) || 0;
-    if (str.indexOf("rpx") !== -1 || str.indexOf("upx") !== -1) {
+    if (hasRpx(str)) {
       return uni.upx2px(res);
     }
     return res;
   }
   return str;
 }
+function rpx2pxWithReplace(str) {
+  if (!hasRpx(str)) {
+    return str;
+  }
+  return str.replace(/(\d+(\.\d+)?)[ru]px/g, (_a, b) => {
+    return uni.upx2px(parseFloat(b)) + "px";
+  });
+}
 const ICON_PATH_CANCEL = "M20.928 10.176l-4.928 4.928-4.928-4.928-0.896 0.896 4.928 4.928-4.928 4.928 0.896 0.896 4.928-4.928 4.928 4.928 0.896-0.896-4.928-4.928 4.928-4.928-0.896-0.896zM16 2.080q-3.776 0-7.040 1.888-3.136 1.856-4.992 4.992-1.888 3.264-1.888 7.040t1.888 7.040q1.856 3.136 4.992 4.992 3.264 1.888 7.040 1.888t7.040-1.888q3.136-1.856 4.992-4.992 1.888-3.264 1.888-7.040t-1.888-7.040q-1.856-3.136-4.992-4.992-3.264-1.888-7.040-1.888zM16 28.64q-3.424 0-6.4-1.728-2.848-1.664-4.512-4.512-1.728-2.976-1.728-6.4t1.728-6.4q1.664-2.848 4.512-4.512 2.976-1.728 6.4-1.728t6.4 1.728q2.848 1.664 4.512 4.512 1.728 2.976 1.728 6.4t-1.728 6.4q-1.664 2.848-4.512 4.512-2.976 1.728-6.4 1.728z";
 const ICON_PATH_CLEAR = "M16 0q-4.352 0-8.064 2.176-3.616 2.144-5.76 5.76-2.176 3.712-2.176 8.064t2.176 8.064q2.144 3.616 5.76 5.76 3.712 2.176 8.064 2.176t8.064-2.176q3.616-2.144 5.76-5.76 2.176-3.712 2.176-8.064t-2.176-8.064q-2.144-3.616-5.76-5.76-3.712-2.176-8.064-2.176zM22.688 21.408q0.32 0.32 0.304 0.752t-0.336 0.736-0.752 0.304-0.752-0.32l-5.184-5.376-5.376 5.184q-0.32 0.32-0.752 0.304t-0.736-0.336-0.304-0.752 0.32-0.752l5.376-5.184-5.184-5.376q-0.32-0.32-0.304-0.752t0.336-0.752 0.752-0.304 0.752 0.336l5.184 5.376 5.376-5.184q0.32-0.32 0.752-0.304t0.752 0.336 0.304 0.752-0.336 0.752l-5.376 5.184 5.184 5.376z";
 const ICON_PATH_DOWNLOAD = "M15.808 1.696q-3.776 0-7.072 1.984-3.2 1.888-5.088 5.152-1.952 3.392-1.952 7.36 0 3.776 1.952 7.072 1.888 3.2 5.088 5.088 3.296 1.952 7.072 1.952 3.968 0 7.36-1.952 3.264-1.888 5.152-5.088 1.984-3.296 1.984-7.072 0-4-1.984-7.36-1.888-3.264-5.152-5.152-3.36-1.984-7.36-1.984zM20.864 18.592l-3.776 4.928q-0.448 0.576-1.088 0.576t-1.088-0.576l-3.776-4.928q-0.448-0.576-0.24-0.992t0.944-0.416h2.976v-8.928q0-0.256 0.176-0.432t0.4-0.176h1.216q0.224 0 0.4 0.176t0.176 0.432v8.928h2.976q0.736 0 0.944 0.416t-0.24 0.992z";
@@ -799,6 +813,18 @@ function getPageIdByVm(vm) {
     return rootProxy.$page.id;
   }
 }
+const PAGE_META_KEYS = ["navigationBar", "refreshOptions"];
+function initGlobalStyle() {
+  return JSON.parse(JSON.stringify(__uniConfig.globalStyle || {}));
+}
+function mergePageMeta(id2, pageMeta) {
+  const globalStyle = initGlobalStyle();
+  const res = extend({ id: id2 }, globalStyle, pageMeta);
+  PAGE_META_KEYS.forEach((name) => {
+    res[name] = extend({}, globalStyle[name], pageMeta[name]);
+  });
+  return res;
+}
 function disableScrollListener(evt) {
   evt.preventDefault();
 }
@@ -4810,6 +4836,7 @@ const ShowActionSheetProtocol = {
     required: true
   },
   title: String,
+  alertText: String,
   itemColor: String,
   popover: Object
 };
@@ -11928,14 +11955,6 @@ const props$j = {
     default: false
   }
 };
-function upx2pxStr(val) {
-  if (/\d+[ur]px$/i.test(val)) {
-    val.replace(/\d+[ur]px$/i, (text2) => {
-      return `${upx2px(parseFloat(text2))}px`;
-    });
-  }
-  return val || "";
-}
 function useState$2(props2) {
   const interval = computed(() => {
     const interval2 = Number(props2.interval);
@@ -12372,13 +12391,13 @@ var Swiper = /* @__PURE__ */ defineBuiltInComponent({
         style = props2.vertical ? {
           left: 0,
           right: 0,
-          top: upx2pxStr(props2.previousMargin),
-          bottom: upx2pxStr(props2.nextMargin)
+          top: rpx2px(props2.previousMargin, true),
+          bottom: rpx2px(props2.nextMargin, true)
         } : {
           top: 0,
           bottom: 0,
-          left: upx2pxStr(props2.previousMargin),
-          right: upx2pxStr(props2.nextMargin)
+          left: rpx2px(props2.previousMargin, true),
+          right: rpx2px(props2.nextMargin, true)
         };
       }
       return style;
@@ -12998,17 +13017,6 @@ function initPageMeta(id2) {
   }
   return reactive(normalizePageMeta(JSON.parse(JSON.stringify(mergePageMeta(id2, __uniRoutes[0].meta)))));
 }
-const PAGE_META_KEYS = [
-  "navigationBar",
-  "refreshOptions"
-];
-function mergePageMeta(id2, pageMeta) {
-  const res = extend({ id: id2 }, __uniConfig.globalStyle, pageMeta);
-  PAGE_META_KEYS.forEach((name) => {
-    res[name] = extend({}, __uniConfig.globalStyle[name], pageMeta[name]);
-  });
-  return res;
-}
 function normalizePageMeta(pageMeta) {
   if (__UNI_FEATURE_PULL_DOWN_REFRESH__) {
     const { enablePullDownRefresh, navigationBar } = pageMeta;
@@ -17634,6 +17642,10 @@ const props$3 = {
     type: String,
     default: ""
   },
+  alertText: {
+    type: String,
+    default: ""
+  },
   itemList: {
     type: Array,
     default() {
@@ -17720,9 +17732,10 @@ var actionSheet = /* @__PURE__ */ defineComponent({
       }
       $event.preventDefault();
     }
+    const fixTitle = computed(() => props2.title || props2.alertText);
     watch(() => props2.visible, () => {
       nextTick(() => {
-        if (props2.title) {
+        if (fixTitle.value) {
           titleHeight.value = document.querySelector(".uni-actionsheet__title").offsetHeight;
         }
         scroller.update();
@@ -17753,14 +17766,14 @@ var actionSheet = /* @__PURE__ */ defineComponent({
           "ref": main,
           "class": "uni-actionsheet__menu",
           "onWheel": _handleWheel
-        }, [props2.title ? createVNode(Fragment, null, [createVNode("div", {
+        }, [fixTitle.value ? createVNode(Fragment, null, [createVNode("div", {
           "class": "uni-actionsheet__cell",
           "style": {
             height: `${titleHeight.value}px`
           }
         }, null), createVNode("div", {
           "class": "uni-actionsheet__title"
-        }, [props2.title])]) : "", createVNode("div", {
+        }, [fixTitle.value])]) : "", createVNode("div", {
           "style": {
             maxHeight: `${HEIGHT.value}px`,
             overflow: "hidden"
diff --git a/packages/uni-h5/src/framework/setup/provide/page.ts b/packages/uni-h5/src/framework/setup/provide/page.ts
index a21afde82727958837dc0e1169be87c7c31291b1..9f8493667560245a163006f3213f3039c968b7db 100644
--- a/packages/uni-h5/src/framework/setup/provide/page.ts
+++ b/packages/uni-h5/src/framework/setup/provide/page.ts
@@ -3,7 +3,7 @@ import { reactive, provide, inject } from 'vue'
 import { useRoute } from 'vue-router'
 
 import { NAVBAR_HEIGHT, parseQuery } from '@dcloudio/uni-shared'
-import { PolySymbol, rpx2px } from '@dcloudio/uni-core'
+import { mergePageMeta, PolySymbol, rpx2px } from '@dcloudio/uni-core'
 
 import safeAreaInsets from 'safe-area-insets'
 
@@ -60,23 +60,6 @@ function initPageMeta(id: number) {
   )
 }
 
-const PAGE_META_KEYS: ['navigationBar', 'refreshOptions'] = [
-  'navigationBar',
-  'refreshOptions',
-]
-
-function mergePageMeta(id: number, pageMeta: UniApp.PageRouteMeta) {
-  const res = extend({ id }, __uniConfig.globalStyle, pageMeta)
-  PAGE_META_KEYS.forEach((name) => {
-    ;(res as any)[name] = extend(
-      {},
-      __uniConfig.globalStyle[name],
-      pageMeta[name]
-    )
-  })
-  return res
-}
-
 function normalizePageMeta(pageMeta: UniApp.PageRouteMeta) {
   if (__UNI_FEATURE_PULL_DOWN_REFRESH__) {
     const { enablePullDownRefresh, navigationBar } = pageMeta
diff --git a/packages/uni-shared/dist/uni-shared.cjs.js b/packages/uni-shared/dist/uni-shared.cjs.js
index 3abc97280bd298449b8f4e1cdc61d379375c9065..d985ffdb2538f6e4fbac98d636c5157e79b1fea6 100644
--- a/packages/uni-shared/dist/uni-shared.cjs.js
+++ b/packages/uni-shared/dist/uni-shared.cjs.js
@@ -866,7 +866,8 @@ const ON_REACH_BOTTOM_DISTANCE = 50;
 const RESPONSIVE_MIN_WIDTH = 768;
 const COMPONENT_NAME_PREFIX = 'VUni';
 const PRIMARY_COLOR = '#007aff';
-const SELECTED_COLOR = '#0062cc';
+const SELECTED_COLOR = '#0062cc'; // 选中的颜色，如选项卡默认的选中颜色
+const BACKGROUND_COLOR = '#f7f7f7'; // 背景色，如标题栏默认背景色
 const UNI_SSR = '__uniSSR';
 const UNI_SSR_TITLE = 'title';
 const UNI_SSR_STORE = 'store';
@@ -882,6 +883,7 @@ function getEnvLocale() {
     return (lang && lang.replace(/[.:].*/, '')) || 'en';
 }
 
+exports.BACKGROUND_COLOR = BACKGROUND_COLOR;
 exports.BUILT_IN_TAGS = BUILT_IN_TAGS;
 exports.COMPONENT_NAME_PREFIX = COMPONENT_NAME_PREFIX;
 exports.COMPONENT_PREFIX = COMPONENT_PREFIX;
diff --git a/packages/uni-shared/dist/uni-shared.d.ts b/packages/uni-shared/dist/uni-shared.d.ts
index c20ef2588a001982478865a583face9363fde410..a381e62460007b81583d6d4d5f9f9fdca4f629ae 100644
--- a/packages/uni-shared/dist/uni-shared.d.ts
+++ b/packages/uni-shared/dist/uni-shared.d.ts
@@ -2,6 +2,8 @@ import { FontFaceDescriptors } from 'css-font-loading-module';
 
 export declare function addFont(family: string, source: string, desc?: FontFaceDescriptors): Promise<void>;
 
+export declare const BACKGROUND_COLOR = "#f7f7f7";
+
 export declare const BUILT_IN_TAGS: string[];
 
 export declare const cacheStringFunction: <T extends (str: string) => string>(fn: T) => T;
diff --git a/packages/uni-shared/dist/uni-shared.es.js b/packages/uni-shared/dist/uni-shared.es.js
index c22bbd2d089581dd51716aa44030ea8f731588fa..5b2a03166899e10e90a48cd66b06dc1bf96747d1 100644
--- a/packages/uni-shared/dist/uni-shared.es.js
+++ b/packages/uni-shared/dist/uni-shared.es.js
@@ -862,7 +862,8 @@ const ON_REACH_BOTTOM_DISTANCE = 50;
 const RESPONSIVE_MIN_WIDTH = 768;
 const COMPONENT_NAME_PREFIX = 'VUni';
 const PRIMARY_COLOR = '#007aff';
-const SELECTED_COLOR = '#0062cc';
+const SELECTED_COLOR = '#0062cc'; // 选中的颜色，如选项卡默认的选中颜色
+const BACKGROUND_COLOR = '#f7f7f7'; // 背景色，如标题栏默认背景色
 const UNI_SSR = '__uniSSR';
 const UNI_SSR_TITLE = 'title';
 const UNI_SSR_STORE = 'store';
@@ -878,4 +879,4 @@ function getEnvLocale() {
     return (lang && lang.replace(/[.:].*/, '')) || 'en';
 }
 
-export { BUILT_IN_TAGS, COMPONENT_NAME_PREFIX, COMPONENT_PREFIX, COMPONENT_SELECTOR_PREFIX, DATA_RE, NAVBAR_HEIGHT, NODE_TYPE_COMMENT, NODE_TYPE_ELEMENT, NODE_TYPE_PAGE, NODE_TYPE_TEXT, ON_REACH_BOTTOM_DISTANCE, PLUS_RE, PRIMARY_COLOR, RESPONSIVE_MIN_WIDTH, SCHEME_RE, SELECTED_COLOR, TABBAR_HEIGHT, TAGS, UNI_SSR, UNI_SSR_DATA, UNI_SSR_GLOBAL_DATA, UNI_SSR_STORE, UNI_SSR_TITLE, UniBaseNode, UniCommentNode, UniElement, UniEvent, UniInputElement, UniNode, UniTextAreaElement, UniTextNode, WEB_INVOKE_APPSERVICE, addFont, cacheStringFunction, callOptions, createRpx2Unit, debounce, decode, decodeAttr, decodeTag, decodedQuery, defaultRpx2Unit, encodeAttr, encodeTag, formatDateTime, getCustomDataset, getEnvLocale, getLen, initCustomDataset, invokeArrayFns, isBuiltInComponent, isCustomElement, isNativeTag, isServiceCustomElement, isServiceNativeTag, normalizeDataset, normalizeTarget, once, parseQuery, passive, plusReady, removeLeadingSlash, sanitise, scrollTo, stringifyQuery, updateElementStyle };
+export { BACKGROUND_COLOR, BUILT_IN_TAGS, COMPONENT_NAME_PREFIX, COMPONENT_PREFIX, COMPONENT_SELECTOR_PREFIX, DATA_RE, NAVBAR_HEIGHT, NODE_TYPE_COMMENT, NODE_TYPE_ELEMENT, NODE_TYPE_PAGE, NODE_TYPE_TEXT, ON_REACH_BOTTOM_DISTANCE, PLUS_RE, PRIMARY_COLOR, RESPONSIVE_MIN_WIDTH, SCHEME_RE, SELECTED_COLOR, TABBAR_HEIGHT, TAGS, UNI_SSR, UNI_SSR_DATA, UNI_SSR_GLOBAL_DATA, UNI_SSR_STORE, UNI_SSR_TITLE, UniBaseNode, UniCommentNode, UniElement, UniEvent, UniInputElement, UniNode, UniTextAreaElement, UniTextNode, WEB_INVOKE_APPSERVICE, addFont, cacheStringFunction, callOptions, createRpx2Unit, debounce, decode, decodeAttr, decodeTag, decodedQuery, defaultRpx2Unit, encodeAttr, encodeTag, formatDateTime, getCustomDataset, getEnvLocale, getLen, initCustomDataset, invokeArrayFns, isBuiltInComponent, isCustomElement, isNativeTag, isServiceCustomElement, isServiceNativeTag, normalizeDataset, normalizeTarget, once, parseQuery, passive, plusReady, removeLeadingSlash, sanitise, scrollTo, stringifyQuery, updateElementStyle };
diff --git a/packages/uni-shared/src/constants.ts b/packages/uni-shared/src/constants.ts
index be939211a82fe5df45ff966213c0514f434a2677..887ae181c7914d60ec626f6234ed3982eaa0e9c6 100644
--- a/packages/uni-shared/src/constants.ts
+++ b/packages/uni-shared/src/constants.ts
@@ -6,7 +6,8 @@ export const RESPONSIVE_MIN_WIDTH = 768
 export const COMPONENT_NAME_PREFIX = 'VUni'
 
 export const PRIMARY_COLOR = '#007aff'
-export const SELECTED_COLOR = '#0062cc'
+export const SELECTED_COLOR = '#0062cc' // 选中的颜色，如选项卡默认的选中颜色
+export const BACKGROUND_COLOR = '#f7f7f7' // 背景色，如标题栏默认背景色
 
 export const UNI_SSR = '__uniSSR'
 export const UNI_SSR_TITLE = 'title'
diff --git a/yarn.lock b/yarn.lock
index 8be75f2b0e264886a78238c3488e4a46538eff78..744e07f1236e7f405a7e4755a661e60133f022f8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2116,9 +2116,9 @@ acorn@^7.1.1, acorn@^7.4.0:
   integrity sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==
 
 acorn@^8.2.4:
-  version "8.4.0"
-  resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.4.0.tgz#af53266e698d7cffa416714b503066a82221be60"
-  integrity sha512-ULr0LDaEqQrMFGyQ3bhJkLsbtrQ8QibAseGZeaSUiT/6zb9IvIkomWHJIvgvwad+hinRAgsI51JcWk2yvwyL+w==
+  version "8.4.1"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.4.1.tgz#56c36251fc7cabc7096adc18f05afe814321a28c"
+  integrity sha512-asabaBSkEKosYKMITunzX177CXxQ4Q8BSSzMTKD+FefUhipQC70gfW5SiUDhYQ3vk8G+81HqQk7Fv9OXwwn9KA==
 
 add-stream@^1.0.0:
   version "1.0.0"