微信小程序获取html内容后展示（C#）

使用场景：微信小程序

具体功能：从服务器获取文章内容 展示在小程序里

使用语言： 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>

 

效果：

 

转载于:https://www.cnblogs.com/vanteking/p/6726892.html