From e8d4f9f9183e645603f5601dd0f1abfe4a3a432c Mon Sep 17 00:00:00 2001 From: wkj <278599135@qq.com> Date: Mon, 9 May 2022 17:29:30 +0800 Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E5=85=A8=E5=B1=80=E7=BB=84?= =?UTF-8?q?=E4=BB=B6message?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- config/loaders/wxml-loader.js | 12 +- lib/template.js | 3 + src/template.ts | 3 + .../src/components/message/index.json | 3 + .../src/components/message/index.less | 45 ++++++++ .../wechatMp/src/components/message/index.ts | 107 ++++++++++++++++++ .../src/components/message/index.wxml | 11 ++ 7 files changed, 180 insertions(+), 4 deletions(-) create mode 100644 template/wechatMp/src/components/message/index.json create mode 100644 template/wechatMp/src/components/message/index.less create mode 100644 template/wechatMp/src/components/message/index.ts create mode 100644 template/wechatMp/src/components/message/index.wxml diff --git a/config/loaders/wxml-loader.js b/config/loaders/wxml-loader.js index 6d89705..ffc229c 100644 --- a/config/loaders/wxml-loader.js +++ b/config/loaders/wxml-loader.js @@ -66,8 +66,12 @@ module.exports = function (content) { ) { return content; } - if (!/oak:value/.test(content)) { - return content; + let source = content; + if (/pages/.test(context)) { + source = source + ''; + } + if (!/oak:value/.test(source)) { + return source; } // console.log(content, options); @@ -85,7 +89,7 @@ module.exports = function (content) { } }, }, - }).parseFromString(content, 'text/xml'); + }).parseFromString(source, 'text/xml'); traverse(doc, (node) => { if (node.nodeType === node.ELEMENT_NODE) { // 处理oak:value声明的属性 @@ -93,7 +97,7 @@ module.exports = function (content) { const oakValue = node.getAttribute('oak:value'); node.removeAttribute('oak:value'); node.setAttribute('value', `{{${oakValue}}}`); - node.setAttribute('data-path', oakValue); + node.setAttribute('data-attr', oakValue); if (node.hasAttribute('oak:forbidFocus')) { node.removeAttribute('oak:forbidFocus'); diff --git a/lib/template.js b/lib/template.js index 951b343..79b9b4e 100644 --- a/lib/template.js +++ b/lib/template.js @@ -213,6 +213,9 @@ function appJsonContentWithWeChatMp(isDev) { "navigationBarTextStyle":"black", "enablePullDownRefresh": true }, + "usingComponents": { + "message": "components/message/index" + }, "style": "v2", "sitemapLocation": "sitemap.json" }`; diff --git a/src/template.ts b/src/template.ts index 7e85d54..b2ca767 100644 --- a/src/template.ts +++ b/src/template.ts @@ -224,6 +224,9 @@ export function appJsonContentWithWeChatMp(isDev: boolean) { "navigationBarTextStyle":"black", "enablePullDownRefresh": true }, + "usingComponents": { + "message": "components/message/index" + }, "style": "v2", "sitemapLocation": "sitemap.json" }`; diff --git a/template/wechatMp/src/components/message/index.json b/template/wechatMp/src/components/message/index.json new file mode 100644 index 0000000..32640e0 --- /dev/null +++ b/template/wechatMp/src/components/message/index.json @@ -0,0 +1,3 @@ +{ + "component": true +} \ No newline at end of file diff --git a/template/wechatMp/src/components/message/index.less b/template/wechatMp/src/components/message/index.less new file mode 100644 index 0000000..653d78e --- /dev/null +++ b/template/wechatMp/src/components/message/index.less @@ -0,0 +1,45 @@ +.t-message { + width: 750rpx; + height: 0; + border-radius: 0rpx 0rpx 16rpx 16rpx; + display: flex; + justify-content: center; + align-items: center; + position: fixed; + left: 50%; + font-size: 28rpx; + color: #fff; + opacity: 0; + box-shadow: 0rpx 6rpx 16rpx 0rpx rgb(217 212 191 / 50%); + transform: translateX(-50%) translateZ(0) translateY(-100%); + transition: all 0.4s ease-in-out; + + &-success { + background-color: #34bfa3; + } + + &-error { + background-color: #f4516c; + } + + &-warning { + background-color: #ffe57f; + color: #333; + } + + &-primary { + background-color: #3963bc; + } +} + +.t-message-show { + transform: translateX(-50%) translateZ(0) translateY(0); + height: 72rpx; + opacity: 1; +} + +.t-message-image { + width: 30rpx; + height: 30rpx; + margin-right: 15rpx; +} diff --git a/template/wechatMp/src/components/message/index.ts b/template/wechatMp/src/components/message/index.ts new file mode 100644 index 0000000..9d8b8ad --- /dev/null +++ b/template/wechatMp/src/components/message/index.ts @@ -0,0 +1,107 @@ +Component({ + options: { + multipleSlots: true, + }, + externalClasses: ['t-class', 't-image-class', 't-class-image'], + properties: { + zIndex: { + type: Number, + value: 777, + }, + show: Boolean, + image: String, + content: String, + type: { + type: String, + value: 'primary', + options: ['primary', 'warning', 'success', 'error'], + }, + duration: { + type: Number, + value: 1500, + }, + openApi: { + type: Boolean, + value: true, + }, + /** + * message距离顶部的距离 + */ + top: { + type: Number, + value: 0, + }, + }, + + data: { + status: false, + }, + + // 解决 addListener undefined 的错误 + observers: { + show: function (show) { + show && this.changeStatus(); + if (!show) + this.setData({ + status: show, + }); + }, + }, + + attached() { + this.initMessage(); + }, + + pageLifetimes: { + show() { + this.initMessage(); + }, + }, + + methods: { + changeStatus() { + this.setData({ + status: true, + }); + // @ts-ignore + if (this.data.timer) clearTimeout(this.data.timer); + // @ts-ignore + this.data.timer = setTimeout(() => { + this.setData({ + status: false, + }); + // @ts-ignore + if (this.data.success) this.data.success(); + // @ts-ignore + this.data.timer = null; + }, this.properties.duration); + }, + initMessage() { + // @ts-ignore + wx.oak = wx.oak || {}; + // @ts-ignore + wx.oak.showMessage = (options = {}) => { + // @ts-ignore + const { content = '', image = '', type = 'primary', duration = 1500, success = null, top = 0, + } = options; + // @ts-ignore + this.data.success = success; + this.setData({ + content, + image, + duration, + type, + top, + }); + this.changeStatus(); + return this; + }; + // @ts-ignore + wx.oak.hideMessage = () => { + this.setData({ + status: false, + }); + }; + }, + }, +}); diff --git a/template/wechatMp/src/components/message/index.wxml b/template/wechatMp/src/components/message/index.wxml new file mode 100644 index 0000000..3911cbc --- /dev/null +++ b/template/wechatMp/src/components/message/index.wxml @@ -0,0 +1,11 @@ + + + + + + + + {{content}} + + + \ No newline at end of file