From 247459ecfd71bfb8d2ed1c53693c706c9493c6ea Mon Sep 17 00:00:00 2001 From: NK Date: Thu, 20 Aug 2020 17:01:41 +0800 Subject: [PATCH] release: miniapp-render@1.2.2 (#1986) * build(miniapp-render): publish version 1.2.2 * fix(miniapp): not distinguish event between alipay and wechat * fix: page render * chore: opitimize code * feat: init * fix: first render opportunity * docs(miniapp): add multiple demos * fix: first render callback * refactor(miniapp): rename behavior * chore(example): resolve conflict * chore(miniapp): , remove inside build-plugin * chore(example): remove console.log Co-authored-by: fushen --- examples/app-lifecycle/build.json | 3 +- examples/app-lifecycle/package.json | 3 +- .../page-lifecycle-with-router/build.json | 3 +- .../page-lifecycle-with-router/package.json | 3 +- .../build.json | 3 +- .../package.json | 3 +- .../build.json | 3 +- .../package.json | 3 +- examples/with-miniapp-native-page/build.json | 3 +- .../with-miniapp-native-page/package.json | 3 +- .../components/test/index.js | 2 +- .../ali-miniapp-plugin/pages/index/index.js | 2 +- .../with-miniapp-plugin-component/build.json | 3 +- .../package.json | 3 +- .../wechat-miniprogram-plugin/index.js | 2 +- .../pages/hello-page.js | 2 +- packages/miniapp-render/package.json | 2 +- .../src/bridge/createEventProxy.js | 12 +-- .../src/bridge/events/callEvent.js | 12 +-- .../src/builtInComponents/swiper.js | 24 ++++-- .../miniapp-render/src/createConfig/app.js | 9 +- .../miniapp-render/src/createConfig/custom.js | 85 ------------------- .../miniapp-render/src/createConfig/page.js | 48 ++++++----- packages/miniapp-render/src/document.js | 2 +- packages/miniapp-render/src/index.js | 4 +- .../src/node/element/builtin-component.js | 8 +- .../src/node/element/custom-component.js | 18 ++-- packages/miniapp-render/src/node/root.js | 4 +- packages/miniapp-render/src/utils/cache.js | 2 +- .../src/utils/findParentNode.js | 2 +- .../miniapp-render/src/utils/shortcuts.js | 7 -- packages/miniapp-render/src/window.js | 26 +++++- 32 files changed, 123 insertions(+), 186 deletions(-) delete mode 100644 packages/miniapp-render/src/createConfig/custom.js delete mode 100644 packages/miniapp-render/src/utils/shortcuts.js diff --git a/examples/app-lifecycle/build.json b/examples/app-lifecycle/build.json index bbdd84bd28..01a37c18e1 100644 --- a/examples/app-lifecycle/build.json +++ b/examples/app-lifecycle/build.json @@ -15,7 +15,6 @@ "buildType": "runtime" } } - ], - "@ali/build-plugin-rax-app-def" + ] ] } diff --git a/examples/app-lifecycle/package.json b/examples/app-lifecycle/package.json index 4628811c5e..7d0a89bc64 100644 --- a/examples/app-lifecycle/package.json +++ b/examples/app-lifecycle/package.json @@ -26,8 +26,7 @@ "eslint-config-rax": "^0.1.0", "eslint-plugin-import": "^2.20.0", "eslint-plugin-module": "^0.1.0", - "eslint-plugin-react": "^7.18.0", - "@ali/build-plugin-rax-app-def": "^1.0.2" + "eslint-plugin-react": "^7.18.0" }, "private": true, "originTemplate": "@rax-materials/scaffolds-app-js" diff --git a/examples/page-lifecycle-with-router/build.json b/examples/page-lifecycle-with-router/build.json index bbdd84bd28..01a37c18e1 100644 --- a/examples/page-lifecycle-with-router/build.json +++ b/examples/page-lifecycle-with-router/build.json @@ -15,7 +15,6 @@ "buildType": "runtime" } } - ], - "@ali/build-plugin-rax-app-def" + ] ] } diff --git a/examples/page-lifecycle-with-router/package.json b/examples/page-lifecycle-with-router/package.json index 4628811c5e..7d0a89bc64 100644 --- a/examples/page-lifecycle-with-router/package.json +++ b/examples/page-lifecycle-with-router/package.json @@ -26,8 +26,7 @@ "eslint-config-rax": "^0.1.0", "eslint-plugin-import": "^2.20.0", "eslint-plugin-module": "^0.1.0", - "eslint-plugin-react": "^7.18.0", - "@ali/build-plugin-rax-app-def": "^1.0.2" + "eslint-plugin-react": "^7.18.0" }, "private": true, "originTemplate": "@rax-materials/scaffolds-app-js" diff --git a/examples/use-rax-compiled-component-in-runtime-miniapp/build.json b/examples/use-rax-compiled-component-in-runtime-miniapp/build.json index c70399ad63..9538475497 100644 --- a/examples/use-rax-compiled-component-in-runtime-miniapp/build.json +++ b/examples/use-rax-compiled-component-in-runtime-miniapp/build.json @@ -14,7 +14,6 @@ "buildType": "runtime" } } - ], - "@ali/build-plugin-rax-app-def" + ] ] } diff --git a/examples/use-rax-compiled-component-in-runtime-miniapp/package.json b/examples/use-rax-compiled-component-in-runtime-miniapp/package.json index 7519161153..09b1ce1dbc 100644 --- a/examples/use-rax-compiled-component-in-runtime-miniapp/package.json +++ b/examples/use-rax-compiled-component-in-runtime-miniapp/package.json @@ -27,8 +27,7 @@ "eslint-config-rax": "^0.1.0", "eslint-plugin-import": "^2.20.0", "eslint-plugin-module": "^0.1.0", - "eslint-plugin-react": "^7.18.0", - "@ali/build-plugin-rax-app-def": "^1.0.2" + "eslint-plugin-react": "^7.18.0" }, "private": true, "originTemplate": "@rax-materials/scaffolds-app-js" diff --git a/examples/with-miniapp-native-custom-component/build.json b/examples/with-miniapp-native-custom-component/build.json index bbdd84bd28..01a37c18e1 100644 --- a/examples/with-miniapp-native-custom-component/build.json +++ b/examples/with-miniapp-native-custom-component/build.json @@ -15,7 +15,6 @@ "buildType": "runtime" } } - ], - "@ali/build-plugin-rax-app-def" + ] ] } diff --git a/examples/with-miniapp-native-custom-component/package.json b/examples/with-miniapp-native-custom-component/package.json index a2d39945d6..73de69bec5 100644 --- a/examples/with-miniapp-native-custom-component/package.json +++ b/examples/with-miniapp-native-custom-component/package.json @@ -27,8 +27,7 @@ "eslint-config-rax": "^0.1.0", "eslint-plugin-import": "^2.20.0", "eslint-plugin-module": "^0.1.0", - "eslint-plugin-react": "^7.18.0", - "@ali/build-plugin-rax-app-def": "^1.0.2" + "eslint-plugin-react": "^7.18.0" }, "private": true, "originTemplate": "@rax-materials/scaffolds-app-js" diff --git a/examples/with-miniapp-native-page/build.json b/examples/with-miniapp-native-page/build.json index c70399ad63..9538475497 100644 --- a/examples/with-miniapp-native-page/build.json +++ b/examples/with-miniapp-native-page/build.json @@ -14,7 +14,6 @@ "buildType": "runtime" } } - ], - "@ali/build-plugin-rax-app-def" + ] ] } diff --git a/examples/with-miniapp-native-page/package.json b/examples/with-miniapp-native-page/package.json index 4628811c5e..7d0a89bc64 100644 --- a/examples/with-miniapp-native-page/package.json +++ b/examples/with-miniapp-native-page/package.json @@ -26,8 +26,7 @@ "eslint-config-rax": "^0.1.0", "eslint-plugin-import": "^2.20.0", "eslint-plugin-module": "^0.1.0", - "eslint-plugin-react": "^7.18.0", - "@ali/build-plugin-rax-app-def": "^1.0.2" + "eslint-plugin-react": "^7.18.0" }, "private": true, "originTemplate": "@rax-materials/scaffolds-app-js" diff --git a/examples/with-miniapp-plugin-component/ali-miniapp-plugin/components/test/index.js b/examples/with-miniapp-plugin-component/ali-miniapp-plugin/components/test/index.js index 1fdd9e2300..be38e7c396 100644 --- a/examples/with-miniapp-plugin-component/ali-miniapp-plugin/components/test/index.js +++ b/examples/with-miniapp-plugin-component/ali-miniapp-plugin/components/test/index.js @@ -1,6 +1,6 @@ Component({ props: { - pluginName: '' + pluginName: 'plugin' }, methods: { onClick() { diff --git a/examples/with-miniapp-plugin-component/ali-miniapp-plugin/pages/index/index.js b/examples/with-miniapp-plugin-component/ali-miniapp-plugin/pages/index/index.js index f16cc1a825..560d44d430 100644 --- a/examples/with-miniapp-plugin-component/ali-miniapp-plugin/pages/index/index.js +++ b/examples/with-miniapp-plugin-component/ali-miniapp-plugin/pages/index/index.js @@ -1 +1 @@ -Page({}); \ No newline at end of file +Page({}); diff --git a/examples/with-miniapp-plugin-component/build.json b/examples/with-miniapp-plugin-component/build.json index bbdd84bd28..01a37c18e1 100644 --- a/examples/with-miniapp-plugin-component/build.json +++ b/examples/with-miniapp-plugin-component/build.json @@ -15,7 +15,6 @@ "buildType": "runtime" } } - ], - "@ali/build-plugin-rax-app-def" + ] ] } diff --git a/examples/with-miniapp-plugin-component/package.json b/examples/with-miniapp-plugin-component/package.json index 4628811c5e..7d0a89bc64 100644 --- a/examples/with-miniapp-plugin-component/package.json +++ b/examples/with-miniapp-plugin-component/package.json @@ -26,8 +26,7 @@ "eslint-config-rax": "^0.1.0", "eslint-plugin-import": "^2.20.0", "eslint-plugin-module": "^0.1.0", - "eslint-plugin-react": "^7.18.0", - "@ali/build-plugin-rax-app-def": "^1.0.2" + "eslint-plugin-react": "^7.18.0" }, "private": true, "originTemplate": "@rax-materials/scaffolds-app-js" diff --git a/examples/with-miniapp-plugin-component/wechat-miniprogram-plugin/index.js b/examples/with-miniapp-plugin-component/wechat-miniprogram-plugin/index.js index 35cfe371ad..ad849e9fc6 100644 --- a/examples/with-miniapp-plugin-component/wechat-miniprogram-plugin/index.js +++ b/examples/with-miniapp-plugin-component/wechat-miniprogram-plugin/index.js @@ -3,4 +3,4 @@ module.exports = { console.log('Hello plugin!'); }, answer: 42 -}; \ No newline at end of file +}; diff --git a/examples/with-miniapp-plugin-component/wechat-miniprogram-plugin/pages/hello-page.js b/examples/with-miniapp-plugin-component/wechat-miniprogram-plugin/pages/hello-page.js index c6e086bd2d..40a5c1c9bf 100644 --- a/examples/with-miniapp-plugin-component/wechat-miniprogram-plugin/pages/hello-page.js +++ b/examples/with-miniapp-plugin-component/wechat-miniprogram-plugin/pages/hello-page.js @@ -63,4 +63,4 @@ Page({ onShareAppMessage: function() { } -}); \ No newline at end of file +}); diff --git a/packages/miniapp-render/package.json b/packages/miniapp-render/package.json index e417ba9681..77727faa2a 100644 --- a/packages/miniapp-render/package.json +++ b/packages/miniapp-render/package.json @@ -1,6 +1,6 @@ { "name": "miniapp-render", - "version": "1.2.1", + "version": "1.2.2", "description": "DOM simulator for MiniApp", "files": [ "dist" diff --git a/packages/miniapp-render/src/bridge/createEventProxy.js b/packages/miniapp-render/src/bridge/createEventProxy.js index 971cb39dc6..30a6f54c72 100644 --- a/packages/miniapp-render/src/bridge/createEventProxy.js +++ b/packages/miniapp-render/src/bridge/createEventProxy.js @@ -19,7 +19,7 @@ function getPageId(internal, pageId) { return props && props.r.pageId; } -export default function(pageId) { +export default function() { const config = {}; // Add get DOM Node from event method config.getDomNodeFromEvt = getDomNodeFromEvt; @@ -32,7 +32,7 @@ export default function(pageId) { // Add reactive event define which will bubble baseEvents.forEach(({ name, extra = null, eventName }) => { config[name] = function(evt) { - const __pageId = getPageId(this, pageId); + const __pageId = getPageId(this, this.data.pageId); const document = cache.getDocument(__pageId); if (document && document.__checkEvent(evt)) { const nodeId = evt.currentTarget.dataset.privateNodeId; @@ -43,7 +43,7 @@ export default function(pageId) { // Add reactive event define which won't bubble handlesMap.simpleEvents.forEach(({ name, eventName }) => { config[name] = function(evt) { - const __pageId = getPageId(this, pageId); + const __pageId = getPageId(this, this.data.pageId); const nodeId = evt.currentTarget.dataset.privateNodeId; const targetNode = cache.getNode(__pageId, nodeId); if (!targetNode) return; @@ -54,7 +54,7 @@ export default function(pageId) { // Add reactive event define which only trigger once handlesMap.singleEvents.forEach(({ name, eventName }) => { config[name] = function(evt) { - const __pageId = getPageId(this, pageId); + const __pageId = getPageId(this, this.data.pageId); this.callSingleEvent(eventName, evt, __pageId); }; }); @@ -62,7 +62,7 @@ export default function(pageId) { // Add reactive event define which only trigger once and need middleware handlesMap.functionalSingleEvents.forEach(({ name, eventName, middleware }) => { config[name] = function(evt) { - const __pageId = getPageId(this, pageId); + const __pageId = getPageId(this, this.data.pageId); const domNode = this.getDomNodeFromEvt(eventName, evt, __pageId); if (!domNode) return; middleware.call(this, evt, domNode); @@ -73,7 +73,7 @@ export default function(pageId) { // Add reactive event define which complex handlesMap.complexEvents.forEach(({ name, eventName, middleware }) => { config[name] = function(evt) { - const __pageId = getPageId(this, pageId); + const __pageId = getPageId(this, this.data.pageId); const domNode = this.getDomNodeFromEvt(eventName, evt, __pageId); if (!domNode) return; middleware.call(this, evt, domNode, __pageId, evt.currentTarget.dataset.privateNodeId); diff --git a/packages/miniapp-render/src/bridge/events/callEvent.js b/packages/miniapp-render/src/bridge/events/callEvent.js index 889325ba05..db6781df29 100644 --- a/packages/miniapp-render/src/bridge/events/callEvent.js +++ b/packages/miniapp-render/src/bridge/events/callEvent.js @@ -34,7 +34,7 @@ export default function(eventName, evt, extra, pageId, nodeId) { if (!targetDomNode) targetDomNode = domNode.querySelector( - 'builtIn-component[behavior=switch]' + 'builtIn-component[_behavior=switch]' ); } @@ -47,7 +47,7 @@ export default function(eventName, evt, extra, pageId, nodeId) { } else if (targetDomNode.tagName === 'BUILTIN-COMPONENT') { if (checkEventAccessDomNode(evt, targetDomNode, domNode)) return; - const behavior = targetDomNode.behavior; + const behavior = targetDomNode._behavior; if (behavior === 'switch') { const checked = !targetDomNode.getAttribute('checked'); targetDomNode.setAttribute('checked', checked); @@ -61,7 +61,7 @@ export default function(eventName, evt, extra, pageId, nodeId) { } else if ( (domNode.tagName === 'BUTTON' || domNode.tagName === 'BUILTIN-COMPONENT' && - domNode.behavior === 'button') && + domNode._behavior === 'button') && evt.type === 'click' && !isCapture ) { @@ -84,13 +84,13 @@ export default function(eventName, evt, extra, pageId, nodeId) { 'textarea[name]' ); const switchList = form - .querySelectorAll('builtin-component[behavior=switch]') + .querySelectorAll('builtin-component[_behavior=switch]') .filter((item) => !!item.getAttribute('name')); const sliderList = form - .querySelectorAll('builtin-component[behavior=slider]') + .querySelectorAll('builtin-component[_behavior=slider]') .filter((item) => !!item.getAttribute('name')); const pickerList = form - .querySelectorAll('builtin-component[behavior=picker]') + .querySelectorAll('builtin-component[_behavior=picker]') .filter((item) => !!item.getAttribute('name')); if (type === 'submit') { diff --git a/packages/miniapp-render/src/builtInComponents/swiper.js b/packages/miniapp-render/src/builtInComponents/swiper.js index f1cc52f600..6275ee5c73 100644 --- a/packages/miniapp-render/src/builtInComponents/swiper.js +++ b/packages/miniapp-render/src/builtInComponents/swiper.js @@ -1,4 +1,7 @@ -export default { +// eslint-disable-next-line import/no-extraneous-dependencies +import { isMiniApp, isWeChatMiniProgram } from 'universal-env'; + +const swiper = { name: 'swiper', props: [{ name: 'indicator-dots', @@ -82,10 +85,6 @@ export default { singleEvents: [{ name: 'onSwiperTransition', eventName: 'transition' - }, - { - name: 'onSwiperAnimationfinish', - eventName: 'animationfinish' }], functionalSingleEvents: [ { @@ -97,3 +96,18 @@ export default { } ] }; + +if (isMiniApp) { + swiper.singleEvents.push({ + name: 'onSwiperAnimationEnd', + eventName: 'animationEnd' + }); +} +if (isWeChatMiniProgram) { + swiper.singleEvents.push({ + name: 'onSwiperAnimationFinish', + eventName: 'animationfinish' + }); +} + +export default swiper; diff --git a/packages/miniapp-render/src/createConfig/app.js b/packages/miniapp-render/src/createConfig/app.js index f23486327b..227776d8fe 100644 --- a/packages/miniapp-render/src/createConfig/app.js +++ b/packages/miniapp-render/src/createConfig/app.js @@ -7,7 +7,7 @@ import cache from '../utils/cache'; export default function(init, config) { cache.setConfig(config); const appConfig = { - launched: false, + launched: isMiniApp, onLaunch(options) { const window = createWindow(); cache.setWindow(window); @@ -16,9 +16,9 @@ export default function(init, config) { if (isMiniApp) { // Use page route as pageId key word // eslint-disable-next-line no-undef - const currentPageId = `${getCurrentPages()[0].route}-0`; + const currentPageId = `${getCurrentPages()[0].route}-1`; const currentDocument = createDocument(currentPageId); - window.__pageId = currentPageId; + this.__pageId = window.__pageId = currentPageId; init(window, currentDocument); window.$$trigger('launch', { @@ -41,7 +41,8 @@ export default function(init, config) { this.window = window; }, onShow(options) { - if (this.window) { + if (this.window && this.launched) { + this.__showOptions = options; this.window.$$trigger('appshow', { event: { options, diff --git a/packages/miniapp-render/src/createConfig/custom.js b/packages/miniapp-render/src/createConfig/custom.js deleted file mode 100644 index f8905e1a02..0000000000 --- a/packages/miniapp-render/src/createConfig/custom.js +++ /dev/null @@ -1,85 +0,0 @@ -// eslint-disable-next-line import/no-extraneous-dependencies -import { isMiniApp } from 'universal-env'; -import createEventProxy from '../bridge/createEventProxy'; -import { getComponentLifeCycle } from '../bridge/lifeCycleAdapter'; -import cache from '../utils/cache'; - -function getLatestData(domNode, componentProps) { - const data = {}; - if (componentProps) { - for (const name of componentProps) { - data[name] = domNode.getAttribute(name); - } - } - return data; -} - -export default function() { - const config = { - data: { - __ready: false, - }, - }; - if (!isMiniApp) { - // For style isolation - config.options = { - styleIsolation: 'shared', - }; - // Define properties in Wechat Miniprogram - config.properties = { - r: { - type: Object, - value: {}, - }, - }; - config.observers = { - 'r.**': function() { - // observers Only works in WeChat MiniProgram - const props = this.properties; - const { usingComponents } = cache.getConfig(); - const domNode = cache.getNode(props.r.pageId, props.r.nodeId); - const { props: componentProps } = usingComponents[props.r.behavior] || {}; - const data = Object.assign({ __ready: true }, getLatestData(domNode, componentProps)); - this.setData(data); - } - }; - } - Object.assign( - config, - getComponentLifeCycle({ - mount() { - const props = isMiniApp ? this.props : this.properties; - const { usingComponents } = cache.getConfig(); - const domNode = cache.getNode(props.r.pageId, props.r.nodeId); - const { props: componentProps, events: componentEvents = [] } = usingComponents[props.r.behavior] || {}; - const data = Object.assign({ __ready: true }, getLatestData(domNode, componentProps)); - - Object.assign(this, createEventProxy()); - - if (componentEvents.length) { - componentEvents.forEach((eventName) => { - this[`on${eventName}`] = function(...args) { - if (isMiniApp) { - domNode.$$trigger(eventName, { args }); - } else { - this.callSimpleEvent(eventName, args[0], domNode); - } - }; - }); - } - - this.setData(data); - }, - update() { - // update method Only works in Alibaba MiniApp - const props = this.props; - const { usingComponents } = cache.getConfig(); - const domNode = cache.getNode(props.r.pageId, props.r.nodeId); - const { props: componentProps } = usingComponents[props.r.behavior] || {}; - const data = Object.assign({ __ready: true }, getLatestData(domNode, componentProps)); - this.setData(data); - } - }) - ); - return config; -} diff --git a/packages/miniapp-render/src/createConfig/page.js b/packages/miniapp-render/src/createConfig/page.js index 6e765081b6..51dd9405d7 100644 --- a/packages/miniapp-render/src/createConfig/page.js +++ b/packages/miniapp-render/src/createConfig/page.js @@ -6,23 +6,26 @@ import createDocument from '../document'; // eslint-disable-next-line import/no-extraneous-dependencies import { isMiniApp } from 'universal-env'; -export function getBaseLifeCycles() { +export function getBaseLifeCycles(route) { return { onLoad(query) { + // eslint-disable-next-line no-undef + const app = getApp(); this.window = cache.getWindow(); - this.document = cache.getDocument(this.pageId); - if (!this.document) { + + this.pageId = route + '-' + cache.getRouteId(route); + if (this.pageId === app.__pageId) { + this.document = cache.getDocument(this.pageId); + } else { this.document = createDocument(this.pageId); } // In wechat miniprogram web bundle need be executed in first page - if (!isMiniApp) { - // eslint-disable-next-line no-undef - const app = getApp(); - if (!app.launched) { - app.init(this.document); - app.launched = true; - } + if (!isMiniApp && !app.launched) { + app.init(this.document); + app.launched = true; + // The real app show has passed when init function execute + app.onShow.call(app, app.__showOptions); } // Bind page internal to page document this.document._internal = this; @@ -53,8 +56,8 @@ export function getBaseLifeCycles() { if (process.env.NODE_ENV === 'development') { perf.stop('setData'); } - this.firstRenderCallback(query); }; + this.firstRenderCallback(); } if (task.type === 'children') { const spliceArgs = [task.start, task.deleteCount]; @@ -69,11 +72,11 @@ export function getBaseLifeCycles() { }); }); } else { + this.firstRenderCallback(tasks[0]); this.setData(tasks[0], () => { if (process.env.NODE_ENV === 'development') { perf.stop('setData'); } - this.firstRenderCallback(query); }); } } @@ -118,28 +121,29 @@ export function getBaseLifeCycles() { } export default function(route, lifeCycles = []) { - const pageId = `${route}-${cache.getRouteId(route)}`; const pageConfig = { firstRender: true, - pageId, data: { - pageId, root: { - pageId, children: [] } }, - firstRenderCallback(query) { + firstRenderCallback(task) { if (this.firstRender) { this.firstRender = false; - if (this.window) { - this.window.$$trigger('load'); - this.window.$$trigger('pageload', { event: query }); + const initData = { + pageId: this.pageId, + 'root.pageId': this.pageId + }; + if (task) { + Object.assign(task, initData); + } else { + this.setData(initData); } } }, - ...getBaseLifeCycles(), - ...createEventProxy(pageId) + ...getBaseLifeCycles(route), + ...createEventProxy() }; // Define page lifecycles, like onReachBottom injectLifeCycle(lifeCycles, pageConfig); diff --git a/packages/miniapp-render/src/document.js b/packages/miniapp-render/src/document.js index acd02a438e..b8a70d5c38 100755 --- a/packages/miniapp-render/src/document.js +++ b/packages/miniapp-render/src/document.js @@ -113,7 +113,7 @@ class Document extends EventTarget { // Transform to builtin-component options.tagName = 'builtin-component'; options.attrs = options.attrs || {}; - options.attrs.behavior = componentName; + options.attrs._behavior = componentName; return BuiltInComponent.$$create(options, tree); } else if (this.usingComponents[originTagName]) { // Transform to custom-component diff --git a/packages/miniapp-render/src/index.js b/packages/miniapp-render/src/index.js index 2dec7c0089..bd383ee2a3 100755 --- a/packages/miniapp-render/src/index.js +++ b/packages/miniapp-render/src/index.js @@ -1,11 +1,9 @@ import createAppConfig from './createConfig/app'; import createPageConfig from './createConfig/page'; import createElementConfig from './createConfig/element'; -import createCustomComponentConfig from './createConfig/custom'; export default { createAppConfig, createPageConfig, - createElementConfig, - createCustomComponentConfig + createElementConfig }; diff --git a/packages/miniapp-render/src/node/element/builtin-component.js b/packages/miniapp-render/src/node/element/builtin-component.js index db88d8d90e..6a3e42b0d6 100755 --- a/packages/miniapp-render/src/node/element/builtin-component.js +++ b/packages/miniapp-render/src/node/element/builtin-component.js @@ -12,14 +12,14 @@ class BuiltInComponent extends Element { this.$$destroy(); } - get behavior() { - return this.$_attrs.get('behavior') || ''; + get _behavior() { + return this.$_attrs.get('_behavior') || ''; } - set behavior(value) { + set _behavior(value) { if (typeof value !== 'string') return; - this.$_attrs.set('behavior', value); + this.$_attrs.set('_behavior', value); } diff --git a/packages/miniapp-render/src/node/element/custom-component.js b/packages/miniapp-render/src/node/element/custom-component.js index 883677eb5a..dbbe6ebb7a 100755 --- a/packages/miniapp-render/src/node/element/custom-component.js +++ b/packages/miniapp-render/src/node/element/custom-component.js @@ -9,7 +9,7 @@ class CustomComponent extends Element { } $$init(options, tree) { - this.$_behavior = options.componentName; + this.__behavior = options.componentName; this.__nativeType = options.tagName === 'custom-component' ? 'customComponent' : 'miniappPlugin'; super.$$init(options, tree); } @@ -17,15 +17,15 @@ class CustomComponent extends Element { $$destroy() { super.$$destroy(); - this.$_behavior = null; + this.__behavior = null; } $$recycle() { this.$$destroy(); } - get behavior() { - return this.$_behavior; + get _behavior() { + return this.__behavior; } get $$domInfo() { @@ -43,11 +43,11 @@ class CustomComponent extends Element { const config = cache.getConfig(); let nativeInfo = null; if (this.__nativeType === 'customComponent') { - domInfo.customComponentName = this.$_behavior; - nativeInfo = config.usingComponents[this.$_behavior]; + domInfo.customComponentName = this.__behavior; + nativeInfo = config.usingComponents[this.__behavior]; } else if (this.__nativeType === 'miniappPlugin') { - domInfo.miniappPluginName = this.$_behavior; - nativeInfo = config.usingPlugins[this.$_behavior]; + domInfo.miniappPluginName = this.__behavior; + nativeInfo = config.usingPlugins[this.__behavior]; } if (nativeInfo) { // Inject props scanned by babel plugin into domInfo @@ -56,7 +56,7 @@ class CustomComponent extends Element { }); // Bind methods to every element which is used recursively to generate dom tree nativeInfo.events.forEach(event => { - const eventName = `${this.$_behavior}_${event}_${tool.getId()}`; + const eventName = `${this.__behavior}_${event}_${tool.getId()}`; domInfo[event] = eventName; cache.setElementMethods(eventName, (...args) => { this.$$trigger(event, { args }); diff --git a/packages/miniapp-render/src/node/root.js b/packages/miniapp-render/src/node/root.js index c4f8021462..d9884baa24 100644 --- a/packages/miniapp-render/src/node/root.js +++ b/packages/miniapp-render/src/node/root.js @@ -14,8 +14,8 @@ function simplify(node) { } let componentType; - if (node.behavior) { - componentType = simpleNode.behavior = node.behavior; + if (node._behavior) { + componentType = simpleNode.behavior = node._behavior; } else { componentType = node.tagName; } diff --git a/packages/miniapp-render/src/utils/cache.js b/packages/miniapp-render/src/utils/cache.js index e190e80ab6..a1e5c6e4ee 100755 --- a/packages/miniapp-render/src/utils/cache.js +++ b/packages/miniapp-render/src/utils/cache.js @@ -74,7 +74,7 @@ function getConfig() { function getRouteId(route) { if (!routeMap[route]) { - return routeMap[route] = 0; + return routeMap[route] = 1; } else { return ++routeMap[route]; } diff --git a/packages/miniapp-render/src/utils/findParentNode.js b/packages/miniapp-render/src/utils/findParentNode.js index ffaee6a2fd..273cd454c6 100644 --- a/packages/miniapp-render/src/utils/findParentNode.js +++ b/packages/miniapp-render/src/utils/findParentNode.js @@ -3,7 +3,7 @@ export default function findParentNode(domNode, tagName) { const checkParentNode = (parentNode, tagName) => { if (!parentNode) return false; if (parentNode.tagName === tagName) return true; - if (parentNode.tagName === 'BUILTIN-COMPONENT' && parentNode.behavior === tagName.toLowerCase()) return true; + if (parentNode.tagName === 'BUILTIN-COMPONENT' && parentNode._behavior === tagName.toLowerCase()) return true; return false; }; diff --git a/packages/miniapp-render/src/utils/shortcuts.js b/packages/miniapp-render/src/utils/shortcuts.js deleted file mode 100644 index 00e187fb32..0000000000 --- a/packages/miniapp-render/src/utils/shortcuts.js +++ /dev/null @@ -1,7 +0,0 @@ -export default { - type: 'nt', - style: 'st', - className: 'cl', - tagName: 'tn', - behavior: 'br' -}; diff --git a/packages/miniapp-render/src/window.js b/packages/miniapp-render/src/window.js index 8cef836c26..fbed45bc35 100755 --- a/packages/miniapp-render/src/window.js +++ b/packages/miniapp-render/src/window.js @@ -24,6 +24,11 @@ class Window extends EventTarget { } }; + this.__sharedEventNames = ['pageshow', 'pagehide']; + + // Collect event handlers which undifferentiated pages + this.__sharedHandlers = []; + // Simulate for react this.HTMLIFrameElement = function() {}; } @@ -33,6 +38,17 @@ class Window extends EventTarget { tool.flushThrottleCache(); } + addEventListener(eventName, handler, options) { + if (this.__sharedEventNames.indexOf(eventName) > 0) { + this.__sharedHandlers.push({ + eventName, + handler + }); + return; + } + return super.addEventListener(eventName, handler, options); + } + // Trigger node event $$trigger(eventName, options = {}) { if (eventName === 'error' && typeof options.event === 'string') { @@ -71,7 +87,15 @@ class Window extends EventTarget { } } - return super.$$trigger(eventName, options); + if (this.__sharedEventNames.indexOf(eventName) > 0) { + this.__sharedHandlers + .filter((handlerInfo) => handlerInfo.eventName === eventName) + .forEach(({ handler }) => { + handler.call(this); + }); + } else { + return super.$$trigger(eventName, options); + } } /**