微信小程序中显示html富文本的方法

时间:2022-12-17 15:18:43

微信小程序中显示html富文本的方法

使用方法:
git地址:https://github.com/icindy/wxParse

一、下载wxParse文件

微信小程序中显示html富文本的方法

二、在要引入的页面的js文件中,引入文件

js文件中

var WxParse = require('../../../weui/wxParse/wxParse.js');

css文件中

@import "../../../weui/wxParse/wxParse.wxss";

页面中

<import src="../../../weui/wxParse/wxParse.wxml" />
三、数据绑定

在page.js文件中绑定数据
如:

onLoad: function (options) {
var that = this;
var detail_content ="<div>我是HTML代码</div>";
WxParse.wxParse('detail_content', 'html', detail_content, that, );
} //注意第一个参数需要与wxml中的一致

四、在page的wxml中引入模板

<view class="newsDt_wrap">
<template is="wxParse" data="{{wxParseData:detail_content.nodes}}" />
<view class="last_date">最后更新于:{{initDate.publish_time}}</view>
</view>

微信小程序中显示html富文本的方法的更多相关文章

  1. 微信小程序中获取高度及设备的方法

    由于js中可以采用操纵dom的方法来获取页面元素的高度,可是在微信小程序中不能操纵dom,经过查找之后发现仅仅只有以下几个方法可以获取到高度 wx.getSystemInfoSync().window ...

  2. 开发微信小程序 中遇到的坑 及解决方法

    1.wx.request 只能访问 https 解决: 新建项目  不填appid  即可访问 localhost 2.页面中多重三元表达式  解析有问题 解决: <!--{{index}} { ...

  3. 微信小程序中显示与隐藏&lpar;hidden&rpar;

    1.wx.wxml页面部分 <view bindtap='click'>点击</view> //这是显示隐藏的部分 <view hidden="{{hidden ...

  4. 去除富文本中的html标签及vue、react、微信小程序中的过滤器

    在获取富文本后,又只要显示部分内容,需要去除富文本标签,然后再截取其中一部分内容:然后就是过滤器,在微信小程序中使用还是挺多次的,在vue及react中也遇到过 1.富文本去除html标签 去除htm ...

  5. 在微信小程序中使用富文本转化插件wxParse

    在微信小程序中我们往往需要展示一些丰富的页面内容,包括图片.文本等,基本上要求能够解析常规的HTML最好,由于微信的视图标签和HTML标签不一样,但是也有相对应的关系,因此有人把HTML转换做成了一个 ...

  6. 微信小程序中转义字符的处理

    在微信小程序开发过程中,有时候会用到常用的一些特殊字符如:‘<’.‘>’.‘&’.‘空格’等,微信小程序同样支持对转义字符的处理,下面提供两种方法用来处理微信小程序中转义字符的处理 ...

  7. 全栈开发工程师微信小程序-中&lpar;下&rpar;

    全栈开发工程师微信小程序-中(下) 微信小程序视图层 wxml用于描述页面的结构,wxss用于描述页面的样式,组件用于视图的基本组成单元. // 绑定数据 index.wxml <view&gt ...

  8. 微信小程序中的组件使用1

    不管是vue还是react中,都在强调组件思想,同样,在微信小程序中也是使用组件思想来实现页面复用的,下面就简单介绍一下微信小程序中的组件思想. 组件定义与使用 要使用组件,首先需要有组件页面和使用组 ...

  9. 全栈开发工程师微信小程序-中&lpar;中&rpar;

    全栈开发工程师微信小程序-中(中) 开放能力 open-data 用于展示微信开放的数据 type 开放数据类型 open-gid 当 type="groupName" 时生效, ...

随机推荐

  1. js&colon;数据结构笔记7--哈希表

    哈希表(散列表):通过哈希函数将键值映射为一个字典; 哈希函数:依赖键值的数据类型来构建一个哈希函数: 一个基本的哈希表:(按字符串计算键值) function HashTable() { this. ...

  2. python&lowbar;字符串

    1. 字符串的格式化 格式: 说明: (1)转换说明符 (2)格式化操作符右操作数可以是任何东西,如果是元组的话,每一个元素都会被单独格式化. 2. 字符串常用的方法 (1)find int = fi ...

  3. java类的加载、链接、初始化

    JVM和类的关系 当我们调用JAVA命令运行某个java程序时,该命令将会启动一条java虚拟机进程,不管该java程序有多么复杂,该程序启动了多少个线程,它们都处于该java虚拟机进程里.正如前面介 ...

  4. Dev GridView 获取选中分组下的所有数据行 z

    现在要在DevExpress 的GridView 中实现这样一个功能.就是判断当前的选中行是否是分组行,如果是的话就要获取该分组下的所有数据信息. 如下图(当选中红框中的分组行事.程序要获取该分组下的 ...

  5. LAMP开发之环境搭建(2014&period;12&period;7在ubuntu下)

    Ubuntu下搭建LAMP环境 前言:学习PHP脚本编程语言之前,必须先搭建并熟悉开发环境,开发环境有很多种,例如LAMP.WAMP.MAMP等.这里我搭建的是LAMP环境,即Linux.Apache ...

  6. 不相交集合ADT

    不相交集合数据结构保持一组不相交的动态集合S={S1,S2,...,SK},每个集合通过一个代表来识别,代表即集合中的某个成员. 如果x表示一个对象,不相交集合支持以下操作: MAKE-SET(x): ...

  7. 理解javascript函数的重载

        javascript其实是不支持重载的,这篇文章会和java语言函数的重载对比来加深对javascript函数重载的理解.       以下我会假设读者不了解什么是重载所以会有一些很基础的概念 ...

  8. 探讨 java中 接口和对象的关系

    接口是对象么?接口可以有对象么?这个问题要跟类比对着,或许更好理解;类是对象的模版.接口不是类,所以:接口肯定不是对象的模版.那接口跟对象有什么样的关系?还是得从类入手;因为类实现了接口,所以可以说, ...

  9. 【带着canvas去流浪(7)】绘制水球图

    目录 一. 任务说明 二. 重点提示 三. 示例代码 四. 文字淹水效果的实现 五. 关于canvas抗锯齿 六. 小结 示例代码托管在:http://www.github.com/dashnowor ...

  10. 发布python包

    写python程序时常常要导入各种包,使用其中的模块或功能.我们如果有可以复用的功能或模块也可以发布成包,并安装在自己或他人电脑上,以供自己或别人使用.python发布包的步骤如下: 一.首先为模块创 ...