找回密码
 立即注册

QQ登录

只需一步,快速开始

[工具插件] 微信小程序渲染html

[复制链接]
查看: 856|回复: 0
最佳答案
0 

5

主题

7

帖子

95

积分

新人求带

积分
95
 楼主| 发表于 2017-2-7 14:18:18 | 显示全部楼层 |阅读模式
微信小程序渲染html工具wx-mina-html-view
demo (1).png

支持的特性:
  • 大部分的普通HTML标签(未全部测试)
  • <img>, <video>, <audio>
  • <table>, <tr>, <th>, <td>等表格标签
  • <a>标签转<navigator>
  • HTML entities
  • 七牛图片裁剪
  • 自定义插件

不支持<form>, <input>, <select>等表单元素.

使用方法

请参考pages/index目录里的文件.

拷贝html-view目录到你的项目.

在页面的js/wxml/wxss中, 引入代码:

index.js
  1. // 引入HtmlParser
  2. const HtmlParser = require('../../html-view/index')

  3. // ...

  4. // 解析HTML字符串
  5. const html = new HtmlParser('<p>hello world</p>').nodes
  6. this.setData({ html })
复制代码

index.wxml
  1. <import src="../../html-view/index.wxml" />

  2. <template is="html-view" data="{{data: html}}" />
复制代码

index.wxss
  1. @import "../../html-view/index.wxss";
复制代码

API

new HtmlParser(htmlString, { baseUrl })

新建一个HtmlParser实例.

实例化后通过nodes属性获取解析后的对象. 数据结构请参看himalaya.

baseUrl: 将<a>, <img>, <video>, <audio>, <source>引用的相对地址使用baseUrl转换为绝对地址.
  1. const html = new HtmlParser('<p>hello world</p>').nodes
复制代码

htmlParser.each(fn)

递归nodes和以下的的每个元素使用fn函数处理

fn将收到3个参数:
  1. 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, 这部分则省略.
  1. const qiniuImg = require('../../html-view/each/qiniuImg')
  2. 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)
  1. const resolveAnchor = require('../../html-view/each/resolveAnchor')

  2. const html = new HtmlParser(htmlString).each(resolveAnchor('www.example.com', [
  3.   // ['/pathname/of/url', '/pages/path/of/local/page/index']
  4.   ['/foo', '/pages/foo/index'],
  5.   ['/bar/:id', '/pages/bar/index']
  6. ])).nodes
复制代码

开发

由于小程序的template不支持递归调用(哈哈什么鬼~), 修改wxml模板请修改build/template.wxml文件, 然后执行npm run build-template生成html-view/nodes.wxml文件

wx-mina-html-view-master.zip (845.99 KB, 下载次数: 1)
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则


易域网-您身边的域名管家

henkuai.com是专业的第三方微信开发者平台,为生态而生。


本站为第三方微信开发者平台,非腾讯官方网站。

天津市滨海新区
中新生态城中成大道生态建设公寓9号楼3层301

欢迎来这里一起喝喝茶,
聊聊你的产品。

微信公众号gongzhongkaifa

工作日12小时内回复。

网站业务
zhongcong@henkuai.com

工作日12小时内回复。

市场合作
songchang@henkuai.com