@cloudbase/weda-ui-mp 0.2.20

package/components/qrcode/index.js

@@ -0,0 +1,155 @@
+import drawQrcode from '../../utils/qrcode/weapp.qrcode.min.js';
+import { commonCompBehavior } from '../../utils/common-behavior';
+import classNames from '../../utils/classnames';
+Component({
+  options: {
+    virtualHost: true,
+  },
+  behaviors: [commonCompBehavior],
+  properties: {
+    className: {
+      type: String,
+      value: '',
+    },
+    style: {
+      type: String,
+      value: '',
+    },
+    id: {
+      type: String,
+      value: '',
+    },
+    text: {
+      type: String,
+      value: '',
+    },
+    showMenuByLongpress: {
+      type: Boolean,
+      value: false,
+    },
+    backgroundColor: {
+      type: String,
+      value: '#ffffff',
+    },
+    foregroundColor: {
+      type: String,
+      value: '#000000',
+    },
+  },
+  data: {
+    base64Url: '',
+  },
+  domObserver: null,
+  lifetimes: {
+    attached() {
+      this.updateWidgetAPI();
+      this.setData({ id: this.id });
+      this.observeModuleExpose();
+    },
+    detached() {
+      this.domObserver && this.domObserver.disconnect();
+    },
+  },
+  methods: {
+    // 监听qrcode模块曝光
+    observeModuleExpose() {
+      this.domObserver && this.domObserver.disconnect();
+      this.domObserver = wx.createIntersectionObserver(this);
+      this.domObserver.relativeToViewport().observe(`#${this.id}`, (res) => {
+        // 模块曝光
+        if (res.intersectionRatio) {
+          wx.createSelectorQuery()
+            .in(this)
+            .select('#QrCode')
+            .fields({
+              node: true,
+              size: true,
+            })
+            .exec(this.drawQrcode());
+        }
+      });
+    },
+    updateWidgetAPI() {
+      const { text, backgroundColor, foregroundColor, showMenuByLongpress } =
+        this.data;
+
+      this.setReadonlyAttributes &&
+        this.setReadonlyAttributes({
+          text,
+          backgroundColor,
+          foregroundColor,
+          showMenuByLongpress,
+        });
+    },
+    drawQrcode: function () {
+      const { backgroundColor, foregroundColor, text } = this.properties;
+      drawQrcode({
+        width: 200,
+        height: 200,
+        canvasId: 'QrCode',
+        text: text,
+        background: backgroundColor, //二维码背景颜色，默认值白色
+        foreground: foregroundColor, //二维码前景色，默认值黑色
+        _this: this,
+      });
+      // 安卓机上不准确，生成的二维码无法扫描，加延时解决
+      // eslint-disable-next-line rulesdir/no-timer
+      setTimeout(() => {
+        var that = this;
+        wx.canvasToTempFilePath(
+          {
+            canvasId: 'QrCode',
+            width: 200,
+            height: 200,
+            success(res) {
+              if (res.tempFilePath) {
+                wx.getImageInfo({
+                  src: res.tempFilePath,
+                  success(res) {
+                    console.log(res);
+                    that.setData({
+                      base64Url: res?.path,
+                    });
+                    that.domObserver && that.domObserver.disconnect();
+                  },
+                  fail(res) {
+                    console.error(res);
+                  },
+                });
+              }
+            },
+            fail(res) {
+              console.error(res);
+            },
+          },
+          this
+        );
+      }, 500);
+    },
+  },
+  observers: {
+    'text,backgroundColor,foregroundColor ,showMenuByLongpress': function () {
+      this.updateWidgetAPI();
+      this.drawQrcode();
+    },
+    'className,text': function (className) {
+      const classPrefix = 'wd';
+      const compClassName = `${classPrefix}-qrcode`;
+      // 响应式css api
+      const platformCss = `${classPrefix}-mp-qrcode`;
+      const classes = {
+        [`${classPrefix}-qrcode`]: true,
+        // 颜色
+        [`${compClassName}--image`]: true,
+        [platformCss]: true,
+      };
+
+      const cls = classNames({
+        ...classes,
+        [className]: className,
+      });
+
+      this.setData({ cls });
+    },
+  },
+});

