微信小程序解析HTML标签带有<p>
小程序中默认是不支持html格式没有<p>标签,但是有些接口需要返回带有标签的,例如 : 隐私协议;
解决方法:
小程序中有一个富文本标签组件,前端可以解析H5标签就是 rich-text、wxParse
一、<rich-text> :
<rich-text nodes="{{content}}"></rich-text>
微信小程序文档:https://developers.weixin.qq.com/miniprogram/dev/component/rich-text.html
转:https://www.cnblogs.com/llkbk/p/7910454.html
首先我们在github上下载wxParse

下载完之后我们需要用到目录下的wxParse文件夹,把他拷贝到我们的项目目录pages下
下面是具体的使用步骤
1.在app.wxss全局样式文件中,需要引入wxParse的样式表
@import "../wxParse/wxParse.wxss";
2.在需要加载html内容的页面对应的js文件里引入wxParse
var WxParse = require('../wxParse/wxParse.js');
3.通过调用WxParse.wxParse方法来设置html内容
/**
* WxParse.wxParse(bindName , type, data, target,imagePadding)
* 1.bindName绑定的数据名(必填)
* 2.type可以为html或者md(必填)
* 3.data为传入的具体数据(必填)
* 4.target为Page对象,一般为this(必填)
* 5.imagePadding为当图片自适应是左右的单一padding(默认为0,可选)
*/
使用的js文件
Page({
data: {
},
onLoad: function () {
var self = this;
wx.request({
url: '',
method: 'POST',
data: {
'id':13
},
header: {
'content-type': 'application/json'
},
success: function(res) {
var article = res.data.content;
WxParse.wxParse('article', 'html', article, self,5);
}
})
}
})
4.在页面中引用模板
<import src="../wxParse/wxParse.wxml"/>
<template is="wxParse" data="{{wxParseData:article.nodes}}"/>
这样就可以在微信小程序中嵌入html内容了

5、wx:key报错does not look like a valid key name?

wx:key = "key" 这样就可以了 不要加双大括号。

微信小程序解析HTML标签带有<p>的更多相关文章
- 小程序解析html标签wxPrase插件
微信小程序的标签和原来我们习惯用的标签是不一样的,例如视图容器标签小程序是view,然而html就很多比如常用的div就和小程序的view类似. 通常我们在开发小程序(从列表页跳转到详情页)通过富文本 ...
- 微信小程序中input标签高度设置
如果没有设置高度所以显示的是控件自身的高度. 微信小程序input控件原始设置: 上图发现: 我只覆盖了官方input的height,而没有覆盖min-height; .query input{ bo ...
- 微信小程序 —— 微信小程序解析html富文本插件wxParse
下载并把wxParse放到小程序的目录中 github下载地址:https://github.com/icindy/wxParse 一.基本使用方法 1. Copy文件夹wxParse,把wxPars ...
- 【微信小程序】loading标签使用,可自定义时长
前言:loading和wx.showToast的区别: wx.showToast加载的时间长度是需要手动设置的,默认1500ms,而loading标签则可以配合数据加载进行隐藏. 核心就是在数据量较大 ...
- 微信小程序:block标签
代码中存在block标签,但是渲染的时候会移除掉. 例子: 如果将view改为block: 当你要渲染某些数据时,如果不想额外的加一层外边的标签,此时可以使用block标签来进行占位.
- Taro/微信小程序解析XML
npm i xmldom PS: https://www.npmjs.com/package/xmldom https://blog.csdn.net/caojie1008/article/detai ...
- 微信小程序 解析html格式内容
需要引入html-view文件 1/js 代码 const HtmlParser=require('../../utils/html-view/index') data: { coupon_text: ...
- 微信小程序之富文本解析
亲身体验 wxparse 是个坑,弃之不用 微信小程序的 <rich-text>标签挺好用的 用法如下: 1.wxml页面 <rich-text nodes="{{node ...
- 关于微信小程序图片失真的解决方案
今天来说一说 关于微信小程序的图片失真问题的解决,微信小程序的image标签要设置其宽高,不然图片若宽高过大会撑开原始图片大小的区域:如下 但是宽高设置固定了会导致有些图片和规定显示图片大小的比例不一 ...
随机推荐
- [SDOI2016] 生成魔咒 - 后缀数组,平衡树,STL,时间倒流
[SDOI2016] 生成魔咒 Description 初态串为空,每次在末尾追加一个字符,动态维护本质不同的子串数. Solution 考虑时间倒流,并将串反转,则变为每次从开头删掉一个字符,即每次 ...
- C++-有感
今日在图书馆待了差不多一天,我都忘了我吃饭了没,拿着看视频学习,没啦,主要还是看书,突然感觉有点写不动了. 明天开始不带电脑了,准备把数据结构书重新过一遍,算了,还是不用C++写了,感觉C++居然做题 ...
- codeforces 1288D. Minimax Problem(二分)
链接:https://codeforces.com/contest/1288/problem/D D. Minimax Problem 题意:给定n个数组,长度为m,从n中数组挑选两个数组,两个数组中 ...
- Codeforces Round #609 (Div. 2) A-E简要题解
contest链接:https://codeforces.com/contest/1269 A. Equation 题意:输入一个整数,找到一个a,一个b,使得a-b=n,切a,b都是合数 思路:合数 ...
- 经常使用的cmd命令
ASSOC 显示或修改文件扩展名关联.ATTRIB 显示或更改文件属性.BREAK 设置或清除扩展式 CTRL+C 检查.BCDEDIT 设置启动数据库中的属性以控制启动加载.CACLS 显示或修改文 ...
- STL 萃取(Traits)机制剖析
模板特化 在将萃取机制之前,先要说明模板特化 当有两个模板类,一个是通用泛型模板,一个是特殊类型模板,如果创建一个特殊类型的对象,会优先调用特殊的类型模板类,例如: template <type ...
- django初步了解(一)
安装django pip3 install django==版本号 创建一个djangp项目 django-admin startproject 项目名 目录介绍: 运行django项目: pytho ...
- util之Set
1.定义: Set<Integer>set = new TreeSet<Integer>(); 注意: TreeSet 是二差树实现的,Treeset中的数据是自动排好序的,不 ...
- UNICODE下CString转string
真搞不懂,为毛C++这么多类型转换.. CString m_str(_T("fuck conversion")); char *chr=new char[m_str.GetLeng ...
- java8 四大核心函数式接口Function、Consumer、Supplier、Predicate(转载)
Function<T, R> T:入参类型,R:出参类型 调用方法:R apply(T t); 定义函数示例:Function<Integer, Integer> func = ...