h5-浏览器点击跳转微信小程序或微信内部广告页（微信浏览器）跳转小程序的实现方法。

一.微信内部浏览器使用<微信开放标签>唤起微信小程序

官方开发文档:[https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/url-scheme.html](%5Bhttps://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/url-scheme.html%5D%28https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/url-scheme.html%29)
之前我也跟着开发文档走，发现遇到很多坑。

1. 绑定域名

登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑
指的是要绑定可访问的安全域名，类似你想在 http://www.baidu.com/demo.html这个页面打开微信小程序，那么你就需要绑定www.baidu.com这个域名

2. 引入JS文件

在需要调用JS接口的页面引入如下JS文件：http://res.wx.qq.com/open/js/jweixin-1.6.0.js （支持https）
如需进一步提升服务稳定性，当上述资源不可访问时，可改访问：http://res2.wx.qq.com/open/js/jweixin-1.6.0.js （支持https）
备注：支持使用 AMD/CMD 标准模块加载方法加载。
↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑
这一块没什么注意的，引入就完事了。

3. 通过config接口注入权限验证配置并申请所需开放标签

与使用JS-SDK配置方式相同，所有需要使用开放标签的页面必须先注入配置信息，并通过openTagList字段申请所需要的开放标签，否则将无法使用（同一个url仅需调用一次）。开放标签的申请和JS接口的申请相互独立，因此是可以同时申请的。

        wx.config({
            debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印
            appId: '', // 必填，公众号的唯一标识    //后台返还
            timestamp: '', // 必填，生成签名的时间戳    //后台返还
            nonceStr: '', // 必填，生成签名的随机串    //后台返还
            signature: '',// 必填，签名    //后台返还
            jsApiList: [], // 必填，需要使用的JS接口列表 可选'chooseImage'等
            openTagList: [] // 可选，需要使用的开放标签列表，例如['wx-open-launch-app']   
        });

签名的相关信息可以通过https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#62
让后端请求相关接口获取
↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑
这一块也没什么坑吧，把相关数据放入即可。

4. 通过ready接口处理成功验证

        wx.ready(function () {
            // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中
        });

5. 通过error接口处理失败验证

        wx.error(function (res) {
            // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名
        });

把上述数据配置好即可，就可以实现微信浏览器唤起微信小程序了。当然这里也有官方提供的例子。
大家可以参考进行配置。
https://postpay-2g5hm2oxbbb721a4-1258211818.tcloudbaseapp.com/jump-mp.html

二.微信外部浏览器使用URL Scheme唤起微信小程序

官方开发文档：https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/url-scheme.html

通过服务端接口或在小程序管理后台「工具」-「生成 URL Scheme」入口可以获取打开小程序任意页面的 URL Scheme。适用于从短信、邮件、微信外网页等场景打开小程序。 通过 URL Scheme 打开小程序的场景值为 1065。

直接使用如下代码就可以在外部浏览器打开微信小程序，当然也可以在点击的时候触发下列的事件。
iOS系统支持识别 URL Scheme，可在短信等应用场景中直接通过Scheme跳转小程序。
Android系统不支持直接识别 URL Scheme，用户无法通过 Scheme 正常打开小程序，开发者需要使用 H5 页面中转，再跳转到 Scheme 实现打开小程序，跳转代码示例如下：

 location.href = 'weixin://dl/business/?t= *TICKET*'

服务端获取方法：https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/url-scheme/urlscheme.generate.html

首先请求https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET
拿到access_token，再使用access_token请求https://api.weixin.qq.com/wxa/generatescheme?access_token=ACCESS_TOKEN来拿到对应的URL Scheme，如下图。




最后我们可以通过上述的两个接口，拿到我们想要的link，如这样weixin://dl/business/?t= TICKET的形式，直接打开即可。
↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑
需要注意的是，这个方法只能在微信外部浏览器使用，微信内部浏览器需要使用微信开放标签，另外安卓和ios是有区别得。

展示效果如图所示

欢迎大家交流，有问题可以直接评论提出。