From 28516be8d0494e84c0f39243c8d3d2d139ab7b22 Mon Sep 17 00:00:00 2001 From: fxy060608 Date: Thu, 15 Jul 2021 13:25:20 +0800 Subject: [PATCH] wip(app): uni-app-plus --- .../uni-app-plus/dist/uni-app-view.umd.js | 89 +++++++++++-------- packages/uni-app-plus/src/helpers/useCover.ts | 4 + .../src/view/components/cover-image/index.tsx | 63 ++++++------- .../src/view/components/cover-view/index.tsx | 8 +- .../framework/dom/components/UniComponent.ts | 30 ++++++- .../framework/dom/components/UniSwiper.ts | 4 +- .../view/framework/dom/components/index.ts | 9 +- 7 files changed, 129 insertions(+), 78 deletions(-) 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 dd30fde5e..1705cc369 100644 --- a/packages/uni-app-plus/dist/uni-app-view.umd.js +++ b/packages/uni-app-plus/dist/uni-app-view.umd.js @@ -14384,6 +14384,24 @@ return (this.$holder || this.$).insertBefore(newChild, refChild); } } + class UniContainerComponent extends UniComponent { + constructor(id2, tag, component, parentNodeId, nodeJson, selector) { + super(id2, tag, component, parentNodeId, nodeJson, selector); + this.initObserver(); + } + initObserver() { + const elem = this.$holder || this.$; + const observer = new MutationObserver((mutations) => { + { + console.log(formatLog("Observer", mutations)); + } + }); + observer.observe(elem, { + childList: true, + subtree: true + }); + } + } function getVueParent(node) { while (node && node.pid > 0) { node = $(node.pid); @@ -14683,6 +14701,9 @@ return tags2; }); const cover = new plus.nativeObj.View(`cover-${Date.now()}-${id++}`, viewPosition.value, tags.value); + { + console.log(formatLog("Cover", cover.id, viewPosition.value, tags.value)); + } plus.webview.currentWebview().append(cover); if (hidden.value) { cover.hide(); @@ -14721,48 +14742,44 @@ style.value = props2.autoSize ? "width:0;height:0;" : ""; const realPath = props2.src ? getRealPath(props2.src) : ""; if (realPath.indexOf("http://") === 0 || realPath.indexOf("https://") === 0) { - plusReady(() => { - downloaTask = plus.downloader.createDownload(realPath, { - filename: TEMP_PATH + "/download/" - }, (task, status) => { - if (status === 200) { - getImageInfo(task.filename); - } else { - trigger2("error", {}, { - errMsg: "error" - }); - } - }); - downloaTask.start(); + downloaTask = plus.downloader.createDownload(realPath, { + filename: TEMP_PATH + "/download/" + }, (task, status) => { + if (status === 200) { + getImageInfo(task.filename); + } else { + trigger2("error", {}, { + errMsg: "error" + }); + } }); + downloaTask.start(); } else if (realPath) { getImageInfo(realPath); } } function getImageInfo(src) { content.src = src; - plusReady(() => { - plus.io.getImageInfo({ - src, - success: ({ + plus.io.getImageInfo({ + src, + success: ({ + width, + height + }) => { + if (props2.autoSize) { + style.value = `width:${width}px;height:${height}px;`; + window.dispatchEvent(new CustomEvent("updateview")); + } + trigger2("load", {}, { width, height - }) => { - if (props2.autoSize) { - style.value = `width:${width}px;height:${height}px;`; - window.dispatchEvent(new CustomEvent("updateview")); - } - trigger2("load", {}, { - width, - height - }); - }, - fail: () => { - trigger2("error", {}, { - errMsg: "error" - }); - } - }); + }); + }, + fail: () => { + trigger2("error", {}, { + errMsg: "error" + }); + } }); } if (props2.src) { @@ -14824,7 +14841,9 @@ const defaultSlots = slots.default ? flatVNode(slots.default()) : []; let text2 = ""; defaultSlots.forEach((node) => { - text2 += node.children || ""; + if (isString(node.children)) { + text2 += node.children; + } }); content.text = text2; return createVNode("uni-cover-view", { @@ -14992,7 +15011,7 @@ } } var swiper = "uni-swiper {\n display: block;\n height: 150px;\n}\n\nuni-swiper[hidden] {\n display: none;\n}\n\n.uni-swiper-wrapper {\n overflow: hidden;\n position: relative;\n width: 100%;\n height: 100%;\n transform: translateZ(0);\n}\n\n.uni-swiper-slides {\n position: absolute;\n left: 0;\n top: 0;\n right: 0;\n bottom: 0;\n}\n\n.uni-swiper-slide-frame {\n position: absolute;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n will-change: transform;\n}\n\n.uni-swiper-dots {\n position: absolute;\n font-size: 0;\n}\n\n.uni-swiper-dots-horizontal {\n left: 50%;\n bottom: 10px;\n text-align: center;\n white-space: nowrap;\n transform: translate(-50%, 0);\n}\n\n.uni-swiper-dots-horizontal .uni-swiper-dot {\n margin-right: 8px;\n}\n\n.uni-swiper-dots-horizontal .uni-swiper-dot:last-child {\n margin-right: 0;\n}\n\n.uni-swiper-dots-vertical {\n right: 10px;\n top: 50%;\n text-align: right;\n transform: translate(0, -50%);\n}\n\n.uni-swiper-dots-vertical .uni-swiper-dot {\n display: block;\n margin-bottom: 9px;\n}\n\n.uni-swiper-dots-vertical .uni-swiper-dot:last-child {\n margin-bottom: 0;\n}\n\n.uni-swiper-dot {\n display: inline-block;\n width: 8px;\n height: 8px;\n cursor: pointer;\n transition-property: background-color;\n transition-timing-function: ease;\n background: rgba(0, 0, 0, 0.3);\n border-radius: 50%;\n}\n\n.uni-swiper-dot-active {\n background-color: #000000;\n}\n"; - class UniSwiper extends UniComponent { + class UniSwiper extends UniContainerComponent { constructor(id2, parentNodeId, nodeJson) { super(id2, "uni-swiper", Swiper, parentNodeId, nodeJson, ".uni-swiper-slide-frame"); } diff --git a/packages/uni-app-plus/src/helpers/useCover.ts b/packages/uni-app-plus/src/helpers/useCover.ts index 7bc0c73f9..2acb7b843 100644 --- a/packages/uni-app-plus/src/helpers/useCover.ts +++ b/packages/uni-app-plus/src/helpers/useCover.ts @@ -1,6 +1,7 @@ import { computed, Ref, reactive, watch } from 'vue' import { CustomEventTrigger } from '@dcloudio/uni-components' import { Position, useNative } from './useNative' +import { formatLog } from '@dcloudio/uni-shared' let id = 0 @@ -169,6 +170,9 @@ export function useCover( viewPosition.value, tags.value ) + if (__DEV__) { + console.log(formatLog('Cover', cover.id, viewPosition.value, tags.value)) + } plus.webview.currentWebview().append(cover) if (hidden.value) { cover.hide() diff --git a/packages/uni-app-plus/src/view/components/cover-image/index.tsx b/packages/uni-app-plus/src/view/components/cover-image/index.tsx index 3ea41a53f..9e3c4aaf3 100644 --- a/packages/uni-app-plus/src/view/components/cover-image/index.tsx +++ b/packages/uni-app-plus/src/view/components/cover-image/index.tsx @@ -6,7 +6,6 @@ import { watch, onBeforeUnmount, } from 'vue' -import { plusReady } from '@dcloudio/uni-shared' import { defineBuiltInComponent, useCustomEvent, @@ -45,24 +44,22 @@ function useImageLoad( realPath.indexOf('http://') === 0 || realPath.indexOf('https://') === 0 ) { - plusReady(() => { - downloaTask = plus.downloader.createDownload( - realPath, - { - filename: TEMP_PATH + '/download/', - }, - (task, status) => { - if (status === 200) { - getImageInfo(task.filename!) - } else { - trigger('error', {} as Event, { - errMsg: 'error', - }) - } + downloaTask = plus.downloader.createDownload( + realPath, + { + filename: TEMP_PATH + '/download/', + }, + (task, status) => { + if (status === 200) { + getImageInfo(task.filename!) + } else { + trigger('error', {} as Event, { + errMsg: 'error', + }) } - ) - downloaTask.start() - }) + } + ) + downloaTask.start() } else if (realPath) { getImageInfo(realPath) } @@ -70,22 +67,20 @@ function useImageLoad( function getImageInfo(src: string) { content.src = src - plusReady(() => { - plus.io.getImageInfo({ - src, - success: ({ width, height }) => { - if (props.autoSize) { - style.value = `width:${width}px;height:${height}px;` - window.dispatchEvent(new CustomEvent('updateview')) - } - trigger('load', {} as Event, { width, height }) - }, - fail: () => { - trigger('error', {} as Event, { - errMsg: 'error', - }) - }, - }) + plus.io.getImageInfo({ + src, + success: ({ width, height }) => { + if (props.autoSize) { + style.value = `width:${width}px;height:${height}px;` + window.dispatchEvent(new CustomEvent('updateview')) + } + trigger('load', {} as Event, { width, height }) + }, + fail: () => { + trigger('error', {} as Event, { + errMsg: 'error', + }) + }, }) } diff --git a/packages/uni-app-plus/src/view/components/cover-view/index.tsx b/packages/uni-app-plus/src/view/components/cover-view/index.tsx index e509d2947..ee5230dab 100644 --- a/packages/uni-app-plus/src/view/components/cover-view/index.tsx +++ b/packages/uni-app-plus/src/view/components/cover-view/index.tsx @@ -1,10 +1,10 @@ import { Ref, ref, reactive } from 'vue' +import { isString } from '@vue/shared' import { defineBuiltInComponent, useCustomEvent, EmitEvent, flatVNode, - // Text, } from '@dcloudio/uni-components' import { useCover } from '../../../helpers/useCover' @@ -22,9 +22,9 @@ export default /*#__PURE__*/ defineBuiltInComponent({ const defaultSlots = slots.default ? flatVNode(slots.default()) : [] let text = '' defaultSlots.forEach((node) => { - // if (!node.type === Text) { - text += node.children || '' - // } + if (isString(node.children)) { + text += node.children + } }) content.text = text return ( diff --git a/packages/uni-app-plus/src/view/framework/dom/components/UniComponent.ts b/packages/uni-app-plus/src/view/framework/dom/components/UniComponent.ts index 267daa94b..175a2b0c3 100644 --- a/packages/uni-app-plus/src/view/framework/dom/components/UniComponent.ts +++ b/packages/uni-app-plus/src/view/framework/dom/components/UniComponent.ts @@ -15,7 +15,7 @@ import { $ } from '../page' export class UniComponent extends UniNode { declare $: UniCustomElement protected $props!: Record - protected $holder?: Element + $holder?: Element constructor( id: number, tag: string, @@ -84,6 +84,34 @@ export class UniComponent extends UniNode { } } +export class UniContainerComponent extends UniComponent { + constructor( + id: number, + tag: string, + component: Component, + parentNodeId: number, + nodeJson: Partial, + selector?: string + ) { + super(id, tag, component, parentNodeId, nodeJson, selector) + this.initObserver() + } + initObserver() { + const elem = this.$holder || this.$ + const observer = new MutationObserver((mutations) => { + if (__DEV__) { + console.log(formatLog('Observer', mutations)) + } + // TODO 刷新容器组件状态 + // (this.$.__vueParentComponent as any).refresh() + }) + observer.observe(elem, { + childList: true, + subtree: true, + }) + } +} + function getVueParent(node: UniNode): ComponentInternalInstance | null { while (node && node.pid > 0) { node = $(node.pid) diff --git a/packages/uni-app-plus/src/view/framework/dom/components/UniSwiper.ts b/packages/uni-app-plus/src/view/framework/dom/components/UniSwiper.ts index 66fed3375..4cc314240 100644 --- a/packages/uni-app-plus/src/view/framework/dom/components/UniSwiper.ts +++ b/packages/uni-app-plus/src/view/framework/dom/components/UniSwiper.ts @@ -1,9 +1,9 @@ import '@dcloudio/uni-components/style/swiper.css' import { Swiper } from '@dcloudio/uni-components' import { UniNodeJSON } from '@dcloudio/uni-shared' -import { UniComponent } from './UniComponent' +import { UniContainerComponent } from './UniComponent' -export class UniSwiper extends UniComponent { +export class UniSwiper extends UniContainerComponent { constructor( id: number, parentNodeId: number, diff --git a/packages/uni-app-plus/src/view/framework/dom/components/index.ts b/packages/uni-app-plus/src/view/framework/dom/components/index.ts index abfbd824e..fe5b796ce 100644 --- a/packages/uni-app-plus/src/view/framework/dom/components/index.ts +++ b/packages/uni-app-plus/src/view/framework/dom/components/index.ts @@ -1,5 +1,10 @@ import { UniNodeJSON } from '@dcloudio/uni-shared' -import { ComponentPublicInstance, defineComponent, h } from 'vue' +import { + ComponentPublicInstance, + defineComponent, + h, + VNodeArrayChildren, +} from 'vue' import { UniComment } from '../elements/UniComment' import { UniTextElement } from '../elements/UniTextElement' import { UniTextNode } from '../elements/UniTextNode' @@ -46,7 +51,7 @@ import { UniWebView } from './UniWebView' export interface UniCustomElement extends Element { __id: number - __vm: ComponentPublicInstance + __vueParentComponent: ComponentPublicInstance __listeners: Record void> } -- GitLab