宝哥软件园

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

编辑:宝哥软件园 来源:互联网 时间:2021-12-17

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

wx-mina-html-view: 微信小程序渲染html(图1)

支持的特性:

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

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

更多资讯
游戏推荐
更多+