支付宝小程序html 转换,GitHub - kaola-fed/octoparse: octoparse是一款html解析转换工具。可以将html解析成对象并转换成其他文本。支持html转微信小程序...

octoparse

octoparse是一款html解析转换工具。可以将html解析成对象并转换成其他文本。支持html转微信小程序、支付宝小程序与百度小程序。

快速开始

下载

npm install octoparse

直接使用

import octoparse from 'octoparse'

let htmlStr =

`

test

`;

let res = octoparse.htmlParse(htmlStr)

在vue中以插件方式使用

import Vue from 'vue'

import octoparse from 'octoparse'

Vue.use(octoparse)

let htmlStr =

`

test

`;

let res = Vue.$htmlParse(htmlStr)

在小程序中使用

1、在小程序模板中引入octoparse模板

此处的data的key需要为nodes以便和octoparse小程序模板的入口模板保持一致

此处的例子为微信小程序，支付宝小程序的使用方式基本相同，注意引用的模板为platform/alipay/index.axml

2、 在page中挂载数据

import octoparse from 'octoparse'

Page({

...

onLoad: function(){

let htmlStr =

`

test

`;

let res = octoparse.htmlParse(htmlStr)

this.setData({

htmlData: res

})

}

...

})

在Megola中使用

1、在webpack中配置挂载小程序模板

module.exports = {

...

target: createMegaloTarget( {

compiler: Object.assign( compiler, {}),

platform: 'wechat',

htmlParse: {

templateName: 'octoParse',

src: resolve('node_modules/octoparse/lib/platform/wechat')

}

}),

...

}

2、在vue上挂载octoparse

import Vue from 'vue'

import octoparse from 'octoparse'

Vue.use(octoparse)

3、在页面中使用

data(){

return {

vhtml:`

test

`

}

}

基本使用

将html转换为树结构

let htmlStr =

`

test

`;

let res = octoparse.htmlParse(htmlStr)

节点预处理

使用visitors方法对解析的html节点进行处理。

例如：为所有的img图片加上display:block样式去除连续图片中间的缝隙

let options = {

visitors: {

img(node){

node.styleStr = 'display:block';

}

}

}

let htmlStr =

`

`;

let res = octoparse.htmlParse(htmlStr, options)

节点属性释义

属性名

含义

注释

node

节点类型

tag

节点标签名

index

节点在节点树中的序列号

attr

属性键值对

classStr

class字符串

在模板中使用该属性使class生效

styleStr

style字符串

在模板中使用该属性使style生效

nodes

子节点数组

使用插件

支持插件，例如：

import removeBackground from '../../lib/plugins/removeBackground';

let options = {

plugins: [removeBackground],

}

let htmlStr =

`

test

`;

let res = octoparse.htmlParse(htmlStr, options)

本地开发

cd octoparse

npm i

npm install gulp -g (安装一下gulp)

npm run build

gulp (因为小程序不允许引用根目录以外的文件，所以这里跑一下gulp任务将模板拷贝到小程序demo的目录下面)

灵感来源

名字来源于游戏 octopath tarveler。项目启发自 wxParse。