Vue>> wx-parse>> 返回
项目作者： afeiship

项目描述 ：
Parse html to wxml.
高级语言： JavaScript
项目地址: git://github.com/afeiship/wx-parse.git
创建时间： 2019-05-25T02:47:57Z
项目社区：https://github.com/afeiship/wx-parse
开源协议：MIT License
下载


wx-parse

Parse html to wxml.

usage

  1. Copy dist to your project.
  2. Build deepth with gulp, you can use pakcage.json
    1.  "buildConfig": {
    2.    "deepth": 8,
    3.    "prefix": "html-tag-"
    4.  }
  3. Use template in your project
    1.  <import src="../../components/views/parser/html.wxml" ></import>
    2.  <template is="html" data="{{ item: nodes }}"></template>
  4. VDOM JSON
    1. {
    2.    type: 'element',
    3.    tagName: 'section',
    4.    children: [
    5.      {
    6.        type: 'element',
    7.        tagName: 'div',
    8.        attributes: {
    9.          style: 'height:10rpx;width: 20rpx; border:1px solid #f00;'
    10.        },
    11.        children: [
    12.          {
    13.            type: 'element',
    14.            tagName: 'strong',
    15.            attributes: {},
    16.            children: [
    17.              {
    18.                type: 'text',
    19.                content: 'Strong text'
    20.              }
    21.            ]
    22.          },
    23.          {
    24.            type: 'element',
    25.            tagName: 'tu-audio',
    26.            attributes: {
    27.              class: 'wp-audio',
    28.              src:
    29.                'http://kolber.github.io/audiojs/demos/mp3/juicy.mp3'
    30.            }
    31.          },
    32.          {
    33.            type: 'element',
    34.            tagName: 'img',
    35.            attributes: {
    36.              src: 'https://via.placeholder.com/200x100',
    37.              class: 'image'
    38.            }
    39.          },
    40.          {
    41.            type: 'text',
    42.            content: 'I am text'
    43.          },
    44.          {
    45.            type: 'element',
    46.            tagName: 'tu-chart'
    47.          }
    48.        ]
    49.      },
    50.      {
    51.        type: 'element',
    52.        tagName: 'tu-image',
    53.        attributes: {
    54.          src:
    55.            'http://himg.bdimg.com/sys/portrait/item/be10475f686d6c73db00.jpg'
    56.        }
    57.      },
    58.      {
    59.        type: 'element',
    60.        tagName: 'br'
    61.      },
    62.      {
    63.        type: 'text',
    64.        content: 'Just another text!!!'
    65.      }
    66.    ]
    67.  }

renderTimeChunk

  1. import { $interaction, $api } from '#';
  2. import wxParse from 'wx-parse';
  3. import nxTimeChunk from 'next-time-chunk';
  5. nx.Component({
  6.   options: {
  7.     addGlobalClass: true
  8.   },
  9.   properties: {
  10.     model: {
  11.       type: Object,
  12.       value: {}
  13.     }
  14.   },
  15.   data: {
  16.     nodes: {
  17.       loops: []
  18.     }
  19.   },
  20.   lifetimes: {
  21.     attached() {
  22.       const article_id = parseInt(this.data.model.elem_id);
  23.       $api.article_content_detail({ article_id }).then((response) => {
  24.         const nodes = wxParse(response.content, { chunkOffset: 100 });
  25.         const { loops } = this.data.nodes;
  26.         $interaction.loading(true, { title: '加载中' });
  27.         nxTimeChunk(nodes, (index, node) => {
  28.           loops.push(index);
  29.           this.setData({
  30.             'nodes.loops': loops,
  31.             [`nodes.${index}`]: node
  32.           });
  33.           console.info('[ render chunk ]:', index);
  34.         })().then(() => {
  35.           this.triggerEvent('complete');
  36.         });
  37.       });
  38.     }
  39.   }
  40. });
  1. {
  2.     "loops":[0,1,2,3,4],
  3.     "nodes":{
  4.         "0": node0,
  5.         "1": node1,
  6.         "2": node2,
  7.         "3": node3,
  8.         "4": node4,
  9.     }
  10. }
  1. <import src="./dist/html.wxml" ></import>
  2. <view class="root-container tu-wx-parse">
  3.   <block wx:for="{{ nodes.loops }}" wx:key="{{ index }}" wx:for-item="subItem">
  4.     <block wx:if="{{ nodes[index] }}">
  5.       <template is="html" data="{{ item: nodes[index] }}"></template>
  6.     </block>
  7.   </block>
  8. </view>

KENG

  1. - 最大的坑：不支持递归 
  2. - 不支持 createElement 之类的API
  3. - 网上有说法是用 A->B / B->A 之类的方法代替递归，实际上是不行的，因为他们测试的层级只有2层而已
  4. - 另外：感谢 wxParse 这个库，实现思路是参考这个的

resources