wx-mina-html-view: 微信小程序渲染html
Github: https://github.com/fenivana/w...
wx-mina-html-view
微信小程序渲染html
支持的特性:
大部分的普通HTML标签(未全部测试)
<img>
,<video>
,<audio>
<table>
,<tr>
,<th>
,<td>
等表格标签<a>
标签转<navigator>
HTML entities
七牛图片裁剪
自定义插件
不支持<form>
, <input>
, <select>
等表单元素.
使用方法
请参考pages/index
目录里的文件.
拷贝html-view
目录到你的项目.
在页面的js/wxml/wxss中, 引入代码:
index.js
// 引入HtmlParser const HtmlParser = require('../../html-view/index') // ... // 解析HTML字符串 const html = new HtmlParser('<p>hello world</p>').nodes this.setData({ html })
index.wxml
<import src="../../html-view/index.wxml" /> <template is="html-view" data="{{data: html}}" />
index.wxss
@import "../../html-view/index.wxss";
API
new HtmlParser(htmlString, { baseUrl })
新建一个HtmlParser实例.
实例化后通过nodes
属性获取解析后的对象. 数据结构请参看himalaya.
baseUrl: 将<a>
, <img>
, <video>
, <audio>
, <source>
引用的相对地址使用baseUrl
转换为绝对地址.
const html = new HtmlParser('<p>hello world</p>').nodes
htmlParser.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)
<img>
地址的域名如果包含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
<a>
标签转<navigator>
resolveAnchor(domain, routes)
domain: <a>
指向的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
文件