小程序中默认是不支持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

二、wxParse解析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>的更多相关文章

  1. 小程序解析html标签wxPrase插件

    微信小程序的标签和原来我们习惯用的标签是不一样的,例如视图容器标签小程序是view,然而html就很多比如常用的div就和小程序的view类似. 通常我们在开发小程序(从列表页跳转到详情页)通过富文本 ...

  2. 微信小程序中input标签高度设置

    如果没有设置高度所以显示的是控件自身的高度. 微信小程序input控件原始设置: 上图发现: 我只覆盖了官方input的height,而没有覆盖min-height; .query input{ bo ...

  3. 微信小程序 —— 微信小程序解析html富文本插件wxParse

    下载并把wxParse放到小程序的目录中 github下载地址:https://github.com/icindy/wxParse 一.基本使用方法 1. Copy文件夹wxParse,把wxPars ...

  4. 【微信小程序】loading标签使用,可自定义时长

    前言:loading和wx.showToast的区别: wx.showToast加载的时间长度是需要手动设置的,默认1500ms,而loading标签则可以配合数据加载进行隐藏. 核心就是在数据量较大 ...

  5. 微信小程序:block标签

    代码中存在block标签,但是渲染的时候会移除掉. 例子: 如果将view改为block: 当你要渲染某些数据时,如果不想额外的加一层外边的标签,此时可以使用block标签来进行占位.

  6. Taro/微信小程序解析XML

    npm i xmldom PS: https://www.npmjs.com/package/xmldom https://blog.csdn.net/caojie1008/article/detai ...

  7. 微信小程序 解析html格式内容

    需要引入html-view文件 1/js 代码 const HtmlParser=require('../../utils/html-view/index') data: { coupon_text: ...

  8. 微信小程序之富文本解析

    亲身体验 wxparse 是个坑,弃之不用 微信小程序的 <rich-text>标签挺好用的 用法如下: 1.wxml页面 <rich-text nodes="{{node ...

  9. 关于微信小程序图片失真的解决方案

    今天来说一说 关于微信小程序的图片失真问题的解决,微信小程序的image标签要设置其宽高,不然图片若宽高过大会撑开原始图片大小的区域:如下 但是宽高设置固定了会导致有些图片和规定显示图片大小的比例不一 ...

随机推荐

  1. 题解【洛谷P1618】 三连击(升级版)

    设三个数分别为n1.n2.n3,因为三个数的比为A:B:C,取一份量i,使得A·i=x,B·i=y,C·i=z(·是*的意思). 所以我们的代码只需要枚举i,并以此判断n1.n2.n3是否为三位数且包 ...

  2. centos7修改xshell默认访问端口由22修改为62058

    1.vim /etc/ssh/sshd_config 2.新加端口62058:Port 62058 3.重启sshd服务:systemctl restart sshd 4.将新加端口添加到防火墙并重启 ...

  3. 查看杀死django进程

    #命令:#用于显示tcp,udp的端口和进程等相关情况netstat -tunlp"""ps:-t (tcp)仅显示tcp相关选项-u (udp)仅显示udp相关选项-n ...

  4. 跨表更新,Mysql Update Join

    背景 项目新导入了一批人员数据,这些人的有的部门名称发生了变化,有的联系方式发生了变化,暂且称该表为t_dept_members, 系统中有另外一张表 t_user_info 记录了人员信息. 要求将 ...

  5. 微信小程序图片设置圆角进入页面闪动

    transform变形 当我们通过某些行为触发页面进行大面积绘制的时候,浏览器由于没有事先准备,应付渲染够呛,于是掉帧,于是卡顿.而will-change则是真正的行为触发之前告诉浏览器:“我待会儿就 ...

  6. 虚拟机linux系统网络连接配置问题总结

    1.虚拟机与CentOS的安装与配置参考本人博客:https://www.cnblogs.com/ClikeL/p/11743520.html 2.测试网络连接 ping www.baidu.com ...

  7. 数位dp(Balanced Numbers )

    题意:一个数,如果满足奇数的数字出现偶数次,偶数的数字出现奇数次, 就是符合的数,注比如:12313  就满足,因为1 3出现了偶数次.2出现了奇数次 思路,对于这道题,就是状态压缩加dp: 对于一个 ...

  8. 用python制作多份试卷防止作弊(随机排列题目顺序和答案顺序,提供参考答案)

    #! /usr/bin/python# randomQuizeGenerator.py   -   Creates quizzes with questions and answers in # ra ...

  9. HBase 中读 HDFS 调优

    HDFS Read调优 在基于 HDFS 存储的 HBase 中,主要有两种调优方式: 绕过RPC的选项,称为short circuit reads 开启让HDFS推测性地从多个datanode读数据 ...

  10. Iris请求方式和数据返回类型

    1. Iris起服务 package main import "github.com/kataras/iris" func main() { //1.创建app结构体对象 app ...