package/components/qrcode/index.json

@@ -0,0 +1,5 @@
+{
+  "component": true,
+  "styleIsolation": "shared",
+  "usingComponents": {}
+}

package/components/qrcode/index.wxml

@@ -0,0 +1,2 @@
+<canvas class="wd-qrcode--convas" canvas-id="QrCode" />
+<image src="{{base64Url}}" mode="aspectFit" webp="{{true}}" id="{{id}}" class="{{cls}}" style="{{style}}" show-menu-by-longpress="{{showMenuByLongpress}}"></image>

package/components/qrcode/index.wxss

@@ -0,0 +1,10 @@
+.wd-qrcode--convas {
+  width: 200px;
+  height: 200px;
+  position: fixed;
+  left: 100%;
+}
+.wd-qrcode--image {
+  width: 200px;
+  height: 200px;
+}

package/components/richText/index.js

@@ -0,0 +1,90 @@
+import { getCloudInstance } from '../../utils/tcb';
+
+Component({
+  options: {
+    virtualHost: true,
+  },
+  data: {
+    __html: '',
+    originValue: '',
+  },
+  properties: {
+    value: {
+      type: String,
+      value: '这是一个富文本',
+    },
+    className: {
+      type: String,
+      value: '',
+    },
+    style: {
+      type: String,
+      value: '',
+    },
+  },
+  methods: {
+    async getSrc(img, regex) {
+      const url = img.replace(regex, '$1');
+      if (img.includes('cloud://')) {
+        const tcb = await getCloudInstance();
+        const { fileList } = await tcb.getTempFileURL({
+          fileList: [url],
+        });
+        if (fileList && fileList[0] && fileList[0].tempFileURL) {
+          this.setData({
+            originValue: this.data.originValue.replace(
+              new RegExp(url, 'g'),
+              fileList[0].tempFileURL
+            ),
+          });
+        }
+      }
+    },
+    updateValue() {
+      const regex = new RegExp(/<img [^>]*src=\\*"([^"]*?)\\*"/g);
+      let initValue = (this.properties.value || '')
+        .toString()
+        .replace(/<img /g, `<img style="max-width:100%;height:auto" `)
+        .replace(/<pre>/g, `<pre class="pre">`)
+        .replace(/<blockquote>/g, `<blockquote class="blockquote">`)
+        .replace(/<table/g, `<table class="table" `)
+        .replace(/<th/g, `<th class="th" `)
+        .replace(/<td/g, `<td class="td" `)
+        .replace(/<p/g, `<p class="p" `);
+      this.setData({ originValue: initValue });
+
+      try {
+        const imgs = initValue.match(regex);
+        if (imgs && imgs.length > 0) {
+          imgs.map((img) => {
+            const url = img.replace(regex, '$1');
+            if (img.includes('cloud://')) {
+              initValue = initValue.replace(new RegExp(url, 'g'), '');
+            }
+          });
+        }
+        this.setData({ __html: initValue });
+
+        if (imgs && imgs.length > 0) {
+          (async () => {
+            await Promise.all(
+              imgs.map(async (img) => {
+                await this.getSrc(img, regex);
+              })
+            );
+            if (initValue !== this.data.originValue) {
+              this.setData({ __html: this.data.originValue });
+            }
+          })();
+        }
+      } catch (e) {
+        this.setData({ __html: initValue });
+      }
+    },
+  },
+  observers: {
+    value() {
+      this.updateValue();
+    },
+  },
+});

package/components/richText/index.json

@@ -0,0 +1,7 @@
+{
+  "component": true,
+  "styleIsolation": "shared",
+  "usingComponents": {
+    "mp-html": "./mp-html/index"
+  }
+}

package/components/richText/index.wxml

@@ -0,0 +1,3 @@
+<view class="weda-ui weda-RichTextView {{className}}" style="{{style}}">
+  <mp-html content="{{__html}}" />
+</view>

package/components/richText/index.wxss

