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

官方开发文档:[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是有区别得。

展示效果如图所示

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

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

看微信如何往你的朋友圈里投广告？微信广告团队李昊在微信公开课演讲实录...
大家好!非常感谢今天有这样一个机会可以跟大家在微信公开课做这样的交流跟分享,今年是微信广告的第五年,也是微信广告零售行业的一个新的开始. 首先我们来看一下目前的零售行业在微信广告的投放情况,当前的零售 ...
看微信如何往你的朋友圈里投广告？微信广告团队李昊在微信公开课演讲实录
大家好!非常感谢今天有这样一个机会可以跟大家在微信公开课做这样的交流跟分享,今年是微信广告的第五年,也是微信广告零售行业的一个新的开始. 首先我们来看一下目前的零售行业在微信广告的投放情况,当前的零售 ...
vue h5网页点击按钮 -- 跳到微信小程序 wx-open-launch-weapp；onMenuShareAppMessage 分享图片不显示，且方法已废弃
h5网页点击按钮,唤醒微信小程序是否可以做? 可以!!,就是有点限制. 通过wx-open-launch-weapp就可以实现,但是限制微信服务号才可以使用.也就是说必须是微信环境下. 文章最下边, ...
如何在浏览器中点击复制微信号并且跳转到微信
如何在浏览器中点击复制微信号并且跳转到微信? <html lang="en"> <head> <meta charset="UTF-8&qu ...
微信打不开链接怎么办，详谈微信跳转外部浏览器的实现原理
很多朋友并不知道微信浏览器会屏蔽拦截第三方分享网页,所以经常都是直接在微信内转发分享,最终的结果就是导致原链接被微信屏蔽,通常这种情况微信会给个提示 "已停止访问该网址" ,出现这 ...
微信小程序做页内跳转外部网络连接/＜web-view＞的使用（使用与企业小程序）
导读需求: 在微信小程序中访问外部https网页,可做小程序中访问或者跳出到浏览器打开访问. 结果: 由于我做不了让小程序打开浏览器并访问指定的url,所以我做微信小程序页内访问指定的URL. 条件 ...
抖音跳转微信小程序、公众号、个人微信、微信群技术路线
1.申请巨量星图和橙子建站,目的是:获得落地页,抖音应用内,只有落地页才可以跳转非授权域名外链和APP. 2.通过 URL Scheme.URL Link, 跳转到自建小程序,具体技术文档:猛戳 we ...
小程序webview关注公众号_微信小程序和公众号互相跳转
一.前言微信小程序继微信公众号后,已经被越来越多的人使用,它的优点很多:不占内存.入口场景丰富.流量红利大.支持付费推广.可关联公众号等. 很多公众号,都或多或少的会去开发自己的微信小程序,这里就有 ...
【图文保存为图片并下载到相册】海报 h5，微信和 ios 不支持和用uniapp 微信小程序使用canvas把页面转为图片保存到手机
第一种,[图文保存为图片并下载到相册] h5, 微信和 ios 不支持 1,安装html2canvas npm install html2canvas --save 2,在需要的页面引入 import ...

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