小程序对wxParse 使用

最新推荐文章于 2025-05-11 16:42:18 发布

Accpdaiyekun

最新推荐文章于 2025-05-11 16:42:18 发布

阅读量362

点赞数

CC 4.0 BY-SA版权

分类专栏： asp.net core 企业微信应用文章标签：小程序微信小程序前端

本文链接：https://blog.csdn.net/Accpdaiyekun/article/details/123135847

asp.net core 同时被 2 个专栏收录

4 篇文章

订阅专栏

企业微信应用

4 篇文章

订阅专栏

该博客介绍了如何在前端页面中使用CKEditor展示从后台获取的多行文本数据。在页面加载时，通过调用wxRequest获取包含两个多行文本字段（Option和OptionSm）的列表数据。利用wxParse库对每个列表项的文本进行解析并渲染。同时，将解析后的数据更新到列表项中，以实现列表的正确显示。文章详细阐述了页面生命周期函数的使用以及数据处理的逻辑，对于处理含有富文本的列表数据具有参考价值。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我的后台是使用ck编辑器进行编辑的数据。前台需要现实，并且是列表现实，主要面对的问题是一个项里有两个字段是多行文本的，并且是一个列表。所以和网上的还是不一样

var WxParse = require('../../../wxParse/wxParse');
const app = getApp();
Page({

  /**
   * 页面的初始数据
   */
  data: {
    jgpgList:[],//机构评估项
    jgpgCount:0

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

    var that=this;
    var cateid=options.cateId;
    var jgid=options.JgId;
    that.getpgitems(cateid,jgid);

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  },
  getpgitems:function(cateId,jgId){//查询机构类别
    var that = this;
    wx.showLoading({
      title: '加载中......',
      mask: true
    })
    //进入大列表页查询信息
    wx.request({
      url: app.globalData.apiUrl+'WxXcx/YangLaoYan/GetJgPgItems',
        data:{JgId:jgId,cateId:cateId,LoginKey: wx.getStorageSync('loginKey')},
        method: 'GET',
        header: {
            'content-type': 'application/json'
        },
        success: function (res) {
            that.setData({
               jgpgList: res.data.data.data,
               jgpgCount:res.data.data.count
            })
            var  listRes=res.data.data.data; //要解析的数据
          for (let i = 0; i < listRes.length; i++) {
            WxParse.wxParse('option' + i, 'html', listRes[i].Option, that);
            WxParse.wxParse('optionsm' + i, 'html', listRes[i].OptionSm, that);
            if (i === listRes.length - 1) {
              WxParse.wxParseTemArray("listoption", 'option', listRes.length, that)
              WxParse.wxParseTemArray("listoptionsm", 'optionsm', listRes.length, that)
            }
          }
          let list = that.data.listoption;
          list.map((item, index, arr) => {   
            listRes[index].option=item;
          });
          let listsm = that.data.listoptionsm;
          listsm.map((item, index, arr) => {   
            listRes[index].optionsm=item;
          });
          that.setData({
            jgpgList: listRes,
            
         })
            wx.hideLoading();
        }
    })
  },
  pinggu:function(e){//评估

  }
})

wxml:

<!--养老院机构评估项信息查看页-->
<import src="/wxParse/wxParse.wxml"/>
<cu-custom bgColor="bg-gradual-blue" isBack="{{true}}" >
  <view slot="backText">返回</view>
  <view slot="content">评估项</view>
</cu-custom>
<view class="content" wx:if="{{jgpgCount>0}}"> 
<view class="row margin-top" wx:for="{{jgpgList}}">
<view class="pinggu-title">{{item.Bcode}}</view>
<view class="pinggu-title">评定项：</view>
<view class="pdx-content">
  <template is="wxParse" data="{{wxParseData:item.option}}"/>
</view>
<view class="pinggu-title">操作说明：</view>
<view class="czsm-content">
  <template is="wxParse" data="{{wxParseData:item.optionsm}}"/>
</view>
<view class="pinggu-title">分值：</view>
<view class="czsm-content">{{item.Bscore}} 分</view>
<view ><text class="pinggu-title">状态:</text><text>{{item.ScoreStateDic}}</text></view>
<view class="pinggaction">
<view catchtap="pinggu"  class="cu-capsule radius " >
  <text class="cuIcon-edit text-orange scopbtn"> </text><text class="text-orange pgtitle">评估</text>
</view>
  
 </view>
</view>


</view>
<view class="{{jgpgCount>0?'hidenodata':'nodata'}}" wx:else>
      没有数据...........
</view>