最近小程序开发中出现一个问题，由于小程序不支持html代码，导致后端返回富文本风格的html标签代码，我在网上找了个办法有一个插件
但是这个插件已经停止维护，但它可以工作
克隆方法如下小程序开发插入图片代码，但是直接下载耗时太长
下载完成后，将我下面圈出的代码复制到小程序根目录下
这是复制后
然后配置
以下是wxml的配置
// 1.首先先引入模板
<import src="../../../wxParse/wxParse.wxml" />
// 2.使用模板
<view class="cont">
<template is='wxParse' data="{{wxParseData:article.nodes}}"/>
view>
以下是wxss中的配置
// 引入样式就行了
@import '../../../wxParse/wxParse.wxss';
下面是js中的配置
1.引入wxParse
var WxParse = require('../../../wxParse/wxParse.js');//注意路径问题
2 添加 在你请求获得数据完成之后 在success中添加这些代码
var article = '我是HTML代码
';
/**
* WxParse.wxParse(bindName , type, data, target,imagePadding)
* 1.bindName绑定的数据名(必填)
* 2.type可以为html或者md(必填)
* 3.data为传入的具体数据(必填)
* 4.target为Page对象,一般为this(必填)
* 5.imagePadding为当图片自适应是左右的单一padding(默认为0,可选)
*/
var that = this;
WxParse.wxParse('article', 'html', article, that, 5);
然后就可以了
下面是代码展示
// pages/indexs/CommodityDetails/CommodityDetails.js
const http = require('../../../common/http.js');
const storage = require('../../../common/storage.js');
const constant = require('../../../common/constant.js');
const notification = require('../../../common/notification.js');
const upload = require("../../../common/upload.js")
const util = require('../../../common/util.js');
var QQMapWX = require('../../../utils/qqmap-wx-jssdk.js');
var WxParse = require('../../../wxParse/wxParse.js');
Page({
/**
* 页面的初始数据
*/
data: {
imageHost: constant.imageHost,
showFx: false,
showGwyh: false,
showGz:false,
// 佣金
commission: '',
type:'',
// 规则
rule : [],
// 折扣
// 商品详情
commodityParticulars : []
},
onChangeShowyhj: function () {
var that = this;
that.setData({
showGwyh: (!that.data.showGwyh)
})
},
onChangeShowFx: function () {
var that = this;
that.setData({
showFx: (!that.data.showFx)
})
},
onChangeShowGz:function(){
var that = this;
console.log(1)
that.setData({
showGz: (!that.data.showGz)
})
},
radioChange: function (e) {
var that = this;
// console.log(this.data.type)
this.data.type.forEach(function(item){
console.log(item)
if (item.title === e.detail.value){
that.setData({
commission: item.comm_rate,
rule:item.title
})
}
})
// console.log(a)
// if ()
// console.log('radio发生change事件，携带value值为：', e.detail.value)
},
// 获取商品详情
getList (goodId){
// console.log(1)
http.requestRes({
url: '请求借口',
data: {
uid: storage.getUid(),
good_id: goodId,
ucode: storage.getUcode(),
},
success: function (res) {
console.log(res.data.data)
if(res.data.code === 200){
var result = res.data.data.com_details;
var article = result; //带有html的
var that = this;
WxParse.wxParse('article', 'html', article,that, 5);
var discounts = (res.data.data.promotion_price / res.data.data.sell_price)*10
console.log(discounts)
this.setData({
commodityParticulars: res.data.data,
type: res.data.data.type,
rule: res.data.data.type[0].title,
commission: res.data.data.type[0].comm_rate,
discount: discounts.toFixed(3)
})
}
}.bind(this)
})
},
有什么问题可以关注私信我
------------------------最后一个分割线的问题就是图片路径的问题，就是渲染服务端图片的时候路径不完整，所以我去找找有特别牛的方法直接修改他的源码
第21行直接添加你的服务器地址
