微信小程序解析HTML標簽帶有

小程序中默認是不支持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"  這樣就可以了   不要加雙大括號。