#### 背景北京时间2021年05月21日14:52:02，本靓仔正用心的耍着掘金前端板块。此时微信头像闪动，一位仅次于我颜值的未成谋面的网页在群里艾特我： ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f459989ad36f46c6af910428f2dad3a4~tplv-k3u1fbpfcp-watermark.image) mp://xxxx, 看上去一个简单的微信协议，点击直接打开小程序。这是什么时候出现的？还是有点点懵逼。不过还是挺有意思的。 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ecaa459d07a64f67b67256264426f7e9~tplv-k3u1fbpfcp-watermark.image) 瞬间感觉自己脱离队伍，还是决定研究一下。 #### 小程序链接 ##### 如何生成协议上天再给你打开一扇门的同时，就会为你关闭一扇窗，就像我们搞 **前端** 的虽然都有帅气的脸庞，但是还是花了几分钟的时间才在百度里面找到了答案。 > *安卓灰度功能，IOS目前暂未上架* 使用安卓手机，右上角胶囊处三个点，点击复制链接功能，即可得到当前小程序的链接。应该也是微信新出的一种营销方式。 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6e6b617780a24e968789e6561a83aecd~tplv-k3u1fbpfcp-watermark.image) 这好像也没有什么难的啊？ ##### 是否能在H5中使用超链接打开？奇奇怪怪的一个连接，这发出去了谁知道是什么啊，每个小程序长得又差不多？那我们能不能在微信中使用超链接的形式让他唤起小程序呢？这样的话不就又可以在其他方面去扩宽我们的业务线了吗？ ``` ``` 你有多大的期望，就会有多少的失望。这多么好的一个功能啊，结果就这样以失败告终了。不行，应该是我写的方式不对。虽然我没过520，但是在521我还是得多解锁几个姿势。 ``` // html // script function openMiniProgram() { window.location.href = "mp://Guxz6Z1Jxxxxxxx" } ``` 好吧当我放屁。无效。 #### 微信内唤起小程序细想，从入行到现在，我们曾被多少产品与测试摧残，这小小的挫折又算的了什么？在回顾一下他给出的链接吧，应该就是别人的先例。 ##### 微信开放标签通过地址进去找到了如下有效信息。[18🈲 ，未成年请在父母的陪同下进行观看](https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html ) 很丝滑，因为不想你们嫉妒我的颜值与才华并存我就直接总结。微信SDK >= 1.6.0 , 微信提供了两个开放标签，分别是打开小程序与APP。 > wx-open-launch-weapp [(老司机专线1-VIP通道)](https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html#%E8%B7%B3%E8%BD%AC%E5%B0%8F%E7%A8%8B%E5%BA%8F%EF%BC%9Awx-open-launch-weapp) 使用过程中简单的几步，我直接列出来吧。 ###### 升级微信sdk 先将sdk 调整到 1.6.0 ， [点击预览sdk文件](http://res.wx.qq.com/open/js/jweixin-1.6.0.js) ###### 配置开放标签配置wx.config 文件，允许使用微信内置的开放标签 ``` wx.config({ debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印 appId: '', // 必填，公众号的唯一标识 timestamp: , // 必填，生成签名的时间戳 nonceStr: '', // 必填，生成签名的随机串 signature: '',// 必填，签名 jsApiList: [], // 必填，需要使用的JS接口列表 openTagList: ['wx-open-launch-app'] // 可选，需要使用的开放标签列表 }); ``` ###### 服务号必须认证，且添加js安全域名登录服务号，右上角，点击进去认证 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/37cd166aedb1411288a54a4818dbc3b8~tplv-k3u1fbpfcp-watermark.image) 添加js安全域名步骤：左侧菜单设置 -> 公众号设置 -> 功能设置 -> JS接口安全域名 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1698c22ea2d74715bc1d29ef0c8b2ef9~tplv-k3u1fbpfcp-watermark.image) ###### 注意事项微信版本要求为：7.0.12及以上系统版本要求为：iOS 10.3及以上、Android 5.0及以上 ###### 书写代码 ``` // html -> 微信开放标签包裹 username = 小程序原始id // javascript var launchbtn = document.getElementById('launch-btn'); // 标签初始化完毕，可以进行点击操作 launchbtn.addEventListener('ready', function (e) { console.log('ready',e) }); // 用户点击跳转按钮并对确认弹窗进行操作后触发 launchbtn.addEventListener('launch', function (e) { console.log('success',e) }); // 用户点击跳转按钮后出现错误 launchbtn.addEventListener('error', function (e) { console.log('error',e) }); ``` ###### 效果预览 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/56dfc21a5124493198e6d45266247d00~tplv-k3u1fbpfcp-watermark.image) ###### 课后作业 > wx-open-launch-app 差点已经这样就完了，@郭源潮在评论中提到，微信外都可以打开小程序了... 不得不承认自己的掉队呀。不过男人嘛，就应该迎**男**而上。 #### 微信外开小程序 ##### urlscheme 面向于百度开发的精华就在于，拿到问题点后能高效的找到问题结果。 [点击收看 urlscheme.generate 官方文档](https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/url-scheme/urlscheme.generate.html) > 获取小程序 scheme 码，适用于短信、邮件、外部网页、微信内等拉起小程序的业务场景。通过该接口，可以选择生成到期失效和永久有效的小程序码，目前仅针对国内非个人主体的小程序开放直接上货。 ##### 基本准备 1. 非个人小程序 2. postman / other request tool ##### 实现方式先获取当前小程序的 [ACCESS_TOKEN](https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/access-token/auth.getAccessToken.html) 这一步是十分简单的, 直接浏览器访问一下也可以 ``` https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET ``` 拿到 ACCESS_TOKEN 之后，我们还需要使用post请求另一个接口，来获取小程序 scheme 协议。 ``` POST https://api.weixin.qq.com/wxa/generatescheme?access_token=ACCESS_TOKEN 属性类型必填说明 access_token string 是接口调用凭证 jump_wxa Object 否跳转到的目标小程序信息。 is_expire boolean 否生成的 scheme 码类型，到期失效：true，永久有效：false。 expire_time number 否到期失效的 scheme 码的失效时间，为 Unix 时间戳。生成的到期失效 scheme 码在该时间前有效。最长有效期为1年。生成到期失效的scheme时必填。 ``` 没必要在乎这么多，如果你仅仅只是测试，那么久只需要记住一句话。使用post 请求一下该接口。 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/18741a0844b141878ac2e2ed626b0c6e~tplv-k3u1fbpfcp-watermark.image) ok, 协议到手，赶快将其加入到我们的代码中进行测试。 ``` 打开我的小程序 ``` ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b3a4cea19b4b43a0a7d794df823749af~tplv-k3u1fbpfcp-watermark.image) 业务突然变得，好安静~！这样的话，我们基本上在微信内外，APP中都能打开小程序了。足以满足我们绝大部分的营销需求。 ##### 结语礼毕，全体起立。 1. 感谢@郭源潮提出的微信外打开小程序观点。 2. 解释一下，我是一个清纯的boy, 有些东西是我朋友告诉我的。 3. **如果你有什么新鲜的玩法，欢迎留言，我们一起研究。** 4. JavaScript水军+v = zzxxzxxx，备注掘金 5. **诚聘高级react，有能力+责任感推管理职位哦。**