@@ -0,0 +1,70 @@
+.weda-RichTextView {
+  font-size: 14px;
+}
+.weda-RichTextView .blockquote {
+  margin: 0 0 10px;
+  padding: 15px 20px;
+  background-color: #f1f2f3;
+  border-left: 5px solid #ccc;
+  color: #666;
+  font-style: italic;
+}
+
+.weda-RichTextView .pre {
+  max-width: 100%;
+  max-height: 100%;
+  margin: 10px 0;
+  padding: 15px;
+  overflow: auto;
+  background-color: #f1f2f3;
+  border-radius: 3px;
+  color: #666;
+  font-family: monospace;
+  font-size: 1em;
+  line-height: 1.14285em;
+  word-wrap: break-word;
+  white-space: pre-wrap;
+}
+
+.weda-RichTextView .tableWrapper {
+  margin: 20px 0;
+  padding: 0;
+  overflow-x: auto;
+  display: flex;
+  justify-content: center;
+}
+.weda-RichTextView .table {
+  min-width: fit-content;
+  border-collapse: collapse;
+  margin: 0;
+  overflow: hidden;
+}
+.weda-RichTextView .table .th,
+.weda-RichTextView .table .td {
+  box-sizing: border-box;
+  position: relative;
+  min-width: 70px;
+  padding: 0px 5px;
+  border: 1px solid #e1e6f0;
+  vertical-align: top;
+  background-clip: padding-box;
+}
+.weda-RichTextView .table .th {
+  font-weight: bold;
+  background-color: #f5f7fa;
+}
+.weda-RichTextView .table .td {
+  background-color: white;
+}
+.weda-RichTextView .table .th > .p,
+.weda-RichTextView .table .td > .p {
+  min-height: 1em;
+}
+.weda-RichTextView img {
+  max-width: 100%;
+  height: auto;
+  vertical-align: unset;
+}
+.weda-RichTextView ._img {
+  vertical-align: middle;
+}

package/components/richText/mp-html/index.js

