浅谈高大上的微信小程序中渲染html内容—技术分享

2

3

4

5

6

7

8

9

10

11

12

<!-- wepyhtml-repeat start -->

<template name="wepyhtml-0">

  <block wx:if="{{ content }}" wx:for="{{ content }}">

    <block wx:if="{{ item.type === ‘node‘ }}">

      <view class="wepyhtml-tag-{{ item.name }}">

        <!-- next template -->

      </view>

    </block>

    <block wx:else>{{ item.text }}</block>

  </block>

</template>

<!-- wepyhtml-repeat end -->

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

// wepy.config.js

{

  plugins: {

    replace: {

      filter: /\.wxml$/,

      config: {

        find: /<\!-- wepyhtml-repeat start -->([\W\w]+?)<\!-- wepyhtml-repeat end -->/,

        replace(match, tpl) {

          let result = ‘‘;

          // 反正不要钱，直接写个20层嵌套

          for (let i = 0; i <= 20; i++) {

            result += ‘\n‘ + tpl

              .replace(‘wepyhtml-0‘, ‘wepyhtml-‘ + i)

              .replace(/<\!-- next template -->/g, () => {

                return i === 20 ?

                  ‘‘ :

                  `<template is="wepyhtml-${ i + 1 }" wx:if="{{ item.children }}" data="{{ content: item.children"></template>`;

              });

          }

          return result;

        }

      }

    }

  }

}

<block wx:if="{{ $htmlContent$wepyHtml$content }}" wx:for="{{ $htmlContent$wepyHtml$content }}">

2

3

4

5

6

7

8

9

10

11

12

13

<!-- wepyhtml-repeat start -->

<template name="wepyhtml-0">

  {{ thisIsMe }}

  <block wx:if="{{ content }}" wx:for="{{ content }}">

    <block wx:if="{{ item.type === ‘node‘ }}">

      <view class="wepyhtml-tag-{{ item.name }}">

        <!-- next template -->

      </view>

    </block>

    <block wx:else>{{ item.text }}</block>

  </block>

</template>

<!-- wepyhtml-repeat end -->

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

replace(match, tpl) {

  let result = ‘‘;

  let prefix = ‘‘;

  // 匹配 thisIsMe 的前缀

  tpl = tpl.replace(/\{\{\s*(\$.*?\$)thisIsMe\s*\}\}/, (match, p) => {

    prefix = p;

    return ‘‘;

  });

  for (let i = 0; i <= 20; i++) {

    result += ‘\n‘ + tpl

      .replace(‘wepyhtml-0‘, ‘wepyhtml-‘ + i)

      .replace(/<\!-- next template -->/g, () => {

        return i === 20 ?

          ‘‘ :

          `<template is="wepyhtml-${ i + 1 }" wx:if="{{ item.children }}" data="{{ ${ prefix }content: item.children }}"></template>`;

      });

  }

  return result;

}

2

3

4

5

6

7

8

9

onNodeCreate(name, attrs) {

  if (name === ‘img‘) {

    attrs[‘data-src‘] = attrs.src;

    // 预览图数组

    this.previewImgs.push(attrs.src);

    // 缩图

    attrs.src = resizeImg(attrs.src, 640);

  }

}

2

3

<template name="wepyhtml-img">

  <image class="wepyhtml-tag-img" mode="widthFix" src="{{ elem.attrs.src }}" data-src="{{ elem.attrs[‘data-src‘] || elem.attrs.src }}" @tap="imgTap"></image>

</template>

2

3

4

5

6

7

// 点击小图看大图

imgTap(e) {

  wepy.previewImage({

    current: e.currentTarget.dataset.src,

    urls: this.previewImgs

  });

}

2

3

4

5

6

7

8

9

10

<template name="wepyhtml-video">

  <view class="wepyhtml-tag-video" @tap="videoTap" data-nodeid="{{ elem.nodeId }}">

    <!-- 视频封面 -->

    <image class="wepyhtml-tag-img wepyhtml-tag-video__poster" mode="widthFix" src="{{ elem.attrs.poster }}"></image>

    <!-- 播放图标 -->

    <image class="wepyhtml-tag-img wepyhtml-tag-video__play" src="./imgs/icon-play.png"></image>

    <!-- 视频组件 -->

    <video style="display: none;" src="{{ elem.attrs.src }}" id="wepyhtml-video-{{ elem.nodeId }}" @fullscreenchange="videoFullscreenChange" @play="videoPlay"></video>

  </view>

</template>

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

{

  // 点击封面图，播放视频

  videoTap(e) {

    const nodeId = e.currentTarget.dataset.nodeid;

    const context = wepy.createVideoContext(‘wepyhtml-video-‘ + nodeId);

    context.play();

    // 在安卓微信下，如果视频不可见，则调用play()也无法播放

    // 需要再调用全屏方法

    if (wepy.getSystemInfoSync().platform === ‘android‘) {

      context.requestFullScreen();

    }

  },

  // 视频层级较高，为防止遮挡其他特殊定位元素，造成界面异常，

  // 强制全屏播放

  videoPlay(e) {

    wepy.createVideoContext(e.currentTarget.id).requestFullScreen();

  },

  // 退出全屏则暂停

  videoFullscreenChange(e) {

    if (!e.detail.fullScreen) {

      wepy.createVideoContext(e.currentTarget.id).pause();

    }

  }

}