Windows界面编程_Miniblink(3) 事件绑定

Miniblink继承保留了cef里js事件回调的方法，我们可以使用miniblink里jsBindFunction函数来对html里与js脚本绑定的button或者对其标签进行js绑定。

注意使用这个框架开发的坏处在于你必须会前端编程和后端技术，懂得交互过程，因为后面还要介绍如何获取页面的消息事件

如果不想这样写的话，可以去我的github上下载开源的封装ui库，基于miniblink，无需会前后端知识，只需要懂得控件消息即可

第一步先编写一个html文件：

<html>
<body></body>
</html>

增加hand头，在hand头里写js函数

<html>
<head>
<script>
function myFunction()
{}
</script>
</head>
<body>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button></body>
</html>

这个js函数的意思是修改dom树里 id为demo的值，改为"My First JavaScript Function"

button里的onclick事件与之对应

然后我们续上一篇工程，在初始化函数里加上绑定函数：

回调函数原型：

jsValue JS_CALL myTest(jsExecState es){}

先说一下 miniblink绑定原理，miniblink只能绑定js函数，注意不是我们的js脚本函数，是js默认自带的函数，如msg这样的执行函数。

我们在js函数里使用js系统函数msg，然后在绑定这个函数，当miniblink执行这个函数时会去执行我们自己的c语言函数，产生了映射

我们先修改js函数里，使用msg来传递参数

<html>
<head>
<script>
function myFunction()
{var obj = msgBox("");var name = obj.name;alert(name);var age = obj.age;alert(age);
}
</script>
</head>
<body>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button></body>
</html>

上面这段js就是申请一个数组，去获取miniblink执行c函数后传递回来的参数

注意 onclick建议在node++上copy，如果没有高亮则编码出错，博主测试发现csdn会有编码在里面导致miniblink无法解析

注意上面说了 js只能绑定js的系统函数，所以有一个问题，那就是很难交互，不能动态响应多个组件

那么怎么办呢？博主就想出了一种解决方案

记录式的交互

这种方法就是在每次使用msgbox传值给索引，然后后端我们在写一个中转函数，来记录值的索引去调用不同的函数然后在把不同的函数处理结果传递回来，这样每个js函数就获得了对应的想要的结果

好了，那么我们动手写一写吧:

修改js函数里的msg穿值给1：

var obj = msgBox("1");

后端的中转系统：