@@ -0,0 +1,2 @@
+/* eslint-disable */
+"use strict"; function e(t) { "@babel/helpers - typeof"; return (e = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (e) { return typeof e; } : function (e) { return e && "function" == typeof Symbol && e.constructor === Symbol && e !== Symbol.prototype ? "symbol" : typeof e; })(t); } function t(e, t, o) { return (t = n(t)) in e ? Object.defineProperty(e, t, { value: o, enumerable: !0, configurable: !0, writable: !0 }) : e[t] = o, e; } function n(t) { var n = o(t, "string"); return "symbol" == e(n) ? n : n + ""; } function o(t, n) { if ("object" != e(t) || !t) return t; var o = t[Symbol.toPrimitive]; if (void 0 !== o) { var i = o.call(t, n || "default"); if ("object" != e(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === n ? String : Number)(t); } var i = require("./parser"), r = []; Component({ data: { nodes: [] }, properties: { containerStyle: String, content: { type: String, value: "", observer: function (e) { this.setContent(e); } }, copyLink: { type: Boolean, value: !0 }, domain: String, errorImg: String, lazyLoad: Boolean, loadingImg: String, pauseVideo: { type: Boolean, value: !0 }, previewImg: { type: null, value: !0 }, scrollTable: Boolean, selectable: null, setTitle: { type: Boolean, value: !0 }, showImgMenu: { type: Boolean, value: !0 }, tagStyle: Object, useAnchor: null }, created: function () { this.plugins = []; for (var e = r.length; e--;)this.plugins.push(new r[e](this)); }, detached: function () { this._hook("onDetached"); }, methods: { in: function (e, t, n) { e && t && n && (this._in = { page: e, selector: t, scrollTop: n }); }, navigateTo: function (e, n) { var o = this; return new Promise(function (i, r) { if (!o.data.useAnchor) return void r(Error("Anchor is disabled")); var a = wx.createSelectorQuery().in(o._in ? o._in.page : o).select((o._in ? o._in.selector : "._root") + (e ? "".concat(">>>", "#").concat(e) : "")).boundingClientRect(); o._in ? a.select(o._in.selector).scrollOffset().select(o._in.selector).boundingClientRect() : a.selectViewport().scrollOffset(), a.exec(function (e) { if (!e[0]) return void r(Error("Label not found")); var a = e[1].scrollTop + e[0].top - (e[2] ? e[2].top : 0) + (n || parseInt(o.data.useAnchor) || 0); o._in ? o._in.page.setData(t({}, o._in.scrollTop, a)) : wx.pageScrollTo({ scrollTop: a, duration: 300 }), i(); }); }); }, getText: function (e) { var t = ""; return function e(n) { for (var o = 0; o < n.length; o++) { var i = n[o]; if ("text" === i.type) t += i.text.replace(/&amp;/g, "&"); else if ("br" === i.name) t += "\n"; else { var r = "p" === i.name || "div" === i.name || "tr" === i.name || "li" === i.name || "h" === i.name[0] && i.name[1] > "0" && i.name[1] < "7"; r && t && "\n" !== t[t.length - 1] && (t += "\n"), i.children && e(i.children), r && "\n" !== t[t.length - 1] ? t += "\n" : "td" !== i.name && "th" !== i.name || (t += "\t"); } } }(e || this.data.nodes), t; }, getRect: function () { var e = this; return new Promise(function (t, n) { wx.createSelectorQuery().in(e).select("._root").boundingClientRect().exec(function (e) { return e[0] ? t(e[0]) : n(Error("Root label not found")); }); }); }, pauseMedia: function () { for (var e = (this._videos || []).length; e--;)this._videos[e].pause(); }, setPlaybackRate: function (e) { this.playbackRate = e; for (var t = (this._videos || []).length; t--;)this._videos[t].playbackRate(e); }, setContent: function (e, t) { var n = this; this.imgList && t || (this.imgList = []), this._videos = []; var o = {}, r = new i(this).parse(e); if (t) for (var a = this.data.nodes.length, s = r.length; s--;)o["nodes[".concat(a + s, "]")] = r[s]; else o.nodes = r; if (this.setData(o, function () { n._hook("onLoad"), n.triggerEvent("load"); }), this.data.lazyLoad || this.imgList._unloadimgs < this.imgList.length / 2) { var l = 0, c = function e(t) { t && t.height || (t = {}), t.height === l ? n.triggerEvent("ready", t) : (l = t.height, setTimeout(function () { n.getRect().then(e).catch(e); }, 350)); }; this.getRect().then(c).catch(c); } else this.imgList._unloadimgs || this.getRect().then(function (e) { n.triggerEvent("ready", e); }).catch(function () { n.triggerEvent("ready", {}); }); }, _hook: function (e) { for (var t = r.length; t--;)this.plugins[t][e] && this.plugins[t][e](); }, _add: function (e) { e.detail.root = this; } } });

package/components/richText/mp-html/index.json

@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "node": "./node/node"
+  }
+}

package/components/richText/mp-html/index.wxml

@@ -0,0 +1 @@
+<view class="_root {{selectable?'_select':''}}" style="{{containerStyle}}"><slot wx:if="{{!nodes[0]}}" /><node id="_root" childs="{{nodes}}" opts="{{[lazyLoad,loadingImg,errorImg,showImgMenu,selectable]}}" catchadd="_add" /></view>

package/components/richText/mp-html/index.wxss

@@ -0,0 +1,10 @@
+._root {
+  padding: 1px 0;
+  overflow-x: auto;
+  overflow-y: hidden;
+  -webkit-overflow-scrolling: touch;
+}
+._select {
+  -webkit-user-select: text;
+  user-select: text;
+}

package/components/richText/mp-html/node/node.js

