微信小程序将字符串转成html渲染到页面(wxParse的使用)

落日映苍穹つ 2023-06-12 11:23 20阅读 0赞

#### 第一步： ####

去wxParse的github源码地址将项目拉下来=>[地址在此。][Link 1]

#### 第二步： ####

将拉下来的这个项目中的wxParse文件夹拉入你的微信小程序项目。拉入到你认为合适的位置，根目录就行。

#### 第三步： ####

在你需要使用wxParse的那个页面的.js文件中引入它。

var WxParse = require('../../wxParse/wxParse.js');//路径为你放的路径，这里是参考。

在当前那个wxss文件中引入wxParse的.wxss。

//在使用的Wxss中引入WxParse.css,可以在app.wxss
    @import "../../wxParse/wxParse.wxss";

#### 第四步： ####

在你需要使用的地方(引入wxParse.js的那个js文件)进行使用：

let reHtml = '<div>我是HTML代码</div>';  //你请求来的html字符串
    /**
    * WxParse.wxParse(bindName , type, data, target,imagePadding)  //使用传参
    * 1.bindName绑定的数据名(必填)
    * 2.type可以为html或者md(必填)
    * 3.data为传入的具体数据(必填)
    * 4.target为Page对象,一般为this(必填)
    * 5.imagePadding为当图片自适应是左右的单一padding(默认为0,可选)
    */
    var that = this;  //这里的this是指的是当前page实例
    WxParse.wxParse('article', 'html', reHtml, that, 5);

#### 第五步： ####

将字符串渲染到页面上：

// 写在你的wxml中你想要渲染的位置
    <import src="你的路径/wxParse/wxParse.wxml"/>
    //这里data中article为bindName，上面是article，这里也写
    <template is="wxParse" data="{
       {wxParseData:article.nodes}}"/>

[Link 1]: https://github.com/icindy/wxParse

发表评论取消回复

表情：

评论列表（有 0 条评论，20人围观）

还没有评论，来说两句吧...

相关阅读

相关微信小程序button动态跳转到页面

微信小程序button动态跳转到页面3、其它跳转方法简单介绍

桃扇骨/ 2024年04月29日 11:19/ 0 赞/ 79 阅读

相关 wx.request发送请求到网站服务器并将数据渲染到微信小程序页面

wx.request发送请求到网站服务器并将数据渲染到微信小程序页面 /wx.发起请求/ wx.request({

灰太狼/ 2024年03月31日 08:46/ 0 赞/ 38 阅读

相关微信小程序之普通页面跳转到tabBar页面

前言最近在做一个投稿小程序，主要功能是作者可以在微信小程序登录，注册，然后登陆进入主页面，可以投递稿件以及浏览自己已投递的稿件，和个人中心等主要功能，做的比较简单，因

「爱情、让人受尽委屈。」/ 2023年10月09日 22:34/ 0 赞/ 67 阅读

相关微信小程序开发系列三小程序页面渲染

一、事件处理 // index.wxml <view bindtap="myclick">点击我</view> // index.js Page(\{

落日映苍穹つ/ 2023年06月29日 12:59/ 0 赞/ 37 阅读

相关微信小程序将字符串转成html渲染到页面(wxParse的使用)

第一步：去wxParse的github源码地址将项目拉下来=>[地址在此。][Link 1] 第二步：将拉下来的这个项目中的wxParse文件夹拉入你的微信小

落日映苍穹つ/ 2023年06月12日 11:23/ 0 赞/ 21 阅读

相关微信小程序之富文本解析（wxParse）

github地址： [https://github.com/icindy/wxParse][https_github.com_icindy_wxParse] 下载wxPare

分手后的思念是犯贱/ 2023年06月12日 09:51/ 0 赞/ 26 阅读

相关微信小程序页面跳转方法

方法一：WXML页面实现 1. `<navigator url = "/pages/xxx/xxx">跳转到新页面</navigator>` 2. `<navigat

我就是我/ 2022年12月16日 11:57/ 0 赞/ 302 阅读

相关小程序html转wxml，微信小程序用wxParse解析html

小程序解析html网页标签，有3种方法： 1）使用 wxPasr 解析html 2）单独解析 html标签 3）使用最新的小程序组件 web-v

你的名字/ 2022年05月18日 06:55/ 0 赞/ 778 阅读

相关微信小程序使用wxParse解析html代码

使用方法：[https://github.com/icindy/wxParse][https_github.com_icindy_wxParse]官网写的很清楚存在的问题：

╰+哭是因爲堅強的太久メ/ 2022年04月10日 02:51/ 0 赞/ 302 阅读

相关微信小程序使用wxParse解析html

后台的富文本编辑器返回给前台的数据内容是带有html标签的，但是不能直接放在页面中，需要进行处理。 github上下载wxParse [https://github

悠悠/ 2022年01月21日 23:29/ 0 赞/ 297 阅读