使用场景:微信小程序

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

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

效果:

微信小程序获取html内容后展示(C#)的更多相关文章

  1. 微信小程序获取输入框(input)内容

    微信小程序---获取输入框(input)内容 wxml <input placeholder="请输入手机号码" maxlength="11" type= ...

  2. [微信小程序] 微信小程序获取用户定位信息并加载对应城市信息,wx.getLocation,腾讯地图小程序api,微信小程序经纬度逆解析地理信息

    因为需要在小程序加个定位并加载对应城市信息 然而小程序自带api目前只能获取经纬度不能逆解析,虽然自己解析方式,但是同时也要调用地图,难道用户每次进小程序还要强行打开地图选择地址才定位吗?多麻烦也不利 ...

  3. 微信小程序-获取当前城市位置及再次授权地理位置

    微信小程序-获取当前城市位置 1. 获取当前地理位置,可通过wx.getLocation接口,返回经纬度.速度等信息; 注意---它的默认工作机制: 首次进入页面,调用该api,返回用户授权结果,并保 ...

  4. C# 微信小程序获取openid sessionkey

    项目介绍 1.微信小程序获取openid和session_key 2.后台使用C#开发 项目流程 准备工作 1 获取appid 1.1 下载微信web开发工具 https://developers.w ...

  5. .Net之微信小程序获取用户UnionID

    前言: 在实际项目开发中我们经常会遇到账号统一的问题,如何在不同端或者是不同的登录方式下保证同一个会员或者用户账号唯一(便于用户信息的管理).这段时间就有一个这样的需求,之前有个客户做了一个微信小程序 ...

  6. 微信小程序获取手机号码看这篇文章就够了

    前言 微信小程序获取手机号码,从官方文档到其他博主的文档 零零散散的 (我就是这样看过来 没有一篇满意的 也许是我搜索姿势不对) 依旧是前人栽树 后人乘凉 系列.保证看完 就可以实现获取手机号码功能 ...

  7. 图解微信小程序---获取电影列表

    图解微信小程序---获取电影列表 代码笔记 list跳转 第一步:编写前端页面获取相关的电影列表参数(对于显示参数不熟悉,可以先写js,通过console  Log的方式获取我们电影的相关数据字段,后 ...

  8. 微信小程序-获取当前位置和城市名

    微信小程序-获取当前城市位置 1, 获取当前地理位置,首先要拿到用户的授权wx.openSetting: 2,微信的getLocation接口,获取当前用户的地理位置(微信返回的是经纬度,速度等参数) ...

  9. 微信小程序获取地理位置授权

    微信小程序获取地理位置授权,首先需要在app.json中添加配置: "permission": { "scope.userLocation": { " ...

随机推荐

  1. jquery cdn/////////////////zzz

    jquery-2.1.1 注:jquery-2.0以上版本不再支持IE 6/7/8)百度引用地址 (推荐目前最稳定的,不会出现延时打不开情况) 百度压缩版引用地址:<script src=&qu ...

  2. Deep Learning 7_深度学习UFLDL教程:Self-Taught Learning_Exercise(斯坦福大学深度学习教程)

    前言 理论知识:自我学习 练习环境:win7, matlab2015b,16G内存,2T硬盘 练习内容及步骤:Exercise:Self-Taught Learning.具体如下: 一是用29404个 ...

  3. JDK的安装及部署配置(配图解)

    JDK的安装及部署配置 双击安装文件,出现如下界面 点击[下一步]出现如下界面,更改安装路径(建议安装至D盘), 点击[下一步],出现如下界面,修改文件夹名. 点击[确定],耐心等待 直至出现如下界面 ...

  4. NEXT | 不错过任何一个新产品

    NEXT | 不错过任何一个新产品 NEXT 不错过任何一个新产品

  5. chrome手动添加拓展

    https://www.crx4chrome.com/crx/978/ Free Download Postman REST Client CRX 0.8.4.19 for ------------- ...

  6. select控件自动触发change事件

    这里接上面的二级联动.背景:当页面跳转到修改页面时,需要首先绑定学院和专业.这就需要在页面加载时触发select的change事件,具体用trigger函数进行实现.代码如下. $("#xs ...

  7. linux进程管理总结

    目录 一.进程相关的概念 二.关闭会话时子进程进程被杀死 三.nohup的原理 四.setsid原理 五.daemon &和守护进程的区别 六.服务进程为什么要fork两次 七.systemd ...

  8. UML第一次作业

    一. 用例图:用例图(usecase diagram)是UML用于描述软件功能的图形.用例图包括用例.参与者及其关系,用例图也可以包括注释和约束.程序员要画时序图啥的用其他的比较麻烦,用plantum ...

  9. 熟记这些git命令,你就是大神

    1.git log  查看 提交历史 默认不用任何参数的话,git log 会按提交时间列出所有的更新,最近的更新排在最上面 2.git log -p -2 常用 -p 选项展开显示每次提交的内容差异 ...

  10. cocos2d-x c++ (多种屏幕Android与iOS的适配原理)

    1.AppDelegate.cpp 文件中 bool AppDelegate::applicationDidFinishLaunching() { // initialize director aut ...