【海康威视】WPF客户端二次开发：【5】Chrome浏览器调用客户端程序链接参数处理 —— 前端encodeURIComponent编码，后端UrlDecode解码

最新推荐文章于 2024-06-18 10:41:38 发布

liuyonghong159632

最新推荐文章于 2024-06-18 10:41:38 发布

阅读量999

点赞数

分类专栏：海康威视二次开发 WPF 文章标签：海康威视 WPF

本文链接：https://blog.csdn.net/liuyonghong159632/article/details/116765969

版权

海康威视二次开发同时被 2 个专栏收录

23 篇文章 23 订阅

订阅专栏

WPF

6 篇文章 3 订阅

订阅专栏

一、前言

上一章讲解了 Chrome浏览器如何唤起客户端应用程序，以及如何简单的传递参数，如：<a href="AngWeiRobot://?uid=250&name=438">调用客户端程序</a>

这一章讲解前端如何传递更加复杂的Json参数以及后端如何接收，比如我需要传递一个数组对象：

var tmpDevices = [
    {
        Name:'测试设备',
        LocalLogin_IPAddress: '172.24.0.168',
        LocalLogin_Port: 8000,
        Login_Account: 'admin',
        Login_Password:'1234qwer'
    }
];

二、前端编码传参：

<html>
<body id="myid" title="mytitle">
    <script type="text/javascript">

        function CallLocalApp() {
            //1、数组对象准备
            var tmpDevices = [
                {
                    Name:'测试设备',
                    LocalLogin_IPAddress: '172.24.0.168',
                    LocalLogin_Port: 8000,
                    Login_Account: 'admin',
                    Login_Password:'1234qwer'
                }
            ];
			//2、将对象转换为Json字符串
            var tmpJsonDevices = JSON.stringify(tmpDevices);
			//3、对Json字符串进行编码
            var tmpEncodeDevices = encodeURIComponent(tmpJsonDevices);
			//4、拼接最终浏览器调用客户端参数：
            var tmpRequest = "angweirobot://?devices=" + tmpEncodeDevices;
			//5、唤起客户端程序
            window.open(tmpRequest);
        }
    </script>
    <button onclick="CallLocalApp()">唤起客户端</button>
</body>
</html>

//2、将对象转换为Json字符串
var tmpJsonDevices = JSON.stringify(tmpDevices);
.
前端控制台打印结果为：[{“Name”:“测试设备”,“LocalLogin_IPAddress”:“172.24.0.168”,“LocalLogin_Port”:8000,“Login_Account”:“admin”,“Login_Password”:“1234qwer”}]
.
后台接收到的结果为，tmpStr1："[%7b%22name%22:%22%e6%b5%8b%e8%af%95%e8%ae%be%e5%a4%87%22,%22locallogin_ipaddress%22:%22172.24.0.168%22,%22locallogin_port%22:8000,%22login_account%22:%22admin%22,%22login_password%22:%221234qwer%22%7d]"

//3、对Json字符串进行编码
var tmpEncodeDevices = encodeURIComponent(tmpJsonDevices);
.
后台接收到的结果为，tmpStr2："%5b%7b%22name%22%3a%22%e6%b5%8b%e8%af%95%e8%ae%be%e5%a4%87%22%2c%22locallogin_ipaddress%22%3a%22172.24.0.168%22%2c%22locallogin_port%22%3a8000%2c%22login_account%22%3a%22admin%22%2c%22login_password%22%3a%221234qwer%22%7d%5d"

三、后端接收参数并转码：

App.xaml.cs重写启动函数：

protected override void OnStartup(StartupEventArgs e)
{
    //1、调用父级
    base.OnStartup(e);

    //2、提取参数数组
    Dictionary<string, string> tmpKeyValues = GetRequestParameters(e.Args[0].ToLower());
    
    //3、提取编码后的Json设备参数数组对象字符串
    string tmpEncodeJsonDevices=tmpKeyValues["devices"];
	
	//4、解码Json字符串对象：
	string tmpJsonDevices= HttpUtility.UrlDecode(tmpEncodeJsonDevices);
	//解码后结果为正常的Json字符串：[{"Name":"测试设备","LocalLogin_IPAddress":"172.24.0.168","LocalLogin_Port":8000,"Login_Account":"admin","Login_Password":"1234qwer"}]
	
	//5、转换为对应的设备类列表
    List<DeviceDto> tmpDeviceLst= JsonConvert.DeserializeObject<List<DeviceDto>>(tmpStr2);
	
	//6、小心翼翼的保存起来...............
}

/// <summary>
/// 链接参数提取
/// </summary>
/// <param name="urlOrParameter"></param>
/// <returns></returns>
public static Dictionary<string, string>? GetRequestParameters(string urlOrParameter)
{
    //1、参数空字符串检测
    if (string.IsNullOrEmpty(urlOrParameter))
    {
        return null;
    }

    //2、去除参数前面的链接内容
    int tmpIndex = urlOrParameter.IndexOf('?');
    if (tmpIndex >= 0)
    {
        urlOrParameter = urlOrParameter.Substring(tmpIndex + 1);
    }

    //3、以&作为分隔符进行数据拆分：key=value 
    string[] tmpKeyValues = Regex.Split(urlOrParameter, "&");
    if (tmpKeyValues == null || tmpKeyValues.Length <= 0)
    {
        return null;
    }

    //4、最终参数拆分
    Dictionary<string, string> tmpDictionary = new();
    for (int i = 0; i < tmpKeyValues.Length; i++)
    {
        string tmpItem = tmpKeyValues[i];
        if (!tmpItem.Contains('='))
        {
            continue;
        }

        string[] tmpKeyValue = Regex.Split(tmpItem, "=");
        tmpDictionary.Add(tmpKeyValue[0], tmpKeyValue[1]);
    }

    //5、返回参数字典
    return tmpDictionary;
}

//设备实体类
public class DeviceDto
    {     
        public  string Name { get; set; }
        public  string LocalLogin_IPAddress { get; set; }
        public  int LocalLogin_Port { get; set; }
        public  string Login_Account { get; set; }
        public  string Login_Password { get; set; }     
    }

四、前端传参和后端解码注意事项：

//2、将对象转换为Json字符串
var tmpJsonDevices = JSON.stringify(tmpDevices);
.
//3、对Json字符串进行编码
var tmpEncodeDevices = encodeURIComponent(tmpJsonDevices);
.
不管是回传tmpJsonDevices 或者 tmpEncodeDevices 后端代码都可以通过HttpUtility.UrlDecode(jsonstr); 得到正确的相同的Json字符串对象

五、总结

前端编码什么的都好说，但是后端应该如何解码，用什么类或者什么方法解码，尝试了其他好几种方法都不行，匹配不上，找了好久才发现原来是这个方法：HttpUtility.UrlDecode();

liuyonghong159632

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
【海康威视】WPF客户端二次开发：【5】Chrome浏览器调用客户端程序链接参数处理 —— 前端encodeURIComponent编码，后端UrlDecode解码

文章目录一、前言一、前言上一章讲解了 Chrome浏览器如何唤起客户端应用程序，以及如何简单的传递参数，如：<a href="AngWeiRobot://?uid=250&name=438">调用客户端程序</a>这一章讲解如何传递更加复杂的Json参数，比如我需要传递一个数组对象： var tmpDevices = [ { Name:'测试设备',
复制链接

扫一扫