小程序开发中跨页面传值；使用wxparse还原html

2023-01-10 22:01:43

** 开发如图的页面，已经在列表页循环出优惠券的列表，需求是点进去展示优惠券的详情，因为不想在详情页再发送请求查询优惠券，想从本页面直接传该优惠券的信息到详情页。
**

首先想到的是用JSON.stringfy()方法，将列表的数组元素，转化成json字符串，再到接收页面，用json.parse，将json字符串转化为json对象，就可以操作该数据了，发送页面将要传的参数，JSON.stringfy()序列化之后，用get方式在链接之后加上参数，如图：

	但是该方法有很大的弊端：就是如果传来的字符串中有html代码，html代码中有回车换行之类的特出字符，JSON.stringfy()转化时不认识的都转化为了undifined，但是json.parse()不认识这些undifined特殊字符（参考[ttps://developers.weixin.qq.com/community/develop/doc/a7d639b05a6e83582d0a1bce74f0e29](https://developers.weixin.qq.com/community/develop/doc/a7d639b05a6e83582d0a1bce74f0e29c)），网上有办法说可以用str.replace(/\n/g,"\\\\n")转义，但是相当麻烦。（参考https://www.cnblogs.com/xiaozhuyuan/p/7098235.html）我转义了没转成，就屏蔽了该方法……如果页面之间传很少的不复杂的数据，是可以用JSON对象这种序列化的方式的。![在这里插入图片描述](https://www.icode9.com/i/ll/?i=20210525164223159.png)
   方法二：我改用了wx.setStorageSync来传输：


  todetail(e){
    let _this = this;
    let kk = e.currentTarget.dataset.couponKay;
    let couponId = e.currentTarget.dataset.couponId;
    let typeId = e.currentTarget.dataset.typeId;
    var cdetail =  _this.data.list[kk];
    wx.setStorageSync('kay', cdetail)
  // console.log("ccc",cdetail);
    wx.navigateTo({
      url: '/pages/integralMall/detail/detail?kk='+kk,
    })

  },

将key和value存起来，在详情页通过key调用详情数据

  /**
   * 生命周期函数--监听页面加载
   */
  onl oad: function (options) {
    let _this = this;

    var kay = options.kk;
    console.log(kay);
    var detailData = wx.getStorageSync("kay");
    console.log("detailData",detailData);
    _this.setData({
      detailData
    });
          // 富文本转码
          if (detailData.content.length > 0) {
            //wxParse.wxParse('content', 'html', detailData.content, _this, 0);
            article_content:wxParse.wxParse('article_content', 'html', detailData.content, _this, 5)
          }

    _this.getUserDetail();
  

  },

这样，详情页就有数据了，但是content中存的是后台存进数据库的html代码，怎样在小程序端完整的解析这些HTML代码呢，这就要用到wxparse

wxparse的详细使用步骤网上有很多，大概说一下我的步骤：
1.安装wxparse

2.js文件中引入：

// 富文本插件
const wxParse = require("../../../wxParse/wxParse.js");
//在onload()方法中，加入以下设置代码，名字为 参数为article_content：
    
          if (detailData.content.length > 0) {
            article_content:wxParse.wxParse('article_content', 'html', detailData.content, _this, 5)
          }

3.wxml文件头部引入：

 <import src="../../../wxParse/wxParse.wxml"></import>
 
 //注意要根据相对路径，在使用的地方：
  <template is="wxParse" data="{{wxParseData:article_content.nodes}}"></template>
  //这个article_content就是在JS文件中定义的名字，其他都是固定的

4.还要记得wxss中引入路径：

@import "../../../wxParse/wxParse.wxss";

如图，成功解析

码农公寓

相关文章