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函數後傳遞回來的參數

注意上面說了 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){//執行索引一
		//func
		return 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){//執行索引一
		//func
		return 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) 事件綁定

釘釘打卡速度慢

Nginx R31 doc 官方文檔-01-nginx 如何安裝

Python 潮流週刊#51：用 Python 繪製美觀的圖表

Qt/C++音視頻開發74-合併標籤圖形/生成yolo運算結果圖形/文字和圖形合併成一個/水印濾鏡

挑戰程序設計競賽 2.2章習題 POJ - 3617 Best Cow Line 貪心

字節面試：MySQL什麼時候鎖表？如何防止鎖表？

.NET8連接SQL SERVER 2008 R2 報：證書鏈是由不受信任的頒發機構頒發的

golang開發環境搭建(win10)

python計算機視覺學習筆記——PIL庫的用法

Golang初學：獲取程序內存使用情況，std runtime

Windows核心編程_Miniblin(5) 前後端交互數據

IE下AJAX請求只有一次

Linux開發_多線程編程

Linux內核開發_3_busybox

Linux內核開發_2_Initramf

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結