如何用自定义控件打开PC端的微信

如何用自定义控件打开PC端的微信原创

吴锐雄

1人赞赏了该文章 251次浏览编辑于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)