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

在winform中使用Vue页面支持，自动化部署，开发个人助手

• 效果图
• 具体代码下载源码查看
• • 1.下载码云上的代码框架[个人助手 传送门](https://gitee.com/jpw_code/cef-sharp-file-manager)
• 使用框架
• • 1.下载码云上的代码框架[传送门](https://gitee.com/jpw_code/cef-sharp-vue)
  • 2.框架注意事项
  • • 2.1使用准备
    • 2.2 从页面调用后端方法
    • 2.４ 从页面控制窗体
    • 2.5 双工通讯的使用
    • 2.6 注册键盘跟换焦点
    • 2.7 其他内容查看源代码[传送门](https://gitee.com/jpw_code/cef-sharp-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 其他内容查看源代码传送门