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文件

License

MIT