更新记录

0.0.1（2019-12-06）

• 初始化项目

平台兼容性

说明

仅适用与uniappv3版本App以及H5端

wxs内使用document解析html字符串返回数据。因为会传递一次数据效率并没有直接用正则解析高，但是很方便。

属性说明

patternItem

事件说明

resultItem结构与参数pattern相关，每一个resultItem对应一个htmlRoot的节点

示例

<template>
  <view class="content">
    <view v-for="(bookItem,bookIndex) in list" :key="bookIndex" class="book-item">
      <view>{{bookItem.title}}</view>
      <view>{{bookItem.author}}</view>
      <view v-for="(chapterItem,chapterIndex) in bookItem.chapter" :key="chapterIndex" class="book-item__chapter">
        {{chapterItem}}
      </view>
    </view>
    <wxs-html2data :htmlString="htmlString" :htmlRoot="htmlRoot" :pattern="pattern" @getResult="getResult"></wxs-html2data>
  </view>
</template>

<script>
  import wxsHtml2data from '@/components/wxs-html2data/wxs-html2data.vue'
  export default {
    components: {
      wxsHtml2data
    },
    data() {
      return {
        htmlString: '',
        htmlRoot: 'div#parser-root>ul>li', // div#parser-root为自动包裹的节点为了方便写选择器
        pattern: [{
          name: 'title', // 返回字段名
          selector: 'li>div.title' // 选择器
        }, {
          name: 'author',
          selector: 'li>div.author'
        }, {
          name: 'chapter',
          selector: 'ul>li'
        }],
        list: []
      }
    },
    onLoad() {
      this.getDataFromHtml()
    },
    methods: {
      getDataFromHtml() {
        setTimeout(() => {
          this.htmlString =
            `<ul>
              <li>
                  <div class="title">标题1</div>
                  <div class="author">作者1</div>
                  <ul>
                    <li>书1-第1章</li>
                    <li>书1-第2章</li>
                    <li>书1-第3章</li>
                  </ul>
              </li>
              <li>
                  <div class="title">标题2</div>
                  <div class="author">作者2</div>
                  <ul>
                    <li>书2-第1章</li>
                    <li>书2-第2章</li>
                    <li>书2-第3章</li>
                  </ul>
              </li>
              <li>
                  <div class="title">标题3</div>
                  <div class="author">作者3</div>
                  <ul>
                    <li>书3-第1章</li>
                    <li>书3-第2章</li>
                    <li>书3-第3章</li>
                  </ul>
              </li>
          </ul>`
        }, 200)
      },
      getResult(res) {
        this.list.push(...res)
      }
    }
  }
</script>

<style>
  .book-item {
    margin-bottom: 30px;
  }

  .book-item__chapter {
    text-indent: 20px;
  }
</style>

Tips

• 再次强调一下：仅适用与uniappv3版本App以及H5端
• 如果pattern中的选择器获取多个查询结果，则对应字段会返回数组类型（比如示例中的chapter字段）
• 主要代码位于parser.wxs，只有30行很方便改写