在winform CefSharp中使用Vue页面支持开发个人助手

---

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

---

效果图

具体代码下载源码查看

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.４ 从页面控制窗体

• 窗体拖拽，为页面元素添加样式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 其他内容查看源代码传送门