VS2017创建MFC ActiveX工程制作IE OCX插件

布满荆棘的人生 2021-12-17 12:01 413阅读 0赞

最近看了一个采用MFC ActiveX封装DLL的OCX项目的源码，现将学习到的内容记录下来。本次的学习记录计划写如下几个主题：  
1.VS2017创建MFC ActiveX工程制作IE OCX插件  
2.VS2017中MFC ActiveX工程如何调试  
3.在IE中使用JS调用第三方DLL函数  
4.通过cab包由IE自动注册ActiveX  
5.ActiveX数字签名

一、VS2017新建工程  
VS2017创建MFC ActiveX工程的教程很多，在此简单的写一下如何新建一个MFC ActiveX工程。

1.  新建工程![第一步新建工程][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlbmdzaHVpeXVl_size_16_color_FFFFFF_t_70]
2.  默认，直接点击下一步![下一步][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlbmdzaHVpeXVl_size_16_color_FFFFFF_t_70 1]
3.  由于不需要显示AboutBox，取消打勾“有关于对话框”，点击完成  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlbmdzaHVpeXVl_size_16_color_FFFFFF_t_70 2]
4.  建好的工程如下图  
    ![建好的工程][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlbmdzaHVpeXVl_size_16_color_FFFFFF_t_70 3]

二、示例代码编写  
js可以调用的ocx函数，一般写在CDemoAXCtrl类中，该类即为控件类（一个ActiveX可以写多个控件类，本文就使用默认生成的这个CDemoAXCtrl控件类）  
本人在CDemoAxCtrl中添加了两个方法，如下

// JS调用返回 欢迎 xx，hello world！
    BSTR CDemoAXCtrl::speakHelloWorld(LPCTSTR pname)
    { 
    	CString res("");
    	res.Format(_T("您好%s,hello world!"), pname);
    	return res.AllocSysString();
    }
    
    LONG CDemoAXCtrl::add(LONG a, LONG b) { 
    	return a + b;
    }

仅仅添加方法，JS还不能调用，我们还需要添加如下代码

//DemoAXCtrl.h中，添加如下代码
    class CDemoAXCtrl : public COleControl
    { 
    	//此处为默认生成的代码
    
    	// 调度和事件 ID
    	public:
    		enum { 
    			dispidSpeakHelloWorld = 1L,
    			dispidadd = 2L
    		};
    	protected:
    		// JS调用返回 欢迎 xx，hello world！
    		BSTR speakHelloWorld(LPCTSTR name);
    		LONG add(LONG a, LONG b);
    };

//在DemoAXCtrl.cpp 中添加
    // 调度映射
    
    BEGIN_DISPATCH_MAP(CDemoAXCtrl, COleControl)
    	DISP_FUNCTION_ID(CDemoAXCtrl, "speakHelloWorld", dispidSpeakHelloWorld, speakHelloWorld, VT_BSTR, VTS_BSTR)
    	//VT_I4 表示long; VT_BSTR表示 BSTR;
    	//VTS_BSTR 表示 LPCTSTR
    	DISP_FUNCTION_ID(CDemoAXCtrl, "add", dispidadd, add, VT_I4, VTS_I4 VTS_I4)
    END_DISPATCH_MAP()

> DISP\_FUNCTION\_ID宏被在调度映射中使用，用来定义一个OLE自动化函数。  
> DISP\_FUNCTION\_ID( theClass, pszName, dispid,pfnMember, vtRetVal, vtsParams )
> 
>  *  theClass:类的名字
>  *  pszName:函数的外部名字
>  *  dispid
>  *  pfnMember:成员函数的名字
>  *  vtRetVal:指定了函数返回类型的值（VT\_开头表示返回值类型）
>  *  vtsParams:指定了函数参数表的一个或多个常量的用**空格**分隔的列表（VTS\_开头表示参数类型，多个参数以空格分隔）

//在DemoAX.idl中添加这两个函数
    //  CDemoAXCtrl 的主调度接口
    	[ 
    		uuid(0266f790-8f07-4038-b5ee-45f75359c010)
    	]
    	dispinterface _DDemoAX
    	{
    		properties:
    		methods:
    			[id(1)] BSTR speakHelloWorld(BSTR name);
    			[id(2)] LONG add(LONG a, LONG b);
    	};

我们在类视图中可看到上述添加的函数  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlbmdzaHVpeXVl_size_16_color_FFFFFF_t_70 4]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlbmdzaHVpeXVl_size_16_color_FFFFFF_t_70 5]  
通过上述过程，即编写好一个可以js调用的ocx。

三、js调用OCX

<HTML>
    <HEAD>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <TITLE>测试页</TITLE>
    </HEAD>
    <BODY >
    <input type="button" id="Button2" style="width:120px;height:30px;font-size:13px" name="Button1" value="测试OCX函数" onClick="btn1Click();">
    <br>
    <script> function btn1Click(){ var DemoAx = document.getElementById("DemoAx"); var num = DemoAx.add(1,3); alert(num); var str = DemoAx.speakHelloWorld("张三"); alert(str); } </script>
    </BODY>
    <OBJECT ID="DemoAx" CLASSID="CLSID:1B57AD6F-8E59-4A5F-8829-0276002B872A" width= "0" height="0">
    </OBJECT>
    </HTML>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlbmdzaHVpeXVl_size_16_color_FFFFFF_t_70]: /images/20211213/8aea44a3c8f04bb1b250b7582e8ff0f6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlbmdzaHVpeXVl_size_16_color_FFFFFF_t_70 1]: /images/20211213/4ebd2071a01a47aa98f8f0e912fb9f27.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlbmdzaHVpeXVl_size_16_color_FFFFFF_t_70 2]: /images/20211213/880e7d179bc44305acbf35e3fbef818f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlbmdzaHVpeXVl_size_16_color_FFFFFF_t_70 3]: /images/20211213/dd28ecac26394c5cb4c0f97fed73406e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlbmdzaHVpeXVl_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20190708212521812.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlbmdzaHVpeXVl,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlbmdzaHVpeXVl_size_16_color_FFFFFF_t_70 5]: /images/20211213/34b08fbc85c04113b68b1935260ff965.png