@@ -0,0 +1,178 @@
+/* eslint-disable */
+'use strict';
+function t(e) {
+  '@babel/helpers - typeof';
+  return (t =
+    'function' == typeof Symbol && 'symbol' == typeof Symbol.iterator
+      ? function (t) {
+          return typeof t;
+        }
+      : function (t) {
+          return t &&
+            'function' == typeof Symbol &&
+            t.constructor === Symbol &&
+            t !== Symbol.prototype
+            ? 'symbol'
+            : typeof t;
+        })(e);
+}
+function e(t, e) {
+  var r = Object.keys(t);
+  if (Object.getOwnPropertySymbols) {
+    var o = Object.getOwnPropertySymbols(t);
+    e &&
+      (o = o.filter(function (e) {
+        return Object.getOwnPropertyDescriptor(t, e).enumerable;
+      })),
+      r.push.apply(r, o);
+  }
+  return r;
+}
+function r(t) {
+  for (var r = 1; r < arguments.length; r++) {
+    var i = null != arguments[r] ? arguments[r] : {};
+    r % 2
+      ? e(Object(i), !0).forEach(function (e) {
+          o(t, e, i[e]);
+        })
+      : Object.getOwnPropertyDescriptors
+      ? Object.defineProperties(t, Object.getOwnPropertyDescriptors(i))
+      : e(Object(i)).forEach(function (e) {
+          Object.defineProperty(t, e, Object.getOwnPropertyDescriptor(i, e));
+        });
+  }
+  return t;
+}
+function o(t, e, r) {
+  return (
+    (e = i(e)) in t
+      ? Object.defineProperty(t, e, {
+          value: r,
+          enumerable: !0,
+          configurable: !0,
+          writable: !0,
+        })
+      : (t[e] = r),
+    t
+  );
+}
+function i(e) {
+  var r = s(e, 'string');
+  return 'symbol' == t(r) ? r : r + '';
+}
+function s(e, r) {
+  if ('object' != t(e) || !e) return e;
+  var o = e[Symbol.toPrimitive];
+  if (void 0 !== o) {
+    var i = o.call(e, r || 'default');
+    if ('object' != t(i)) return i;
+    throw new TypeError('@@toPrimitive must return a primitive value.');
+  }
+  return ('string' === r ? String : Number)(e);
+}
+Component({
+  data: { ctrl: {}, isiOS: wx.getSystemInfoSync().system.includes('iOS') },
+  properties: { childs: Array, opts: Array },
+  options: { addGlobalClass: !0 },
+  attached: function () {
+    this.triggerEvent('add', this, { bubbles: !0, composed: !0 });
+  },
+  methods: {
+    noop: function () {},
+    getNode: function (t) {
+      try {
+        for (
+          var e = t.split('_'), r = this.data.childs[e[0]], o = 1;
+          o < e.length;
+          o++
+        )
+          r = r.children[e[o]];
+        return r;
+      } catch (t) {
+        return { text: '', attrs: {}, children: [] };
+      }
+    },
+    play: function (t) {
+      var e = t.target.dataset.i,
+        o = this.getNode(e);
+      if (
+        (this.root.triggerEvent('play', {
+          source: o.name,
+          attrs: r(r({}, o.attrs), {}, { src: o.src[this.data.ctrl[e] || 0] }),
+        }),
+        this.root.data.pauseVideo)
+      ) {
+        for (var i = !1, s = t.target.id, n = this.root._videos.length; n--; )
+          this.root._videos[n].id === s
+            ? (i = !0)
+            : this.root._videos[n].pause();
+        if (!i) {
+          var a = wx.createVideoContext(s, this);
+          (a.id = s),
+            this.root.playbackRate && a.playbackRate(this.root.playbackRate),
+            this.root._videos.push(a);
+        }
+      }
+    },
+    imgTap: function (t) {
+      var e = this.getNode(t.target.dataset.i);
+      if (
+        !e.attrs.ignore &&
+        (this.root.triggerEvent('imgtap', e.attrs), this.root.data.previewImg)
+      ) {
+        var r = this.root.imgList[e.i];
+        wx.previewImage({
+          showmenu: this.root.data.showImgMenu,
+          current: r,
+          urls: this.root.imgList,
+        });
+      }
+    },
+    imgLoad: function (t) {
+      var e,
+        r = t.target.dataset.i,
+        i = this.getNode(r);
+      i.w
+        ? ((this.data.opts[1] && !this.data.ctrl[r]) ||
+            -1 === this.data.ctrl[r]) &&
+          (e = 1)
+        : (e = t.detail.width),
+        e && this.setData(o({}, 'ctrl.' + r, e)),
+        this.checkReady();
+    },
+    checkReady: function () {
+      var t = this;
+      this.root.data.lazyLoad ||
+        ((this.root.imgList._unloadimgs -= 1),
+        this.root.imgList._unloadimgs ||
+          setTimeout(function () {
+            t.root
+              .getRect()
+              .then(function (e) {
+                t.root.triggerEvent('ready', e);
+              })
+              .catch(function () {
+                t.root.triggerEvent('ready', {});
+              });
+          }, 350));
+    },
+    mediaError: function (t) {
+      var e = t.target.dataset.i,
+        r = this.getNode(e);
+      if ('video' === r.name || 'audio' === r.name) {
+        var i = (this.data.ctrl[e] || 0) + 1;
+        if ((i > r.src.length && (i = 0), i < r.src.length))
+          return this.setData(o({}, 'ctrl.' + e, i));
+      } else
+        'img' === r.name &&
+          (this.data.opts[2] && this.setData(o({}, 'ctrl.' + e, -1)),
+          this.checkReady());
+      this.root &&
+        this.root.triggerEvent('error', {
+          source: r.name,
+          attrs: r.attrs,
+          errMsg: t.detail.errMsg,
+        });
+    },
+  },
+});

