wx-mina-html-view
微信小程序渲染html
支持的特性:
大部分的普通HTML标签(未全部测试)
, ,
, | 等表格标签 标签转 HTML entities 七牛图片裁剪 自定义插件 不支持 , , 等表单元素.使用方法 请参考pages/index目录里的文件. 拷贝html-view目录到你的项目. 在页面的js/wxml/wxss中, 引入代码: index.js // 引入HtmlParser const HtmlParser = require('../../html-view/index') // ... // 解析HTML字符串 const html = new HtmlParser(' hello world ').nodesthis.setData({ html }) index.wxml index.wxss @import "../../html-view/index.wxss"; API new HtmlParser(htmlString, { baseUrl }) 新建一个HtmlParser实例. 实例化后通过nodes属性获取解析后的对象. 数据结构请参看himalaya. baseUrl: 将, , , , 引用的相对地址使用baseUrl转换为绝对地址. const html = new HtmlParser(' hello world ').nodeshtmlParser.each(fn) 递归nodes和以下的的每个元素使用fn函数处理 fn将收到3个参数: fn(node, index, array) htmlParser.filter(fn) 递归nodes和以下的的每个元素使用fn函数过滤. 如果fn返回true, 则保留该元素, 否则删除该元素. fn收到的参数同htmlParser.each() htmlParser.map(fn) 递归nodes和以下的的每个元素使用fn函数处理. fn需要返回一个新的元素结构, fn收到的参数同htmlParser.each() 内置处理工具 图片URL加上七牛imageView2处理 qiniuImg(domain, quality) 地址的域名如果包含domain并且没有query string, 则在后面加上imageView2参数: ?imageView2/2/w/WIDTH/q/QUALITY. WIDTH为手机实际像素宽度 (pixelRatio * windowWidth). QUALITY为传入的quality, 如果不传quality, 这部分则省略. const qiniuImg = require('../../html-view/each/qiniuImg') const html = new HtmlParser(htmlString).each(qiniuImg('qnssl.com')).nodes 标签转 resolveAnchor(domain, routes) domain: 指向的URL必须是该domain, 才会执行转换 routes: 将URL的pathname使用routes匹配, 找到匹配的路由则执行转换. routes的定义请前往Router. route.params和route.options会被合并到URL的query string中, 合并/覆盖规则: Object.assign(route.query, route.params, route.options) const resolveAnchor = require('../../html-view/each/resolveAnchor') const html = new HtmlParser(htmlString).each(resolveAnchor('www.example.com', [ // ['/pathname/of/url', '/pages/path/of/local/page/index'] ['/foo', '/pages/foo/index'], ['/bar/:id', '/pages/bar/index'] ])).nodes 开发 由于小程序的template不支持递归调用(哈哈什么鬼~), 修改wxml模板请修改build/template.wxml文件, 然后执行npm run build-template生成html-view/nodes.wxml文件 License |
---|