wip(app): uni-app-plus

765912d4 · fxy060608 · 01931e93 · 765912d4 · 765912d4 · 765912d4
24 changed file
--- a/package.json
+++ b/package.json
@@ -40,10 +40,12 @@
    "node": ">=10.0.0"
  },
  "devDependencies": {
+    "@babel/preset-env": "^7.14.7",
    "@dcloudio/types": "^2.2.18",
    "@jest/types": "^27.0.2",
    "@microsoft/api-extractor": "^7.13.2",
    "@rollup/plugin-alias": "^3.1.1",
+    "@rollup/plugin-babel": "^5.3.0",
    "@rollup/plugin-commonjs": "^17.0.0",
    "@rollup/plugin-json": "^4.1.0",
    "@rollup/plugin-node-resolve": "^11.0.1",

--- a/packages/uni-app-plus/dist/style.css
+++ b/packages/uni-app-plus/dist/style.css
-uni-button {
+uni-view {
-  position: relative;
  display: block;
-  margin-left: auto;
-  margin-right: auto;
-  padding-left: 14px;
-  padding-right: 14px;
-  box-sizing: border-box;
-  font-size: 18px;
-  text-align: center;
-  text-decoration: none;
-  line-height: 2.55555556;
-  border-radius: 5px;
-  -webkit-tap-highlight-color: transparent;
-  overflow: hidden;
-  color: #000000;
-  background-color: #f8f8f8;
-  cursor: pointer;
 }
+uni-view[hidden] {
-uni-button[hidden] {
+  display: none;
-  display: none !important;
-}
-uni-button:after {
-  content: ' ';
-  width: 200%;
-  height: 200%;
-  position: absolute;
-  top: 0;
-  left: 0;
-  border: 1px solid rgba(0, 0, 0, 0.2);
-  transform: scale(0.5);
-  transform-origin: 0 0;
-  box-sizing: border-box;
-  border-radius: 10px;
-}
-uni-button[native] {
-  padding-left: 0;
-  padding-right: 0;
-}
-uni-button[native] .uni-button-cover-view-wrapper {
-  border: inherit;
-  border-color: inherit;
-  border-radius: inherit;
-  background-color: inherit;
-}
-uni-button[native] .uni-button-cover-view-inner {
-  padding-left: 14px;
-  padding-right: 14px;
-}
-uni-button uni-cover-view {
-  line-height: inherit;
-  white-space: inherit;
-}
-uni-button[type='default'] {
-  color: #000000;
-  background-color: #f8f8f8;
-}
-uni-button[type='primary'] {
-  color: #ffffff;
-  background-color: #007aff;
-}
-uni-button[type='warn'] {
-  color: #ffffff;
-  background-color: #e64340;
-}
-uni-button[disabled] {
-  color: rgba(255, 255, 255, 0.6);
-  cursor: not-allowed;
-}
-uni-button[disabled][type='default'],
-uni-button[disabled]:not([type]) {
-  color: rgba(0, 0, 0, 0.3);
-  background-color: #f7f7f7;
-}
-uni-button[disabled][type='primary'] {
-  background-color: rgba(0, 122, 255, 0.6);
-}
-uni-button[disabled][type='warn'] {
-  background-color: #ec8b89;
-}
-uni-button[type='primary'][plain] {
-  color: #007aff;
-  border: 1px solid #007aff;
-  background-color: transparent;
-}
-uni-button[type='primary'][plain][disabled] {
-  color: rgba(0, 0, 0, 0.2);
-  border-color: rgba(0, 0, 0, 0.2);
-}
-uni-button[type='primary'][plain]:after {
-  border-width: 0;
-}
-uni-button[type='default'][plain] {
-  color: #353535;
-  border: 1px solid #353535;
-  background-color: transparent;
-}
-uni-button[type='default'][plain][disabled] {
-  color: rgba(0, 0, 0, 0.2);
-  border-color: rgba(0, 0, 0, 0.2);
-}
-uni-button[type='default'][plain]:after {
-  border-width: 0;
-}
-uni-button[plain] {
-  color: #353535;
-  border: 1px solid #353535;
-  background-color: transparent;
-}
-uni-button[plain][disabled] {
-  color: rgba(0, 0, 0, 0.2);
-  border-color: rgba(0, 0, 0, 0.2);
-}
-uni-button[plain]:after {
-  border-width: 0;
-}
-uni-button[plain][native] .uni-button-cover-view-inner {
-  padding: 0;
-}
-uni-button[type='warn'][plain] {
-  color: #e64340;
-  border: 1px solid #e64340;
-  background-color: transparent;
-}
-uni-button[type='warn'][plain][disabled] {
-  color: rgba(0, 0, 0, 0.2);
-  border-color: rgba(0, 0, 0, 0.2);
-}
-uni-button[type='warn'][plain]:after {
-  border-width: 0;
-}
-uni-button[size='mini'] {
-  display: inline-block;
-  line-height: 2.3;
-  font-size: 13px;
-  padding: 0 1.34em;
-}
-uni-button[size='mini'][native] {
-  padding: 0;
-}
-uni-button[size='mini'][native] .uni-button-cover-view-inner {
-  padding: 0 1.34em;
-}
-uni-button[loading]:not([disabled]) {
-  cursor: progress;
-}
-uni-button[loading]:before {
-  content: ' ';
-  display: inline-block;
-  width: 18px;
-  height: 18px;
-  vertical-align: middle;
-  animation: uni-loading 1s steps(12, end) infinite;
-  background-size: 100%;
-}
-uni-button[loading][type='primary'] {
-  color: rgba(255, 255, 255, 0.6);
-  background-color: #0062cc;
-}
-uni-button[loading][type='primary'][plain] {
-  color: #007aff;
-  background-color: transparent;
-}
-uni-button[loading][type='default'] {
-  color: rgba(0, 0, 0, 0.6);
-  background-color: #dedede;
-}
-uni-button[loading][type='default'][plain] {
-  color: #353535;
-  background-color: transparent;
-}
-uni-button[loading][type='warn'] {
-  color: rgba(255, 255, 255, 0.6);
-  background-color: #ce3c39;
-}
-uni-button[loading][type='warn'][plain] {
-  color: #e64340;
-  background-color: transparent;
-}
-uni-button[loading][native]:before {
-  content: none;
-}
-.button-hover {
-  color: rgba(0, 0, 0, 0.6);
-  background-color: #dedede;
-}
-.button-hover[plain] {
-  color: rgba(53, 53, 53, 0.6);
-  border-color: rgba(53, 53, 53, 0.6);
-  background-color: transparent;
-}
-.button-hover[type='primary'] {
-  color: rgba(255, 255, 255, 0.6);
-  background-color: #0062cc;
-}
-.button-hover[type='primary'][plain] {
-  color: rgba(26, 173, 25, 0.6);
-  border-color: rgba(26, 173, 25, 0.6);
-  background-color: transparent;
-}
-.button-hover[type='default'] {
-  color: rgba(0, 0, 0, 0.6);
-  background-color: #dedede;
-}
-.button-hover[type='default'][plain] {
-  color: rgba(53, 53, 53, 0.6);
-  border-color: rgba(53, 53, 53, 0.6);
-  background-color: transparent;
-}
-.button-hover[type='warn'] {
-  color: rgba(255, 255, 255, 0.6);
-  background-color: #ce3c39;
-}
-.button-hover[type='warn'][plain] {
-  color: rgba(230, 67, 64, 0.6);
-  border-color: rgba(230, 67, 64, 0.6);
-  background-color: transparent;
 }
--- a/packages/uni-app-plus/dist/uni-app-service.es.js
+++ b/packages/uni-app-plus/dist/uni-app-service.es.js
@@ -5614,6 +5614,7 @@ var serviceContext = (function (vue) {
      });
  }
+  const VD_SYNC = 'vdSync';
  const ON_WEBVIEW_READY = 'onWebviewReady';
  function initNVue(webviewStyle, routeMeta, path) {
@@ -6490,7 +6491,6 @@ var serviceContext = (function (vue) {
      }, delay);
  }
-  const BRIDGE_NODE_SYNC = 'nodeSync';
  const ACTION_TYPE_PAGE_CREATE = 1;
  const ACTION_TYPE_PAGE_CREATED = 2;
  const ACTION_TYPE_CREATE = 3;
@@ -6498,7 +6498,8 @@ var serviceContext = (function (vue) {
  const ACTION_TYPE_REMOVE = 5;
  const ACTION_TYPE_SET_ATTRIBUTE = 6;
  const ACTION_TYPE_REMOVE_ATTRIBUTE = 7;
  const ACTION_TYPE_SET_TEXT = 8;
  class UniPageNode extends UniNode {
      constructor(pageId, options, setup = false) {
          super(NODE_TYPE_PAGE, '#page', null);
@@ -6509,6 +6510,7 @@ var serviceContext = (function (vue) {
          this.pageNode = this;
          this.createAction = [ACTION_TYPE_PAGE_CREATE, options];
          this.createdAction = [ACTION_TYPE_PAGE_CREATED];
+          this._update = this.update.bind(this);
          setup && this.setup();
      }
      onCreate(thisNode, nodeName) {
@@ -6548,6 +6550,10 @@ var serviceContext = (function (vue) {
      }
      push(action) {
          this.updateActions.push(action);
+          if ((process.env.NODE_ENV !== 'production')) {
+              console.log(formatLog('PageNode', 'push', action));
+          }
+          vue.queuePostFlushCb(this._update);
      }
      restore() {
          this.push(this.createAction);
@@ -6557,20 +6563,23 @@ var serviceContext = (function (vue) {
      setup() {
          this.send([this.createAction]);
      }
-      mounted() {
+      // mounted() {
-          const { updateActions, createdAction } = this;
+      //   const { updateActions, createdAction } = this
-          updateActions.unshift(createdAction);
+      //   updateActions.unshift(createdAction)
-          this.update();
+      //   this.update()
-      }
+      // }
      update() {
          const { updateActions } = this;
+          if ((process.env.NODE_ENV !== 'production')) {
+              console.log(formatLog('PageNode', 'update', updateActions.length));
+          }
          if (updateActions.length) {
              this.send(updateActions);
              updateActions.length = 0;
          }
      }
      send(action) {
-          UniServiceJSBridge.publishHandler(BRIDGE_NODE_SYNC, action, this.pageId);
+          UniServiceJSBridge.publishHandler(VD_SYNC, action, this.pageId);
      }
  }
  function pushCreateAction(pageNode, nodeId, nodeName) {
@@ -6730,6 +6739,7 @@ var serviceContext = (function (vue) {
  function initPageOptions({ meta }) {
      const statusbarHeight = getStatusbarHeight();
      return {
+          route: meta.route,
          version: 1,
          locale: '',
          disableScroll: meta.disableScroll === true,

--- a/packages/uni-app-plus/dist/uni-app-view.umd.js
+++ b/packages/uni-app-plus/dist/uni-app-view.umd.js
--- a/packages/uni-app-plus/src/PageAction.ts
+++ b/packages/uni-app-plus/src/PageAction.ts
+export const ACTION_TYPE_PAGE_CREATE = 1
+export const ACTION_TYPE_PAGE_CREATED = 2
+export const ACTION_TYPE_CREATE = 3
+export const ACTION_TYPE_INSERT = 4
+export const ACTION_TYPE_REMOVE = 5
+export const ACTION_TYPE_SET_ATTRIBUTE = 6
+export const ACTION_TYPE_REMOVE_ATTRIBUTE = 7
+export const ACTION_TYPE_SET_TEXT = 8
+export interface PageNodeOptions {
+  route: string
+  version: number
+  locale: string
+  disableScroll: boolean
+  onPageScroll: boolean
+  onPageReachBottom: boolean
+  onReachBottomDistance: number
+  statusbarHeight: number
+  windowTop: number
+  windowBottom: number
+}
+export interface PageCreateData extends PageNodeOptions {}
+export type PageCreateAction = [typeof ACTION_TYPE_PAGE_CREATE, PageCreateData]
+export type PageCreatedAction = [typeof ACTION_TYPE_PAGE_CREATED]
+export type CreateAction = [
+  typeof ACTION_TYPE_CREATE,
+  number, // nodeId
+  string | number //nodeName
+]
+export type InsertAction = [
+  typeof ACTION_TYPE_INSERT,
+  number, // nodeId
+  number, // parentNodeId
+  number, // index
+  Record<string, any> // Element JSON
+]
+export type RemoveAction = [
+  typeof ACTION_TYPE_REMOVE,
+  number, // nodeId
+  number // parentNodeId
+]
+export type SetAttributeAction = [
+  typeof ACTION_TYPE_SET_ATTRIBUTE,
+  number, // nodeId
+  string, // attribute name
+  unknown // attribute value
+]
+export type RemoveAttributeAction = [
+  typeof ACTION_TYPE_REMOVE_ATTRIBUTE,
+  number, // nodeId
+  string // attribute name
+]
+export type SetTextAction = [
+  typeof ACTION_TYPE_SET_TEXT,
+  number, // nodeId
+  string // text content
+]
+export type PageUpdateAction =
+  | CreateAction
+  | InsertAction
+  | RemoveAction
+  | SetAttributeAction
+  | RemoveAttributeAction
+  | SetTextAction
+export type PageAction = PageCreateAction | PageCreatedAction | PageUpdateAction
--- a/packages/uni-app-plus/src/constants.ts
+++ b/packages/uni-app-plus/src/constants.ts
+export const VD_SYNC = 'vdSync'
 export const ON_WEBVIEW_READY = 'onWebviewReady'
--- a/packages/uni-app-plus/src/service/framework/dom/Page.ts
+++ b/packages/uni-app-plus/src/service/framework/dom/Page.ts
+import { queuePostFlushCb } from 'vue'
 import {
  UniNode,
  NODE_TYPE_PAGE,
  UniBaseNode,
  IUniPageNode,
+  formatLog,
 } from '@dcloudio/uni-shared'
+import {
-const BRIDGE_NODE_SYNC = 'nodeSync'
+  PageCreateAction,
+  PageCreatedAction,
-const ACTION_TYPE_PAGE_CREATE = 1
+  PageAction,
-const ACTION_TYPE_PAGE_CREATED = 2
+  PageNodeOptions,
-export const ACTION_TYPE_CREATE = 3
+  ACTION_TYPE_CREATE,
-export const ACTION_TYPE_INSERT = 4
+  ACTION_TYPE_INSERT,
-export const ACTION_TYPE_REMOVE = 5
+  ACTION_TYPE_REMOVE,
-export const ACTION_TYPE_SET_ATTRIBUTE = 6
+  ACTION_TYPE_SET_ATTRIBUTE,
-export const ACTION_TYPE_REMOVE_ATTRIBUTE = 7
+  ACTION_TYPE_REMOVE_ATTRIBUTE,
-export const ACTION_TYPE_SET_TEXT = 8
+  ACTION_TYPE_SET_TEXT,
+  ACTION_TYPE_PAGE_CREATE,
-export interface PageNodeOptions {
+  ACTION_TYPE_PAGE_CREATED,
-  version: number
+} from '../../../PageAction'
-  locale: string
+import { VD_SYNC } from '../../../constants'
-  disableScroll: boolean
-  onPageScroll: boolean
-  onPageReachBottom: boolean
-  onReachBottomDistance: number
-  statusbarHeight: number
-  windowTop: number
-  windowBottom: number
-}
-interface PageCreateData extends PageNodeOptions {}
-type PageCreateAction = [typeof ACTION_TYPE_PAGE_CREATE, PageCreateData]
-type PageCreatedAction = [typeof ACTION_TYPE_PAGE_CREATED]
-export type CreateAction = [
-  typeof ACTION_TYPE_CREATE,
-  number, // nodeId
-  string | number //nodeName
-]
-export type InsertAction = [
-  typeof ACTION_TYPE_INSERT,
-  number, // nodeId
-  number, // parentNodeId
-  number, // index
-  Record<string, any> // Element JSON
-]
-export type RemoveAction = [
-  typeof ACTION_TYPE_REMOVE,
-  number, // nodeId
-  number // parentNodeId
-]
-export type SetAttributeAction = [
-  typeof ACTION_TYPE_SET_ATTRIBUTE,
-  number, // nodeId
-  string, // attribute name
-  unknown // attribute value
-]
-export type RemoveAttributeAction = [
-  typeof ACTION_TYPE_REMOVE_ATTRIBUTE,
-  number, // nodeId
-  string // attribute name
-]
-export type SetTextAction = [
-  typeof ACTION_TYPE_SET_TEXT,
-  number, // nodeId
-  string // text content
-]
-type PageUpdateAction =
-  | CreateAction
-  | InsertAction
-  | RemoveAction
-  | SetAttributeAction
-  | RemoveAttributeAction
-  | SetTextAction
-export type PageAction = PageCreateAction | PageCreatedAction | PageUpdateAction
 export default class UniPageNode extends UniNode implements IUniPageNode {
  pageId: number
@@ -87,6 +28,9 @@ export default class UniPageNode extends UniNode implements IUniPageNode {
  private createAction: PageCreateAction
  private createdAction: PageCreatedAction
  public updateActions: PageAction[] = []
+  private _update: () => void
  constructor(
    pageId: number,
    options: PageNodeOptions,
@@ -100,6 +44,8 @@ export default class UniPageNode extends UniNode implements IUniPageNode {
    this.createAction = [ACTION_TYPE_PAGE_CREATE, options]
    this.createdAction = [ACTION_TYPE_PAGE_CREATED]
+    this._update = this.update.bind(this)
    setup && this.setup()
  }
  onCreate(thisNode: UniNode, nodeName: string | number) {
@@ -139,6 +85,10 @@ export default class UniPageNode extends UniNode implements IUniPageNode {
  }
  push(action: PageAction) {
    this.updateActions.push(action)
+    if (__DEV__) {
+      console.log(formatLog('PageNode', 'push', action))
+    }
+    queuePostFlushCb(this._update)
  }
  restore() {
    this.push(this.createAction)
@@ -148,20 +98,23 @@ export default class UniPageNode extends UniNode implements IUniPageNode {
  setup() {
    this.send([this.createAction])
  }
-  mounted() {
+  // mounted() {
-    const { updateActions, createdAction } = this
+  //   const { updateActions, createdAction } = this
-    updateActions.unshift(createdAction)
+  //   updateActions.unshift(createdAction)
-    this.update()
+  //   this.update()
-  }
+  // }
  update() {
    const { updateActions } = this
+    if (__DEV__) {
+      console.log(formatLog('PageNode', 'update', updateActions.length))
+    }
    if (updateActions.length) {
      this.send(updateActions)
      updateActions.length = 0
    }
  }
  send(action: PageAction[]) {
-    UniServiceJSBridge.publishHandler(BRIDGE_NODE_SYNC, action, this.pageId)
+    UniServiceJSBridge.publishHandler(VD_SYNC, action, this.pageId)
  }
 }

--- a/packages/uni-app-plus/src/service/framework/page/define.ts
+++ b/packages/uni-app-plus/src/service/framework/page/define.ts
 import { once } from '@dcloudio/uni-shared'
 import { createApp, defineComponent } from 'vue'
-import { createPageNode, PageNodeOptions } from '../dom/Page'
+import { createPageNode } from '../dom/Page'
 import { setupPage } from './setup'
 import __vuePlugin from '../plugin'
+import { PageNodeOptions } from '../../../PageAction'
 export type VueComponent = ReturnType<typeof defineComponent>

--- a/packages/uni-app-plus/src/service/framework/page/register.ts
+++ b/packages/uni-app-plus/src/service/framework/page/register.ts
+import { ComponentPublicInstance } from 'vue'
 import { hasOwn } from '@vue/shared'
 import {
  formatLog,
  NAVBAR_HEIGHT,
  ON_REACH_BOTTOM_DISTANCE,
 } from '@dcloudio/uni-shared'
+import { initPageInternalInstance } from '@dcloudio/uni-core'
 import { initEntry } from '../app/initEntry'
 import { initRouteOptions } from './routeOptions'
 import { createWebview, initWebview } from '../webview'
 import { createPage } from './define'
-import { PageNodeOptions } from '../dom/Page'
+import { PageNodeOptions } from '../../../PageAction'
 import { getStatusbarHeight } from '../../../helpers/statusBar'
 import tabBar from '../app/tabBar'
 import { addCurrentPage } from './getCurrentPages'
-import { initPageInternalInstance } from '@dcloudio/uni-core'
-import { ComponentPublicInstance } from 'vue'
 export type OpenType =
  | 'navigateTo'
@@ -92,6 +93,7 @@ export function registerPage({
 function initPageOptions({ meta }: UniApp.UniRoute): PageNodeOptions {
  const statusbarHeight = getStatusbarHeight()
  return {
+    route: meta.route,
    version: 1,
    locale: '',
    disableScroll: meta.disableScroll === true,

--- a/packages/uni-app-plus/src/service/framework/runtime.ts
+++ b/packages/uni-app-plus/src/service/framework/runtime.ts
-import { ComponentInternalInstance } from 'vue'
-import { extend } from '@vue/shared'
-interface JsRuntime {
-  injectHook: (
-    type: string,
-    hook: Function,
-    target: ComponentInternalInstance | null,
-    prepend: boolean
-  ) => Function | undefined
-  createApp: typeof createApp
-}
-export function defineRuntime(runtime: JsRuntime) {
-  // @ts-expect-error
-  extend(jsRuntime, runtime)
-}
--- a/packages/uni-app-plus/src/view/components/index.ts
+++ b/packages/uni-app-plus/src/view/components/index.ts
-import { createApp, h } from 'vue'
+export * from './view'
-import wrapper from 'vue3-webcomponent-wrapper'
-import '@dcloudio/uni-components/style/button.css'
-import {
-  // Audio,
-  Button,
-  // Canvas,
-  // Checkbox,
-  // CheckboxGroup,
-  // Editor,
-  // Form,
-  Icon,
-  Image,
-  // Input,
-  // Label,
-  // MovableArea,
-  // MovableView,
-  // Navigator,
-  // PickerView,
-  // PickerViewColumn,
-  // Progress,
-  // Radio,
-  // RadioGroup,
-  // ResizeSensor,
-  // RichText,
-  // ScrollView,
-  // Slider,
-  // Swiper,
-  // SwiperItem,
-  // Switch,
-  Text,
-  // Textarea,
-  View,
-} from '@dcloudio/uni-components'
-const { customElements } = window
-customElements.define('v-uni-button', wrapper(Button, createApp, h))
-customElements.define('v-uni-icon', wrapper(Icon, createApp, h))
-customElements.define('v-uni-image', wrapper(Image, createApp, h))
-customElements.define('v-uni-text', wrapper(Text, createApp, h))
-customElements.define('v-uni-view', wrapper(View, createApp, h))
--- a/packages/uni-app-plus/src/view/components/view.ts
+++ b/packages/uni-app-plus/src/view/components/view.ts
+import '@dcloudio/uni-components/style/view.css'
+export function View() {
+  return document.createElement('uni-view')
+}
--- a/packages/uni-app-plus/src/view/framework/index.ts
+++ b/packages/uni-app-plus/src/view/framework/index.ts
+import { initSubscribeHandlers } from './subscriber'
+export function initView() {
+  initSubscribeHandlers()
+}
--- a/packages/uni-app-plus/src/view/framework/subscriber/index.ts
+++ b/packages/uni-app-plus/src/view/framework/subscriber/index.ts
+import { VD_SYNC } from '../../../constants'
+import { onVdSync } from './vdom'
+export function initSubscribeHandlers() {
+  const { subscribe } = UniViewJSBridge
+  subscribe(VD_SYNC, onVdSync)
+}
--- a/packages/uni-app-plus/src/view/framework/subscriber/vdom/index.ts
+++ b/packages/uni-app-plus/src/view/framework/subscriber/vdom/index.ts
+import {
+  ACTION_TYPE_PAGE_CREATE,
+  ACTION_TYPE_PAGE_CREATED,
+  PageAction,
+} from '../../../../PageAction'
+import { onPageCreate } from './onPageCreate'
+import { onPageCreated } from './onPageCreated'
+export function onVdSync(actions: PageAction[]) {
+  actions.forEach((action) => {
+    switch (action[0]) {
+      case ACTION_TYPE_PAGE_CREATE:
+        return onPageCreate(action[1])
+      case ACTION_TYPE_PAGE_CREATED:
+        return onPageCreated()
+    }
+  })
+}
--- a/packages/uni-app-plus/src/view/framework/subscriber/vdom/onPageCreate.ts
+++ b/packages/uni-app-plus/src/view/framework/subscriber/vdom/onPageCreate.ts
+import {
+  createScrollListener,
+  CreateScrollListenerOptions,
+  disableScrollListener,
+  updateCssVar,
+} from '@dcloudio/uni-core'
+import { formatLog } from '@dcloudio/uni-shared'
+import { PageCreateData } from '../../../../PageAction'
+export function onPageCreate({
+  route,
+  disableScroll,
+  onPageScroll,
+  onPageReachBottom,
+  onReachBottomDistance,
+  statusbarHeight,
+  windowTop,
+  windowBottom,
+}: PageCreateData) {
+  const pageId = plus.webview.currentWebview().id!
+  ;(window as any).__id__ = pageId
+  document.title = `${route}[${pageId}]`
+  initCssVar(statusbarHeight, windowTop, windowBottom)
+  if (disableScroll) {
+    document.addEventListener('touchmove', disableScrollListener)
+  } else if (onPageScroll || onPageReachBottom) {
+    initPageScroll(onPageScroll, onPageReachBottom, onReachBottomDistance)
+  }
+}
+function initCssVar(
+  statusbarHeight: number,
+  windowTop: number,
+  windowBottom: number
+) {
+  const cssVars = {
+    '--window-left': '0px',
+    '--window-right': '0px',
+    '--window-top': windowTop + 'px',
+    '--window-bottom': windowBottom + 'px',
+    '--status-bar-height': statusbarHeight + 'px',
+  }
+  if (__DEV__) {
+    console.log(formatLog('initCssVar', cssVars))
+  }
+  updateCssVar(cssVars)
+}
+function initPageScroll(
+  onPageScroll: boolean,
+  onPageReachBottom: boolean,
+  onReachBottomDistance: number
+) {
+  const opts: CreateScrollListenerOptions = {}
+  if (onPageScroll) {
+    opts.onPageScroll = (scrollTop) => {
+      UniViewJSBridge.publishHandler('onPageScroll', { scrollTop })
+    }
+  }
+  if (onPageReachBottom) {
+    opts.onReachBottomDistance = onReachBottomDistance
+    opts.onReachBottom = () => UniViewJSBridge.publishHandler('onReachBottom')
+  }
+  // 避免监听太早，直接触发了 scroll
+  requestAnimationFrame(() =>
+    document.addEventListener('scroll', createScrollListener(opts))
+  )
+}
--- a/packages/uni-app-plus/src/view/framework/subscriber/vdom/onPageCreated.ts
+++ b/packages/uni-app-plus/src/view/framework/subscriber/vdom/onPageCreated.ts
+export function onPageCreated() {}
--- a/packages/uni-app-plus/src/view/ready.ts
+++ b/packages/uni-app-plus/src/view/ready.ts
 import { ON_WEBVIEW_READY } from '../constants'
 import { UniViewJSBridge } from './bridge'
+import { initView } from './framework'
 ;(window as any).UniViewJSBridge = UniViewJSBridge
 function onWebviewReady() {
+  initView()
  UniViewJSBridge.publishHandler(ON_WEBVIEW_READY)
 }
 if (typeof plus !== 'undefined') {

--- a/packages/uni-app-vue/build.json
+++ b/packages/uni-app-vue/build.json
@@ -11,7 +11,8 @@
      "__VUE_OPTIONS_API__": "true",
      "__VUE_PROD_DEVTOOLS__": "false"
    },
-    "external": false
+    "external": false,
+    "babel": true
  },
  {
    "input": {

--- a/packages/uni-app-vue/dist/service.runtime.esm.js
+++ b/packages/uni-app-vue/dist/service.runtime.esm.js
--- a/packages/uni-h5/dist/uni-h5.es.js
+++ b/packages/uni-h5/dist/uni-h5.es.js
@@ -737,7 +737,7 @@ var safeAreaInsets = {
  onChange,
  offChange
 };
-var D__DCloud_local_git_uniAppNext_node_modules_safeAreaInsets_out = safeAreaInsets;
+var out = safeAreaInsets;
 const onEventPrevent = /* @__PURE__ */ withModifiers(() => {
 }, ["prevent"]);
 const onEventStop = /* @__PURE__ */ withModifiers(() => {
@@ -749,10 +749,10 @@ function getWindowOffset() {
  const left = parseInt(style.getPropertyValue("--window-left"));
  const right = parseInt(style.getPropertyValue("--window-right"));
  return {
-    top: top ? top + D__DCloud_local_git_uniAppNext_node_modules_safeAreaInsets_out.top : 0,
+    top: top ? top + out.top : 0,
-    bottom: bottom ? bottom + D__DCloud_local_git_uniAppNext_node_modules_safeAreaInsets_out.bottom : 0,
+    bottom: bottom ? bottom + out.bottom : 0,
-    left: left ? left + D__DCloud_local_git_uniAppNext_node_modules_safeAreaInsets_out.left : 0,
+    left: left ? left + out.left : 0,
-    right: right ? right + D__DCloud_local_git_uniAppNext_node_modules_safeAreaInsets_out.right : 0
+    right: right ? right + out.right : 0
  };
 }
 function updateCssVar(cssVars) {
@@ -13071,7 +13071,7 @@ function normalizePageMeta(pageMeta) {
      }, pageMeta.pullToRefresh));
      const { type, style } = navigationBar;
      if (style !== "custom" && type !== "transparent") {
-        pullToRefresh.offset += NAVBAR_HEIGHT + D__DCloud_local_git_uniAppNext_node_modules_safeAreaInsets_out.top;
+        pullToRefresh.offset += NAVBAR_HEIGHT + out.top;
      }
      pageMeta.pullToRefresh = pullToRefresh;
    }
@@ -15246,7 +15246,7 @@ const getSystemInfoSync = /* @__PURE__ */ defineSyncApi("getSystemInfoSync", ()
  const windowWidth = getWindowWidth(screenWidth);
  let windowHeight = window.innerHeight;
  const language = navigator.language;
-  const statusBarHeight = D__DCloud_local_git_uniAppNext_node_modules_safeAreaInsets_out.top;
+  const statusBarHeight = out.top;
  let osname;
  let osversion;
  let model;
@@ -15359,12 +15359,12 @@ const getSystemInfoSync = /* @__PURE__ */ defineSyncApi("getSystemInfoSync", ()
  const system = `${osname} ${osversion}`;
  const platform = osname.toLocaleLowerCase();
  const safeArea = {
-    left: D__DCloud_local_git_uniAppNext_node_modules_safeAreaInsets_out.left,
+    left: out.left,
-    right: windowWidth - D__DCloud_local_git_uniAppNext_node_modules_safeAreaInsets_out.right,
+    right: windowWidth - out.right,
-    top: D__DCloud_local_git_uniAppNext_node_modules_safeAreaInsets_out.top,
+    top: out.top,
-    bottom: windowHeight - D__DCloud_local_git_uniAppNext_node_modules_safeAreaInsets_out.bottom,
+    bottom: windowHeight - out.bottom,
-    width: windowWidth - D__DCloud_local_git_uniAppNext_node_modules_safeAreaInsets_out.left - D__DCloud_local_git_uniAppNext_node_modules_safeAreaInsets_out.right,
+    width: windowWidth - out.left - out.right,
-    height: windowHeight - D__DCloud_local_git_uniAppNext_node_modules_safeAreaInsets_out.top - D__DCloud_local_git_uniAppNext_node_modules_safeAreaInsets_out.bottom
+    height: windowHeight - out.top - out.bottom
  };
  const { top: windowTop, bottom: windowBottom } = getWindowOffset();
  windowHeight -= windowTop;
@@ -15384,10 +15384,10 @@ const getSystemInfoSync = /* @__PURE__ */ defineSyncApi("getSystemInfoSync", ()
    model,
    safeArea,
    safeAreaInsets: {
-      top: D__DCloud_local_git_uniAppNext_node_modules_safeAreaInsets_out.top,
+      top: out.top,
-      right: D__DCloud_local_git_uniAppNext_node_modules_safeAreaInsets_out.right,
+      right: out.right,
-      bottom: D__DCloud_local_git_uniAppNext_node_modules_safeAreaInsets_out.bottom,
+      bottom: out.bottom,
-      left: D__DCloud_local_git_uniAppNext_node_modules_safeAreaInsets_out.left
+      left: out.left
    }
  };
 });

--- a/packages/vite-plugin-uni/src/utils/plugin.ts
+++ b/packages/vite-plugin-uni/src/utils/plugin.ts
@@ -17,17 +17,9 @@ export function initExtraPlugins(cliRoot: string, platform: UniApp.PLATFORM) {
  return initPlugins(resolvePlugins(cliRoot, platform))
 }
-function initPlugin(plugin: PluginConfig): Plugin | void {
+function initPlugin({ id, config: { main } }: PluginConfig): Plugin | void {
-  const configFile = path.join(
+  const plugin = require(path.join(id, main || '/lib/uni.plugin.js'))
-    plugin.id,
+  return plugin.default || plugin
-    plugin.config.main || '/lib/uni.plugin.js'
-  )
-  try {
-    const plugin = require(configFile)
-    return plugin.default || plugin
-  } catch (e) {
-    console.warn(`${configFile} not found`)
-  }
 }
 function initPlugins(plugins: PluginConfig[]): Plugin[] {

--- a/rollup.config.js
+++ b/rollup.config.js
@@ -6,6 +6,7 @@ import json from '@rollup/plugin-json'
 import alias from '@rollup/plugin-alias'
 import nodeResolve from '@rollup/plugin-node-resolve'
 import commonjs from '@rollup/plugin-commonjs'
+import { getBabelOutputPlugin } from '@rollup/plugin-babel'
 if (!process.env.TARGET) {
  throw new Error('TARGET package must be specified via --environment flag.')
@@ -111,20 +112,27 @@ function createConfig(entryFile, output, buildOption) {
          ...Object.keys(pkg.peerDependencies || {}),
          ...(buildOption.external || []),
        ]
+  const plugins = [
+    createAliasPlugin(buildOption),
+    nodeResolve(),
+    commonjs(),
+    json({
+      namedExports: false,
+    }),
+    tsPlugin,
+    createReplacePlugin(buildOption, output.format),
+  ]
+  if (buildOption.babel) {
+    plugins.push(
+      getBabelOutputPlugin({
+        presets: [['@babel/preset-env', { targets: ['iOS 9'] }]],
+      })
+    )
+  }
  return {
    input: resolve(entryFile),
    external,
-    plugins: [
+    plugins,
-      createAliasPlugin(buildOption),
-      nodeResolve(),
-      commonjs(),
-      json({
-        namedExports: false,
-      }),
-      tsPlugin,
-      createReplacePlugin(buildOption, output.format),
-    ],
    output,
    onwarn: (msg, warn) => {
      // if (!/Circular/.test(msg)) {

--- a/yarn.lock
+++ b/yarn.lock