package/components/richText/mp-html/node/node.json

@@ -0,0 +1,7 @@
+{
+  "component": true,
+  "usingComponents": {
+    "node": "./node",
+    "wd-unified-link": "../../../wd-unified-link/index"
+  }
+}

package/components/richText/mp-html/node/node.wxml

@@ -0,0 +1,60 @@
+<wxs module="isInline">var e={abbr:!0,b:!0,big:!0,code:!0,del:!0,em:!0,i:!0,ins:!0,label:!0,q:!0,small:!0,span:!0,strong:!0,sub:!0,sup:!0};module.exports=function(n,i){return e[n]||-1!==(i||"").indexOf("inline")};</wxs>
+<template name="el">
+  <block wx:if="{{n.name==='img'}}">
+    <rich-text wx:if="{{n.t}}" style="display:{{n.t}}" nodes="<img class='_img' style='{{n.attrs.style}}' src='{{n.attrs.src}}'>" data-i="{{i}}" catchtap="imgTap" />
+    <block wx:else>
+      <image wx:if="{{(opts[1]&&!ctrl[i])||ctrl[i]<0}}" class="_img" style="{{n.attrs.style}}" src="{{ctrl[i]<0?opts[2]:opts[1]}}" mode="widthFix" />
+      <image
+        id="{{n.attrs.id}}"
+        class="_img {{n.attrs.class}}"
+        style="{{ctrl[i]===-1?'display:none;':''}}width:{{ctrl[i]||1}}px;height:1px;{{n.attrs.style}}"
+        src="{{n.attrs.src}}"
+        mode="{{!n.h?'widthFix':(!n.w?'heightFix':(n.m||'scaleToFill'))}}"
+        lazy-load="{{opts[0]}}"
+        webp="{{n.webp}}"
+        show-menu-by-longpress="{{opts[3]&&!n.attrs.ignore}}"
+        data-i="{{i}}"
+        bindload="imgLoad"
+        binderror="mediaError"
+        catchtap="imgTap"
+        bindlongpress="noop"
+      />
+    </block>
+  </block>
+  <text wx:elif="{{n.text}}" user-select="{{opts[4]=='force'&&isiOS}}" decode>{{n.text}}</text>
+  <text wx:elif="{{n.name==='br'}}">\n</text>
+  <!-- <view wx:elif="{{n.name==='a'}}" id="{{n.attrs.id}}" class="{{n.attrs.href?'_a ':''}}{{n.attrs.class}}" hover-class="_hover" style="display:inline;{{n.attrs.style}}" data-i="{{i}}" catchtap="linkTap"> -->
+  <view wx:elif="{{n.name==='a'}}" id="{{n.attrs.id}}" class="{{n.attrs.href?'_a ':''}}{{n.attrs.class}}" hover-class="_hover" style="display:inline-block;{{n.attrs.style}}" data-i="{{i}}">
+    <!-- <node childs="{{n.children}}" opts="{{opts}}" style="display:inherit" /> -->
+    <wd-unified-link url="{{n.attrs.href}}" options="{{n.attrs.options}}">
+      <node childs="{{n.children}}" opts="{{opts}}" style="display: inherit" />
+    </wd-unified-link>
+  </view>
+  <video wx:elif="{{n.name==='video'}}" id="{{n.attrs.id}}" class="{{n.attrs.class}}" style="{{n.attrs.style}}" autoplay="{{n.attrs.autoplay}}" controls="{{n.attrs.controls}}" loop="{{n.attrs.loop}}" muted="{{n.attrs.muted}}" object-fit="{{n.attrs['object-fit']}}" poster="{{n.attrs.poster}}" src="{{n.src[ctrl[i]||0]}}" data-i="{{i}}" bindplay="play" binderror="mediaError" />
+  <audio wx:elif="{{n.name==='audio'}}" id="{{n.attrs.id}}" class="{{n.attrs.class}}" style="{{n.attrs.style}}" author="{{n.attrs.author}}" controls="{{n.attrs.controls}}" loop="{{n.attrs.loop}}" name="{{n.attrs.name}}" poster="{{n.attrs.poster}}" src="{{n.src[ctrl[i]||0]}}" data-i="{{i}}" bindplay="play" binderror="mediaError" />
+  <rich-text wx:else id="{{n.attrs.id}}" style="{{n.f}}" user-select="{{opts[4]}}" nodes="{{[n]}}" />
+</template>
+<block wx:for="{{childs}}" wx:for-item="n1" wx:for-index="i1" wx:key="i1">
+  <template wx:if="{{!n1.c&&(!n1.children||n1.name==='a'||!isInline(n1.name,n1.attrs.style))}}" is="el" data="{{n:n1,i:''+i1,opts:opts,ctrl:ctrl}}" />
+  <view wx:else id="{{n1.attrs.id}}" class="_{{n1.name}} {{n1.attrs.class}}" style="{{n1.attrs.style}}">
+    <block wx:for="{{n1.children}}" wx:for-item="n2" wx:for-index="i2" wx:key="i2">
+      <template wx:if="{{!n2.c&&(!n2.children||n2.name==='a'||!isInline(n2.name,n2.attrs.style))}}" is="el" data="{{n:n2,i:i1+'_'+i2,opts:opts,ctrl:ctrl}}" />
+      <view wx:else id="{{n2.attrs.id}}" class="_{{n2.name}} {{n2.attrs.class}}" style="{{n2.attrs.style}}">
+        <block wx:for="{{n2.children}}" wx:for-item="n3" wx:for-index="i3" wx:key="i3">
+          <template wx:if="{{!n3.c&&(!n3.children||n3.name==='a'||!isInline(n3.name,n3.attrs.style))}}" is="el" data="{{n:n3,i:i1+'_'+i2+'_'+i3,opts:opts,ctrl:ctrl}}" />
+          <view wx:else id="{{n3.attrs.id}}" class="_{{n3.name}} {{n3.attrs.class}}" style="{{n3.attrs.style}}">
+            <block wx:for="{{n3.children}}" wx:for-item="n4" wx:for-index="i4" wx:key="i4">
+              <template wx:if="{{!n4.c&&(!n4.children||n4.name==='a'||!isInline(n4.name,n4.attrs.style))}}" is="el" data="{{n:n4,i:i1+'_'+i2+'_'+i3+'_'+i4,opts:opts,ctrl:ctrl}}" />
+              <view wx:else id="{{n4.attrs.id}}" class="_{{n4.name}} {{n4.attrs.class}}" style="{{n4.attrs.style}}">
+                <block wx:for="{{n4.children}}" wx:for-item="n5" wx:for-index="i5" wx:key="i5">
+                  <template wx:if="{{!n5.c&&(!n5.children||n5.name==='a'||!isInline(n5.name,n5.attrs.style))}}" is="el" data="{{n:n5,i:i1+'_'+i2+'_'+i3+'_'+i4+'_'+i5,opts:opts,ctrl:ctrl}}" />
+                  <node wx:else id="{{n5.attrs.id}}" class="_{{n5.name}} {{n5.attrs.class}}" style="{{n5.attrs.style}}" childs="{{n5.children}}" opts="{{opts}}" />
+                </block>
+              </view>
+            </block>
+          </view>
+        </block>
+      </view>
+    </block>
+  </view>
+</block>