小程序Emoj解析

Question

hi 现在在采用Emoj这套组件开发 改装后台返回的表情数据 遇到个问题就是 循环出来的数据始终是一样的 不知道还需要从哪儿修改.请大神指点

var WxEmoji = require('../../WxEmojiView/WxEmojiView.js');
  var  list = [{
      microblog_id: "274", //主微博ID
      sendUserInfo:{
        content: "数据1 ~![01][02]"
      }
  },{
      microblog_id: "274",
      sendUserInfo:{
        content: "数据2 ~![03][04]"
      }
  },{
      microblog_id: "274", 
      sendUserInfo:{
        content: "数据3~![05][06]"
      }
  }];
//先将中括号替换为可解析的::
for(var i = 0;i<list.length;i++){
    var dt = list[i];
    var str = dt.sendUserInfo.content;
    // var str2 = str.replace(/[\[\]]/g,':');
    var str2 = str.replace(/\[([^\[\]]+)\]/g,':$1:');
    dt.sendUserInfo.content = str2;
}
Page({
    data:{
        list:""
    },
   onLoad: function(){
    var that = this;
    WxEmoji.bindThis(this);
    for(var i = 0;i<list.length;i++){
       WxEmoji.buildTextObjs(that,list[i].sendUserInfo.content);//使用生成文字
       list[i].sendUserInfo.content = "";//清空默认的原文字
    }
    that.setData({
       list:list
    });
  },
})

//模板文件循环

<block wx:for="{{list}}">
<view class="msg">
    <view class="ty flex-1">
      <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">
        <import src="../../WxEmojiView/WxEmojiView.wxml"/>
        <template is="WxEmojiView" data="{{WxEmojiObjs}}"/>
    </view>
</view>
</block>

Answer 1

首先你直接使用WxEmojiView的做法可能不是很妥当

目前WxEmojiView我一直没有更新，目前处于alpha0.1版本，所以不建议直接使用。

比较好的方案是，你从WxEmojiView的处理过程中借鉴并改造在你的小程序中

既然已经使用，那么问题定位

这个问题是因为我当时并没有考虑多行使用的方案，所以我当时暴漏的时候没有暴漏出相关多数据方法

WxEmoji.buildTextObjs(that,list[i].sendUserInfo.content);//使用生成文字

wxEmojiView的源码中我只做了但数据处理，所以只会显示最后一条数据，而且都是一样的

function buildTextObjs(e,str){
  var temObjs = {};
  temObjs.WxEmojiTextArray = transEmojiStr(str);
  __this.setData({
    WxEmojiObjs:temObjs//这里直接返回了一个WxEmojiObjs
  });
}

解决方案

改造方法,是建立在你不是用其他功能的基础上

//1.改造方法buildTextObjs
function buildTextObjs(e,str){
  var temObjs = {};
  temObjs.WxEmojiTextArray = transEmojiStr(str);
  return temObjs;
}

//2.使用方法
Page({
    data:{
        list:""
    },
   onLoad: function(){
    var that = this;
    WxEmoji.bindThis(this);
    for(var i = 0;i<list.length;i++){
       //改造这里
       list[i].sendUserInfo.content = WxEmoji.buildTextObjs(that,list[i].sendUserInfo.content);
    }
    that.setData({
       list:list
    });
  },

//3: 模版使用
<block wx:for="{{list}}">
<view class="msg">
    <view class="ty flex-1">
      <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">
        <import src="../../WxEmojiView/WxEmojiView.wxml"/>
        <template is="WxEmojiView" data="{{WxEmojiObjs:item.sendUserInfo.content}}"/>
    </view>
</view>
</block>

Answer 2

WxEmojiView 不错，学习了。最近发现一个不错的 emoji编辑小程序：表情之emoji。