//中转函数
jsValue JS_CALL js_msgBox(jsExecState es)
{const wchar_t* FuncIndex = jsToStringW(es, jsArg(es, 0));//开始中转if (wcscmp(FuncIndex, L"1") == 0){//执行索引一//funck}return jsStringW(es, L"0X00");}

然后在ini函数里绑定：

 jsBindFunction("msgBox", js_msgBox, 1);//JS调用C++

第一个参数是函数名，只能是js的系统函数

第二个是回调函数，注意最好是全局函数

第三个代表告诉miniblink有前端js执行传递进来了多少参数，注意这个我们获取不到的，只是miniblink获取这个值用户给c++传值

绑定完成后所有执行msgbox的函数全部都会被执行我们的中转函数，然后我们写一个我们自己的函数，用于返回一个字符串和数值：

//索引函数
jsValue JS_CALL js_Index1(jsExecState es)
{jsValue jv = jsEmptyObject(es);      jsValue jOv1 = jsStringW(es, L"dsad");jsValue jOv2 = jsInt(2);     jsSet(es, jv, "name", jOv1);        jsSet(es, jv, "age", jOv2);       return jv;}

这个是索引一的函数，在中转函数里回调：

//中转函数
jsValue JS_CALL js_msgBox(jsExecState es)
{const wchar_t* FuncIndex = jsToStringW(es, jsArg(es, 0));//开始中转if (wcscmp(FuncIndex, L"1") == 0){//执行索引一//funcreturn js_Index1(es);}return jsStringW(es, L"0X00");}

直接runturn就可以了，miniblink框架会帮我传值

其次说一下这个函数

const wchar_t* FuncIndex = jsToStringW(es, jsArg(es, 0));

es参数是代表指针指向传递进来值的内存块，可以通过规定函数大小来取值，更多的后面介绍，本文只介绍重点如何绑定事件，以及思路

我们执行一下看看：

可以看到界面出来了，我们点击按钮：

我们使用js里的alert信息框提示的信息也弹了出来，证明前后端交互成功o(*￣▽￣*)ブ

整数值也获取到了，脚本语言最大的好处是不需要考虑类型

我们在稍微修改一下代码，将后端传递进来的name字符串修改我们的上面的标签字

   var obj = msgBox("1");var name = obj.name;document.getElementById('demo').innerHTML=name;var age = obj.age;

执行结果：

重点在于：

document.getElementById('demo').innerHTML=name;

这行代码是获取dom树下的名为id的子树，然后将子树内容改为变量name也就是我们获取的值

不建议在进行这样操作的时候使用信息框，因为内核渲染会优先处理完信息框在来绘制我们的改变页树的消息

在说一个上面如果传递进来不正确我们默认返回0X00 可以在js脚本里判断函数是否找到，防止意外出现，当然也可以使用别的方法让这个架构体系变得更加牢固，安全，健壮！

完整代码：

Win32

// Win32Project1.cpp : 定义应用程序的入口点。
//#include "stdafx.h"
#include "Win32Project1.h"
#include "wke.h"
#define MAX_LOADSTRING 100// 全局变量:
HINSTANCE hInst;                                // 当前实例
TCHAR szTitle[MAX_LOADSTRING];                  // 标题栏文本
TCHAR szWindowClass[MAX_LOADSTRING];            // 主窗口类名// 此代码模块中包含的函数的前向声明:
ATOM                MyRegisterClass(HINSTANCE hInstance);
BOOL                InitInstance(HINSTANCE, int);
LRESULT CALLBACK    WndProc(HWND, UINT, WPARAM, LPARAM);
INT_PTR CALLBACK    About(HWND, UINT, WPARAM, LPARAM);int APIENTRY _tWinMain(_In_ HINSTANCE hInstance,_In_opt_ HINSTANCE hPrevInstance,_In_ LPTSTR    lpCmdLine,_In_ int       nCmdShow)
{UNREFERENCED_PARAMETER(hPrevInstance);UNREFERENCED_PARAMETER(lpCmdLine);// TODO:  在此放置代码。MSG msg;HACCEL hAccelTable;// 初始化全局字符串LoadString(hInstance, IDS_APP_TITLE, szTitle, MAX_LOADSTRING);LoadString(hInstance, IDC_WIN32PROJECT1, szWindowClass, MAX_LOADSTRING);MyRegisterClass(hInstance);// 执行应用程序初始化: if (!InitInstance (hInstance, nCmdShow)){return FALSE;}hAccelTable = LoadAccelerators(hInstance, MAKEINTRESOURCE(IDC_WIN32PROJECT1));// 主消息循环: while (GetMessage(&msg, NULL, 0, 0)){if (!TranslateAccelerator(msg.hwnd, hAccelTable, &msg)){TranslateMessage(&msg);DispatchMessage(&msg);}}return (int) msg.wParam;
}//
//  函数:  MyRegisterClass()
//
//  目的:  注册窗口类。
//
ATOM MyRegisterClass(HINSTANCE hInstance)
{WNDCLASSEX wcex;wcex.cbSize = sizeof(WNDCLASSEX);wcex.style           = CS_HREDRAW | CS_VREDRAW;wcex.lpfnWndProc = WndProc;wcex.cbClsExtra      = 0;wcex.cbWndExtra        = 0;wcex.hInstance     = hInstance;wcex.hIcon         = LoadIcon(hInstance, MAKEINTRESOURCE(IDI_WIN32PROJECT1));wcex.hCursor     = LoadCursor(NULL, IDC_ARROW);wcex.hbrBackground   = (HBRUSH)(COLOR_WINDOW+1);wcex.lpszMenuName  = MAKEINTRESOURCE(IDC_WIN32PROJECT1);wcex.lpszClassName    = szWindowClass;wcex.hIconSm       = LoadIcon(wcex.hInstance, MAKEINTRESOURCE(IDI_SMALL));return RegisterClassEx(&wcex);
}//
//   函数:  InitInstance(HINSTANCE, int)
//
//   目的:  保存实例句柄并创建主窗口
//
//   注释:
//
//        在此函数中，我们在全局变量中保存实例句柄并
//        创建和显示主程序窗口。
//
wkeWebView m_web;
//索引函数
jsValue JS_CALL js_Index1(jsExecState es)
{jsValue jv = jsEmptyObject(es);      jsValue jOv1 = jsStringW(es, L"dsad");jsValue jOv2 = jsInt(2);     jsSet(es, jv, "name", jOv1);        jsSet(es, jv, "age", jOv2);       return jv;}
//中转函数
jsValue JS_CALL js_msgBox(jsExecState es)
{const wchar_t* FuncIndex = jsToStringW(es, jsArg(es, 0));//开始中转if (wcscmp(FuncIndex, L"1") == 0){//执行索引一//funcreturn js_Index1(es);}return jsStringW(es, L"0X00");}BOOL InitInstance(HINSTANCE hInstance, int nCmdShow)
{HWND hWnd;hInst = hInstance; // 将实例句柄存储在全局变量中hWnd = CreateWindow(szWindowClass, szTitle, WS_OVERLAPPEDWINDOW,CW_USEDEFAULT, 0, CW_USEDEFAULT, 0, NULL, NULL, hInstance, NULL);if (!hWnd){return FALSE;}ShowWindow(hWnd, nCmdShow);UpdateWindow(hWnd);wkeSetWkeDllPath(L"node.dll");wkeInitialize();RECT rtClient;GetClientRect(hWnd,&rtClient);rtClient.top += 24;m_web = wkeCreateWebWindow(WKE_WINDOW_TYPE_CONTROL, hWnd, rtClient.left, rtClient.top, rtClient.right - rtClient.left, rtClient.bottom - rtClient.top);wkeLoadFile(m_web, "index.html");jsBindFunction("msgBox", js_msgBox, 1);//JS调用C++wkeShowWindow(m_web, TRUE);return TRUE;
}//
//  函数:  WndProc(HWND, UINT, WPARAM, LPARAM)
//
//  目的:    处理主窗口的消息。
//
//  WM_COMMAND  - 处理应用程序菜单
//  WM_PAINT    - 绘制主窗口
//  WM_DESTROY  - 发送退出消息并返回
//
//
LRESULT CALLBACK WndProc(HWND hWnd, UINT message, WPARAM wParam, LPARAM lParam)
{int wmId, wmEvent;PAINTSTRUCT ps;HDC hdc;switch (message){case WM_COMMAND:wmId    = LOWORD(wParam);wmEvent = HIWORD(wParam);// 分析菜单选择: switch (wmId){case IDM_ABOUT:DialogBox(hInst, MAKEINTRESOURCE(IDD_ABOUTBOX), hWnd, About);break;case IDM_EXIT:DestroyWindow(hWnd);break;default:return DefWindowProc(hWnd, message, wParam, lParam);}break;case WM_PAINT:hdc = BeginPaint(hWnd, &ps);// TODO:  在此添加任意绘图代码...EndPaint(hWnd, &ps);break;case WM_DESTROY:PostQuitMessage(0);break;default:return DefWindowProc(hWnd, message, wParam, lParam);}return 0;
}// “关于”框的消息处理程序。
INT_PTR CALLBACK About(HWND hDlg, UINT message, WPARAM wParam, LPARAM lParam)
{UNREFERENCED_PARAMETER(lParam);switch (message){case WM_INITDIALOG:return (INT_PTR)TRUE;case WM_COMMAND:if (LOWORD(wParam) == IDOK || LOWORD(wParam) == IDCANCEL){EndDialog(hDlg, LOWORD(wParam));return (INT_PTR)TRUE;}break;}return (INT_PTR)FALSE;
}

html:

<html>
<head>
<script>
function myFunction()
{var obj = msgBox("1");var name = obj.name;document.getElementById('demo').innerHTML=name;var age = obj.age;
}
</script>
</head>
<body>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>
</body>
</html>

Windows界面编程_Miniblink(3) 事件绑定相关推荐

Windows界面编程_Miniblink(2) 嵌入到Win32窗口里
这里博主不教关于Miniblink其它功能,只教对UI界面编程相关的API! 第一步如何在Win32的窗口里嵌入Miniblink? 第一步先创建一个Win32工程第二步包含wke头文件: #inc ...
Windows界面编程_Miniblink(6) 个人信息界面
先看一下Demo: 按钮发光动画效果: 字体效果: 鼠标移动到字体上会有阴影缓动使用skn皮肤+miniblink框架编写而成,结合之前的教程,可以轻易写出这样的界面本源码基于前几篇文章,这里直接 ...
Windows界面编程第八篇 listbox彩色显示隔行变色
分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章.分享知识,造福人民,实现我们中华民族伟大复兴! 本文配套 ...
Windows界面编程-背景图片、透明特效使用
Windows界面编程第一篇位图背景与位图画刷可以通过WM_CTLCOLORDLG消息来设置对话框的背景,MSDN上对这个消息的说明如下: The WM_CTLCOLORDLG message i ...
Windows界面编程第一篇位图背景与位图画刷
分享一下我老师大神的人工智能教程.零基础!通俗易懂!风趣幽默!还带黄段子!希望你也加入到我们人工智能的队伍中来!https://blog.csdn.net/jiangjunshow 本系列主要讲解Wi ...
windows界面编程之自绘窗体（模仿腾讯qq）
1.建立win32项目 2.在项目属性中设置为使用MFC动态链接库 3.建立CMyApp类,该类从CWinApp派生 4.建立CMainWnd类,可以直接从CFrameWnd类派生,也可以自己注册一 ...
视频教程-精通Win32 API编程-Windows图形界面编程-C/C++
精通Win32 API编程-Windows图形界面编程黄强老师,国家软件设计师,软件开发工程师,项目经理.产品经理.培训讲师. 创业合伙人,多年C.C++开发经验,尤擅长移动互联网项目的开发! 黄强 ...
python图形界面化编程GUI（三）事件绑定（鼠标和键盘、OptionMenu、scale、颜色、文件对话框、菜单和工具栏、ttk子模块）
常用组件汇总 Tkinter类名称简介 Toplevel 顶层容器类,可用于为其他组件提供单独的容器,类似于窗口 Button 按钮代表按钮组件 Canvas 画布提供绘图功能,包括直线.矩 ...
Windows界面UI自绘编程（上）之上部
Windows界面UI自绘编程(上)之上部第一章 Win32程序基本框架第二章 Win32对话框和文件的遍历(函数FindFirstFile.FindNextFile和SHGetFileInfo) ...

Windows界面编程_Miniblink(3) 事件绑定

Windows界面编程_Miniblink(3) 事件绑定相关推荐

最新文章

热门文章