如何用自定义控件打开PC端的微信原创
2人赞赏了该文章
475次浏览
编辑于2023年11月29日 17:42:28
关键词:自定义控件
一、需求
自定义控件打开微信
二、思路与方案
PC端的微信属于桌面应用程序,我们可以通过前端代码(使用自定义控件),以协议的方式打开桌面应用程序。
这个方案有个前提条件,就是应用程序必须要在pc端的操作系统里面,注册自定义协议(URL Protocol),这样前端代码就可以浏览器调起本地exe程序。
像微信这种应用程序,在安装时,就已经在系统注册表上注册了自己的自定义协议,因此,就不需要再去定义微信的URL Protocol了,例如我本机(windows系统)上的注册表,可以看到微信自定义的协议头:
有了这个自定义的URL Protocol,那么我们在浏览器中输入 weixing:// 就会弹出提示框:
关于如何创建自己的自定义协议,我搜索了几篇各个操作系统(win,mac,linux)的教程,附在文章末尾,参考资料。
三、实现过程
1.编写自定义控件
仅需要一个js脚本文件,index.js:
(function(KDApi) { // 构造函数,变量名随意,与最后一句代码的KDApi.register的第二个参数一致即可 function MyComponent(model) { this._setModel(model) } // 原型中封装生命周期函数,固定格式 MyComponent.prototype = { _setModel: function(model) { this.model = model }, init: function(props) { // TO DO initFunc(this.model, props) }, update: function(props) { // TO DO }, destoryed: function() { // TO DO } } var initFunc = function(model, props) { model.dom.innerHTML = "<div><button id=\"myclick\">open WeChat</button></div>" initEvent(model, props) } var initEvent = function(model, props) { var btn = document.getElementById("myclick") btn.onclick = function() { window.open("weixin://"); } } // KDApi注册一个id号,这个id号要和控件方案的id号对应 KDApi.register('openapp', MyComponent) })(window.KDApi)
2.注册自定义控件方案
将第一步的js文件打包为zip,上传至控件方案。
填写自定义控件相关信息
四、效果图
五、开发环境版本
不限
六、参考资料
mac系统自定义URL Protocolopenapplication.zip(7.83KB)
赞 2
2人点赞
还没有人点赞,快来当第一个点赞的人吧!
打赏
0人打赏
还没有人打赏,快来当第一个打赏的人吧!
推荐阅读