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

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

一、下载wxParse文件

二、在要引入的页面的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. 微信小程序中显示与隐藏(hidden)

    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. 微信小程序中转义字符的处理

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

  8. 全栈开发工程师微信小程序-中(下)

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

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

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

随机推荐

  1. Jmeter 上传下载文件

    最近很多同学都在问jmeter上传.下载文件的脚本怎么做,要压测上传.下载文件的功能,脚本怎么做,网上查了都说的很含糊,这次呢,咱们就好好的把jmeter的上传下载文件好好缕缕,都整明白了,怎么个过程 ...

  2. 001-notepad++下载安装、添加右键

    一.下载 1.1.下载地址:https://notepad-plus-plus.org/ 一般下载 /1.2 1.2.解压至指定路径下即可 1.3.注册表添加鼠标右键 添加鼠标右键, 保存成reg执行 ...

  3. PTA 1155 Heap Paths (DFS)

    题目链接:1155 Heap Paths (30 分) In computer science, a heap is a specialized tree-based data structure t ...

  4. Git007--删除文件

    Git--删除文件 本文来自于:https://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000/ ...

  5. jmeter对响应数据做断言

    单独校验某个接口中的某个字段时,断言就相当于检查点 添加http请求,输入路径url

  6. 爬虫(十一)—— XPath总结

    目录 XPath总结 一.何为XPath 二.XPath语法 1.语法 2.实例 三.XPath轴 1.XPath轴语法 2.XPath轴实例 四.XPath运算符 XPath总结 一.何为XPath ...

  7. spring-第十七篇之spring AOP基于注解的零配置方式

    1.基于注解的零配置方式 Aspect允许使用注解定义切面.切入点和增强处理,spring框架可以识别并根据这些注解来生成AOP代理.spring只是用了和AspectJ 5一样的注解,但并没有使用A ...

  8. spring-第十二篇之两种后处理器

    1.扩展IoC容器使用后处理器扩展 bean后处理器:对容器中的bean进行后处理,也就是额外的加强. 容器后处理:对IoC容器进行后处理,增强容器功能. 2.bean后处理器      负责处理容器 ...

  9. 4、、多变量线性回归(Linear Regression with Multiple Variables)

    4.1 多维特征 目前为止,我们探讨了单变量/特征的回归模型,现在我们对房价模型增加更多的特征,例如房间数楼层等,构成一个含有多个变量的模型,模型中的特征为(x1,x2,...xn) 增添更多特征后, ...

  10. mint/ubuntu Android Eclipse ADT 简单安装及执行崩溃解决的方法

    1. 下载 Android SDK(ADT Bundle)     http://developer.android.com/sdk/index.html     (站点訪问不了或者慢.请參考:轻松改 ...