微信小程序中关于HTML的解析

sk  21天前
0

最近在研究微信小程序接入数据时,遇到了一个小问题,就是获取到的数据里有html标签,然后怎么把它转化为微信小程序结构wxml的。在vue中遇到类似的问题,可以直接使用它的内置属性:v-html。但是在微信小程序中就需使用插件:WxParse  Towxml

接下来,说一下这两个插件的用法。

WxParse

  • 首先要下载WxParse插件,地址奉上:WxParse插件 ,然后放在根目录下。

  • 在需要使用该插件的view(.js文件)中引入wxParse模块

    wxParse
    1
    2
    3
    4
    - 在需要使用wxss中引入wxParse.wxss
    ``` @import"/wxParse/wxParse.wxss";
  • 然后进行数据绑定

以下是官方文档介绍

var article = '<div>我是一段html</div>';

/**
    * wxParse.wxParse(bindName,type,data,target,imagePadding)
    * 1.bindName为绑定的数据名(必填)
    * 2.type可以为html或者markdown(必填)
    * 3.data为传入的具体数据(必填)
    * 4.target为Page对象,一般为this(必填)
    * 5.imagePadding为当图片自适应时左右的单一padding(默认为0,可选)
    *
    **/

var that = this;
wxParse.wxParse('article','html',article,that,5)

自己在项目中可以根据上面来套。

  • 在内容页(.wxml文件)中引入模板文件

然后在下面需要用到解析数据的地方引入

<template is="wxParse" data="{{wxParseData:article.nodes}}" />

最后试一下可以正常渲染获取到的html数据了。


Towxml

同wxParse一样,首先下载Towxml插件放在根目录下。

在小程序的app.js中引入插件

const Towxml = require('/towxml/main');
App({
    towxml: new Towxml();
})

在小程序页面引入模板

<import src="/towxml/entry.wxml" />
<template is="entry" data="{{...article}}" />

在小程序对应的js中请求数据

const app = getApp();
Page({
    data: {
        //article将用来存储towxml数据
        article:{}
    },

    onLoad: function () {
        const _ts = this;

        //请求markdown文件,并转换为内容
        wx.request({
            url: 'http://xxx/doc.md',
            header: {
                'content-type': 'application/x-www-form-urlencoded'
            },
            success: (res) => {
                //将markdown内容转换为towxml数据
                let data = app.towxml.toJson(res.data,'markdown');

                //设置文档显示主题,默认'light'
                data.theme = 'dark';

                //设置数据
                _ts.setData({
                    article: data
                });
            }
        });
    }
})

引入对应的wxss

/**基础风格样式**/
@import '/towxml/style/main.wxss';


/**如果页面有动态主题切换,则需要将使用到的样式全部引入**/

/**主题配色(浅色样式)**/
@import '/towxml/style/theme/light.wxss';

/**主题配色(深色样式)**/
@import '/towxml/style/theme/dark.wxss';

然后试一下获取到的html标签数据,可以完美的渲染为wxml结构。

---------------------------------------------------------------------------------------------------


扫码小程序(Vae音乐站)


回复 0  
游客  现在


二维码