• 本项目已托管至码云,可下载进行查看具体代码。 个人助手
    • 代码会经常更新,下载码云代码查看最新程序

效果图

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

具体代码下载源码查看

1.下载码云上的代码框架个人助手 传送门

使用框架

1.下载码云上的代码框架传送门

2.框架注意事项

2.1使用准备

  • 下载项目 https://gitee.com/jpw_code/cef-sharp-vue
  • 找到目录CefSharpVue/ui/vue目录,使用cmd命令执行npm install 初始化vue依赖
  • 继续在CefSharpVue/ui/vue目录执行命令(使用cmd命令执行)npm run dev
  • 打开visual studio 2019 启动项目即可查看结果

2.2 从页面调用后端方法

  • 在vue项目(CefSharpVue/ui/vue目录)中找到api-method.js添加如下方法
const api = {
  //用于控制窗体 最大,最小化,关闭和获取窗口状态
  windowHander:apiReq.windowHander,

  //创建login函数,函数使用post方式,提交参数,并获取后台返回结果
  login: function(data) {
    //这里设置的第三个参数为 请求类型,目的是为了 无缝切换使用http请求模式
    return request('/login/login', data, 'POST');
  },
}
  • 在winform项目(CefSharpVue/目录)中找到CefSharpVue/Project/Controllers目录,创建TestController.cs添加如下方法
using System.Collections.Generic;
using CefSharpVue.Core.Attributes;
using CefSharpVue.Core.Utils.Response;
using CefSharpVue.Project.Entitys;
using CefSharpVue.Services;

namespace CefSharpVue.Project.Controllers
{
   [Controller]
   [RequestMapping("/login")]
   public class TestController
   {
   
        /// <summary>
        /// 测试指定参数赋值
        /// </summary>
        /// <returns></returns>
        [RequestMapping("/login", MethodType.POST)]
        public BaseResponse GetLogin(string phone, string password)
        {
            if (phone == "18888888888" && password == "1234567890")
            {
                Dictionary<string, string> useInfo = new Dictionary<string, string>{{"phone","18888888888"},{"nickName","超级管理员"},{"sex","1"}};
                return new BaseResponse("登录成功!", useInfo);
            }
            return new BaseResponse(StatusCode.Fail, "用户名或密码错误!",new object[] { phone,password });
        }
	}   
}
  • 在vue页面中调用
  this.$api.login({phone: '18888888888', password: '123456' }).then(res => {
     console.log("获取到结果:",res);
  });
  • 以上内容就完成了一个简单的业务请求,支持参数自动注入

2.4 从页面控制窗体

  • 窗体拖拽,为页面元素添加样式dom-drag或者添加style样式-webkit-app-region: drag;
  • 窗体拖拽,为页面元素添加样式dom-no-drag或者添加style样式-webkit-app-region: no-drag;
  • 窗体最大、最小、关闭、还原、获取状态等调用
    • 在vue项目(CefSharpVue/ui/vue目录)中找到api-method.js在对象api中添加如下代码
  //用于控制窗体 最大,最小化,关闭和获取窗口状态(注意上下文之间保留逗号,)
  windowHander:apiReq.windowHander,
    • 使用如下方法进行操作,他们的返回值都是Promise对象
      • 获取窗体状态:this.$api.windowHander("getWindowState")window.extend.getWindowState();
      • 最小化:this.$api.windowHander("minimized")window.extend.minimized();
      • 还原:this.$api.windowHander("normal")window.extend.normal();
      • 最大化:this.$api.windowHander("maximized")window.extend.maximized();
      • 关闭:this.$api.windowHander("close")window.extend.close();

2.5 双工通讯的使用

  • 在vue页面中使用
/**
节点代码
*/
 export default {
    data() {
    	return {
			socket:null,
		}
    },
    //...
    methods: {
    	//发送消息
    	sendMsg(msg){
    		this.socket.send(msg);
		},
		getMsg(evt){
			console.log("获取到消息",evt);
		},
		//...
	},
	created(){
		this.socket=window.socket;
		this.socket.connection("ws://socket");
		this.socket.open = () => {
        	//socket连接成功,触发事件
			alert("链接双工通信成功!")
        }
		
       //socket连接成功,获取后端发送的消息
		this.socket.message = (evt) => {
			this.getMsg(evt);
			alert("接收到后端发过来的消息!" + JSON.stringify(evt));
		}
	}
 }
  • 在winform项目(CefSharpVue/目录)中找到CefSharpVue/Project/Controllers目录,创建`SocketController.cs添加如下方法
using System;
using CefSharpVue.Core.Attributes;

namespace CefSharpVue.Project.Controllers
{
    [Controller]
    [RequestMapping("/socket")]
    [CSharpSocket(url ="socket")]
    public class SocketController
    {

        private static string url;
        /// <summary>
        /// 建立连接
        /// </summary>
        /// <param name="obj"></param>
        [Open]
        public static void Open(string _url)
        {
            url = _url;
        }


        /// <summary>
        /// 接受消息
        /// </summary>
        /// <param name="obj"></param>
        [Message]
        public static void Mesage(object obj)
        {
            //处理消息
            Console.WriteLine("socket处理消息");
        }


        /// <summary>
        /// 发送消息
        /// </summary>
        /// <param name="obj"></param>
        [Send]
        public static void Send(object obj)
        {
            VueStart.socket.WsSend(url, obj);

            Console.WriteLine("socket发送消息");
        }


        /// <summary>
        /// 主动关闭消息时,触发前端通知,
        /// </summary>
        /// <param name="obj"></param>
        [Close]
        public static void Close(object obj)
        {
            //关闭
            Console.WriteLine("socket关闭");
        }


        /// <summary>
        /// 发生异常关闭时触发
        /// </summary>
        /// <param name="obj"></param>
        [Error]
        public static void Error(object obj)
        {
            //异常
            Console.WriteLine("socket异常");
        }

    }
}

2.6 注册键盘跟换焦点

  • 找到需要跟换焦点的vue页面
  • 为焦点dom添加属性focus="序号" 序号为数字并且数字需连续
  • 在vue页面中添加如下代码
/**
节点代码
*/
 export default {
    data() {
    	return {
			//...
		}
    },
    //...
        //start-键盘回车支持
    mounted() {
      //这里的`'[focus]'`直接作为 document.querySelectorAll()的参数,查询需要注册回车事件的节点
      this.$enterFocus('[focus]');
    },
    updated() {
      //这里的`'[focus]'`直接作为 document.querySelectorAll()的参数,查询需要注册回车事件的节点
      this.$enterFocus('[focus]');
    },
    //end-键盘回车支持

    methods: {
		//...
	},
	created(){
	}
 }

2.7 其他内容查看源代码传送门

Logo

前往低代码交流专区

更多推荐