html js 行数据回显_微信小程序 html代码转小程序代码

最近在开发小程序 出现了一个问题 就是后端返回富文本样式html标签代码 因为小程序不支持html代码，在网上找到了个办法 有一个插件

wxParse​github.com

但是这个插件已经停止维护了 但是很管用的

下面是方法 你可以用克隆下来 但是时间太长了 推荐直接下载

下载完成之后 把下面我圈住的代码复制到小程序的根目录下

复制之后是这样的

然后在进行配置

下面是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 = '<div>我是HTML代码</div>';
/**
* 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行 直接添加你的服务器地址就行