微信小程序开发之wxParse组件化

来源:简书 分类: 文章浏览史 发布时间:2020-07-31 17:46:44 最后更新:2020-07-31 浏览:117
转载声明:
本文为摘录自“简书”,版权归原作者所有。
温馨提示:
为了更好的体验,请点击原文链接进行浏览
摘录时间:
2020-07-31 17:46:44

背景

6月的时候,公司有个小程序项目是展示一些微信公众号文章。因为获取的文章内容都是HTML DOM的结构。在小程序里面如果简单地通过RichText展示,可能会出现一些样式和原文不一致的问题。还有一个需求是要在文章内进行一些选择、标注的操作。这时候就不可避免地要将HTML String转成HTML DOM进行处理、显示。而wxParse就是这样做的。

功能1.gif

思路

既然wxParse能够显示富文本而且它的思路是将整个HTML String转换成一个Node数组,数组按照传入的HTML String生成HTML DOM结构。所以既然它能够处理每一个DOM,那么我们也可以在其中的一环上做一些事情,例如标注。然而实际开发的时候是在显示的时候进行处理的。

分析wxParse

wxParse的使用文档里写的很清楚。

WxParse.wxParse('article', 'html', article, that, 5);

在对应的Component或者page组件中调用其这句话,其实就是将article处理成node数组,存在that的‘article’字段里,而that就是一个component组件。
接下来

// 引入模板
<import src="你的路径/wxParse/wxParse.wxml"/>
//这里data中article为bindName
<template is="wxParse" data="{{wxParseData:article.nodes}}"/>

通过这个template来进行展示,基本思路就是这样子。
这个wxParse.wxml目前是一个拥有11层的template嵌套,也就是最多支持11层的DOM树了。
然而这是无法满足我们的需求的,因为标注功能需要操作DOM,也就是通过点击,你要知道你点了哪一个DOM,而template在目前的版本是无法传递方法的。所以有了接下来的故事,也就是把wxParse组件化,将其变为组件不就可以传递方法到最内层,然后做任何事情了嘛。

组件化

组件化之后的结构长这样,其实就是把template中的每一层都抽出来写成组件,而转node数组的那部分,还是用之前的方法,这里只是负责显示的部分。


组件化后的结构.png

wxEmojiView、wxParseBr、wxParseImg、wxParseVideo等等都是简单的组件,负责显示传入的DOM就可以了,而wxParse比较复杂一些,根据node的类型,来指定渲染哪些组件。直接贴代码大家感受一下吧。
这里出现了组件自身又引用自身的情况(第5行),这个在微信小程序原生开发中是可行的。

<block wx:if="{{item.node == 'element'}}">
    <block wx:if="{{item.tag == 'button'}}">
      <button type="default" size="mini">
        <block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="">
          <custom-parse item="{{item}}" notes="{{notes}}"></custom-parse>
        </block>
      </button>
    </block>
    <!--li类型-->
    <block wx:elif="{{item.tag == 'li'}}">
      <view class="{{item.classStr}} wxParse-li" style="{{item.styleStr}}">
        <view class="{{item.classStr}} wxParse-li-inner">
          <view class="{{item.classStr}} wxParse-li-text">
            <view class="{{item.classStr}} wxParse-li-circle"></view>
          </view>
          <view class="{{item.classStr}} wxParse-li-text">
            <block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="">
               <custom-parse item="{{item}}" notes="{{notes}}"></custom-parse>
            </block>
          </view>
        </view>
      </view>
    </block>

    <!--video类型-->
    <block wx:elif="{{item.tag == 'video'}}">
      <custom-parse-video item="{{item}}"></custom-parse-video>
    </block>

    <!--img类型-->
    <block wx:elif="{{item.tag == 'img'}}">
      <custom-parse-img item="{{item}}"></custom-parse-img>
    </block>

    <!--a类型-->
    <block wx:elif="{{item.tag == 'a'}}">
      <view bindtap="wxParseTagATap" class="wxParse-inline {{item.classStr}} wxParse-{{item.tag}}" data-src="{{item.attr.href}}" style="{{item.styleStr}}">
        <block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="">
           <custom-parse item="{{item}}" notes="{{notes}}"></custom-parse>
        </block>
      </view>
    </block>
    <block wx:elif="{{item.tag == 'table'}}">
      <view class="{{item.classStr}} wxParse-{{item.tag}}" style="{{item.styleStr}}">
        <block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="">
           <custom-parse item="{{item}}" notes="{{notes}}"></custom-parse>
        </block>
      </view>
    </block>

    <block wx:elif="{{item.tag == 'br'}}">
      <custom-parse-br item="{{item}}"></custom-parse-br>
    </block>
    <!--其他块级标签-->
    <block wx:elif="{{item.tagType == 'block'}}">
      <view class="{{item.classStr}} wxParse-{{item.tag}}" style="{{item.styleStr}}">
        <block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="">
           <custom-parse item="{{item}}" notes="{{notes}}"></custom-parse>
        </block>
      </view>
    </block>

    <!--内联标签-->
    <view wx:else class="{{item.classStr}} wxParse-{{item.tag}} wxParse-{{item.tagType}}" style="{{item.styleStr}}">
      <block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="">
         <custom-parse item="{{item}}" notes="{{notes}}"></custom-parse>
      </block>
    </view>

  </block>

  <!--判断是否是文本节点-->
  <block wx:elif="{{item.node == 'text'}}">
    <!--如果是,直接进行-->
    <custom-emoji-view item="{{item}}" bind:onMark="onMark" notes="{{notes}}"></custom-emoji-view>
  </block>

完成之后,只需要在你需要的地方调用这个组件就可以了。

<html-view id="htmlView" wxParseData="{{nodes}}"
          notes="{{notes}}"
          bind:onMark="onMark" 
          bind:unMark="unMark"
          bind:wxParseImgTap="wxParseImgTap" bind:wxParseImgLoad="wxParseImgLoad" ></html-view>

需要哪些方法,就可以像其他组件一样,往内部传递下去就行了。只需要在最内层设置一下冒泡和跨越组件边界就可以了

onMark: function (event) {
      var myEventOption = { bubbles: true, composed:true} // 触发事件的选项
      this.triggerEvent('onMark', event, myEventOption);
    }

在Taro(bate3)中使用

因为开发中遇到了全局状态管理的的问题,第二版采用Taro重构。在这个功能上又遇到了问题,我试图用同样的思路来组件化。然后Taro目前的版本还没有解决组件嵌套自身的问题,大家可以看我箭头,这是在CustomParse组件中,在第二个箭头的位置,又引用了它自身。这种写法,会导致编译的时候循环引用。我猜想是编译转成小程序原生结构的时候,导致了死循环。所以这个方法就行不通了。


CustomParse.png

然后,产品是不会管怎么实现的,明天上线!
所以为了顺利上线,我用了最土鳖的办法,直接把上一个版本的这部分代码直接复制到了Taro打包好的dist文件夹中,经过复杂的调试,因为还要相关用到的组件一起copy,最终搞定,留下的一个问题就是在copy进来的组件中没有享受到了Taro Redux的福利,所以这个组件相当于是一个没有状态的死组件,孤单地游离在外面...

php技术微信