增加全局组件message

config/loaders/wxml-loader.js

@@ -66,8 +66,12 @@ module.exports = function (content) {
     ) {
         return content;
     }
-    if (!/oak:value/.test(content)) {
+    let source = content;
-        return content;
+    if (/pages/.test(context)) {
+        source = source + '<message show="{{!!oakError}}" content="{{oakError.msg}}" />';
+    }
+    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');

lib/template.js

@@ -213,6 +213,9 @@ function appJsonContentWithWeChatMp(isDev) {
     "navigationBarTextStyle":"black",    
     "enablePullDownRefresh": true
   },
+  "usingComponents": {
+    "message": "components/message/index"
+  },
   "style": "v2",
   "sitemapLocation": "sitemap.json"
 }`;

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"
 }`;

template/wechatMp/src/components/message/index.json

@@ -0,0 +1,3 @@
+{
+  "component": true
+}

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;
+}

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,
+                });
+            };
+        },
+    },
+});

template/wechatMp/src/components/message/index.wxml

@@ -0,0 +1,11 @@
+<!-- index.wxml -->
+<view class="t-message t-class {{'t-message-'+type}} {{status?'t-message-show':''}}" style="z-index:{{zIndex}};top:{{top}}rpx">
+    <block wx:if="{{status}}">
+        <view style="margin-right:15rpx">
+            <slot name="icon" />
+        </view>
+        <image wx:if="{{image}}" src="{{image}}" class="t-message-image t-class-image t-image-class" />
+        {{content}}
+        <slot />
+    </block>
+</view>