微信小程序 - 小程序解析html标签

问题描述

问 题

想要实现将后端的含表情的文字转为图片，但是前端始终解析不出来，单独测试图片路径是可以访问的，但是通过json转化之后页面上就完全解析不出来。json的html转义也试过了，还是不行。请大神指点迷津，感谢！！
图片看不清楚 这是代码片段
var url = require("../common/js/config.js").URL,

imgimgConfig = require("../common/js/emoj_config.js").EMOJ,

request = require("../common/js/request.js");

var list = [{

  microblog_id: "274", //主微博ID
  sendUserInfo:{
    content: "zhe shi wo fa d wei bo , wo zi ji lai ce shi xiao xi de hui fu he ping lun ~![闭嘴][憨笑]"
  }

}];

for(var i = 0;i<list.length;i++){

var dt = list[i];
var str = dt.sendUserInfo.content;
var str2 = str.replace(/\[([^\]]+)\]/g, function(item, index){
  return "<image src='../../image/emoj/"+imgimgConfig[index]+"'></image>"

});
dt.sendUserInfo.content = str2;
}
Page({
data: {

user_info: {
  user_img: '../images/user_def_img.jpg',
  msg_imgs:['../images/user_def_img.jpg']
},
zhan_img:'../images/zhan_img_1.png',
pinglun_img:'../images/pinglun_img_1.png',
list:list

}
});
//wxml
<block wx:for="{{list}}">
<view class="msg">

<view class="ty flex-1">
    <view class="user_img_view">
      <image class="user_img" src="{{user_info.user_img}}"></image>
    </view>
  <view class="user_name">
    张三
    <text class="user_sex_level_male">21</text>
    <text class="time">刚刚</text>
  </view>
  <view class="user_apartment">
    天通北苑店
  </view>
</view>
<view class="ty user_msg mt0">
  {{item.sendUserInfo.content}}这句代码
</view>
<view class="ty flex-2">
  <image class="user_msg_img ml0" src="{{user_info.msg_imgs[0]}}"></image>
  <image class="user_msg_img" src="{{user_info.msg_imgs[0]}}"></image>
  <image class="user_msg_img" src="{{user_info.msg_imgs[0]}}"></image>
  <image class="user_msg_img ml0" src="{{user_info.msg_imgs[0]}}"></image>
  <image class="user_msg_img" src="{{user_info.msg_imgs[0]}}"></image>
  <image class="user_msg_img" src="{{user_info.msg_imgs[0]}}"></image>
</view>
<view class="ty mb20r cz">
  <image class="cz_img ml0" src="{{zhan_img}}"></image>
  <text class="zcolor">666</text>
  <image class="cz_img ml0" src="{{pinglun_img}}"></image>
  <text class="plcolor">888</text>
</view>

</view>
</block>

这个问题已被关闭，原因：问题已解决 - 问题已解决，且对他人无借鉴意义

解决方案

定位问题

微信小程序是无法动态插入组件的
你在处理的时候不能够组装带有image标签的字符串来插入，你应该放在block语句中进行加载

关于小emoji表情解析

我写过一个较为简单的组件，但是目前使用上可能不能够直接使用，但是应该可以让你参考下处理小emoji的过程

WxEmojiView-微信小程序Emoji展示输入组件alpha 0.1

关于解析html等富文本

你可以参考一下wxParse version0.2-更好的微信小程序富文本HTML及Markdown解析

希望能够帮助你

这篇关于微信小程序 - 小程序解析html标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！