使用场景：微信小程序
具体功能：从服务器获取文章内容 展示在小程序里
使用语言： C#
---------------------------------------------------------
因为微信小程序不能识别html标签，不能直接获取到html绑定到小程序里
有两种解决方案：
1、使用基于微信小程序的第三方插件。
2、在服务器后 直接把html处理好，返回。
本篇文章说的 是第二个方法
---------------------------------------------------------
解决思路：
1.定义一个数组
2.获取html内容，根据p标签或者div标签 分割 （这里解释一下，内容一般是后台使用编辑器填的，生成的标签段落都是p标签为主，所以我 这里用p标签分割）
3.循环分割的html，判断有没有包含img标签
4.过滤p标签 和 图片 保存在数组里。
5.返回给小程序，前台判断绑定。
---------------------------------------------------------
//定义一个类型，用来保存分割后的内容
public class CntList
{
public string content { get; set; }
public string type { get; set; }
}
/// <summary>
/// 具体实现的方法
/// </summary>
/// <param name="content">文字内容</param>
/// <returns>listCnt</returns>
public static List<CntList> getCntByList(string content)
{
List<CntList> listCnt = new List<CntList>(); //文章
if (!string.IsNullOrEmpty(content))
{
HtmlDocument doc = new HtmlDocument();
doc.LoadHtml(content);
var p_cnt = doc.DocumentNode.SelectNodes("//p");
foreach (var pItem in p_cnt)
{
var node = HtmlNode.CreateNode(pItem.OuterHtml);
if (node.InnerHtml.Contains("src"))
{
if (node.SelectSingleNode("//img") != null)
{
string _href = node.SelectSingleNode("//img").Attributes["src"].Value;
listCnt.Add(new CntList { type = "image", content = _href });
}
}
else
{
listCnt.Add(new CntList { type = "content", content = X.Component.Tools.StringHelper.NoHTML(node.InnerText) });
}
}
}
return listCnt;
}
微信小程序绑定数据：
<view class="detail-info">
<view wx:for="{{detail.cnt}}" wx:for-item="cntItem" style=" margin-bottom: 15px;" wx:key="shardCnt">
<block wx:if="{{cntItem.type=='image'}}">
<image src="{{cntItem.content}}" mode="aspectFill" class="cover"></image>
</block>
<block wx:else>
<view>{{cntItem.content}}</view>
</block>
</view>
</view>
效果：
