wx-mina-html-view:微信小程序渲染超文本标记语�

微信小程序渲染超文本标记语言

支持的特性：

大部分的普通超文本标记语言标签（未全部测试)

img、视频、音频

表，tr，th，td等表格标签

a标签转领航员

超文本标记语言实体

七牛图片裁剪

自定义插件

不支持表单，输入，选择等表单元素。

使用方法

请参考页面/索引目录里的文件。

拷贝html-view目录到你的项目.

在页面的js/wxml/wxss中， 引入代码：

index.js

//引入html解析器常量HTMl解析器=require('././html-view/index')//.//解析超文本标记语言字符串const html=新的HTMl Parser(' phello world/p ')。节点这。setdata({ html })

index.wxml

导入src='././html-视图/索引。wxml/'模板为=' html-view ' data=' { { data : html } } '/

index.wxss

@ import '././html-视图/索引。wxss '；

API

new HtmlParser(htmlString, { baseUrl })

新建一个HtmlParser实例。

实例化后通过节点属性获取解析后的对象。数据结构请参看喜马拉雅山。

baseUrl:将a、img、视频、音频、源引用的相对地址使用baseUrl转换为绝对地址。

const html=NewHTML Parser(' phello world/p ').节点

htmlParser.each(fn)

递归节点和以下的的每个元素使用【数学】函数函数处理

【数学】函数将收到3个参数：

fn(节点、索引、数组)

htmlParser.filter(fn)

递归节点和以下的的每个元素使用【数学】函数函数过滤。如果【数学】函数返回没错，则保留该元素，否则删除该元素。【数学】函数收到的参数同htmlParser.each()

htmlParser.map(fn)

递归节点和以下的的每个元素使用【数学】函数函数处理。【数学】函数需要返回一个新的元素结构，fn收到的参数同htmlParser.each()

内置处理工具

图片URL加上七牛imageView2处理

qiniuimg(域、质量)

img地址的域名如果包含领域并且没有查询字符串，则在后面加上imageView2参数：imageView2/2/w/WIDTH/q/QUALITY .

宽度为手机实际像素宽度（像素比率*窗口宽度)。

质量为传入的质量，如果不传质量，这部分则省略。

const qiniuImg=require('././HTMl-view/每个/qinimig ')const HTMl=new HTMl Parser(HTMl StrIng).每个(qiniuimg(' qnssl。com ').节点

a标签转navigator

解析路由（域、路由)

域名：a指向的统一资源定位器必须是该领域，才会执行转换

路由：将统一资源定位器的路径名使用路线匹配，找到匹配的路由则执行转换。

路线的定义请前往路由器。

route.params和路线。选项会被合并到统一资源定位器的查询字符串中，合并/覆盖规则：Object.assign(route.query，route.params，route.options)

const resolveAnchor=require('././HTMl-view/each/resolveAnchor ')const HTMl=new HTMl Parser(HTMl StrIng).每个(resolveAnchor('www.example.com '，[ //['/pathname/of/url '，'/pages/path/of/local/page/index ']['/foo '，'/pages/foo/index']，['/bar/:id '，'/pages/bar/index'])。节点

开发

由于小程序的模板不支持递归调用（哈哈什么鬼~), 修改wxml模板请修改build/template.wxml文件，然后执行国家预防机制运行构建模板生成html-view/nodes.wxml文件

Github:https://github.com/fenivana/wx-mina-html-view