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
版权声明:wx-mina-html-view:微信小程序渲染超文本标记语�是由宝哥软件园云端程序自动收集整理而来。如果本文侵犯了你的权益,请联系本站底部QQ或者邮箱删除。