如何在微信内打开小程序-一一网

背景

北京时间2021年05月21日14:52:02，本靓仔正用心的耍着掘金前端板块。此时微信头像闪动，一位仅次于我颜值的未成谋面的网页在群里艾特我：

mp://xxxx, 看上去一个简单的微信协议，点击直接打开小程序。

这是什么时候出现的？还是有点点懵逼。不过还是挺有意思的。

瞬间感觉自己脱离队伍，还是决定研究一下。

小程序链接

如何生成协议

上天再给你打开一扇门的同时，就会为你关闭一扇窗，就像我们搞前端的虽然都有帅气的脸庞，但是还是花了几分钟的时间才在百度里面找到了答案。

安卓灰度功能，IOS目前暂未上架

使用安卓手机，右上角胶囊处三个点，点击复制链接功能，即可得到当前小程序的链接。应该也是微信新出的一种营销方式。

这好像也没有什么难的啊？

是否能在H5中使用超链接打开？

奇奇怪怪的一个连接，这发出去了谁知道是什么啊，每个小程序长得又差不多？

那我们能不能在微信中使用超链接的形式让他唤起小程序呢？这样的话不就又可以在其他方面去扩宽我们的业务线了吗？

<a class="yupao-footer-item" href="mp://Guxz6Z1Jxxxxxxx">
  <span>打开小程序</span>
</a>
复制代码

你有多大的期望，就会有多少的失望。这多么好的一个功能啊，结果就这样以失败告终了。不行，应该是我写的方式不对。虽然我没过520，但是在521我还是得多解锁几个姿势。

// html
<a class="yupao-footer-item" href="" onClick="openMiniProgram">
 <span>打开小程序</span>
</a>

// script
function openMiniProgram() {
  window.location.href = "mp://Guxz6Z1Jxxxxxxx"
}
复制代码

好吧当我放屁。无效。

微信内唤起小程序

细想，从入行到现在，我们曾被多少产品与测试摧残，这小小的挫折又算的了什么？在回顾一下他给出的链接吧，应该就是别人的先例。

微信开放标签

通过地址进去找到了如下有效信息。18? ，未成年请在父母的陪同下进行观看

很丝滑，因为不想你们嫉妒我的颜值与才华并存我就直接总结。

微信SDK >= 1.6.0 , 微信提供了两个开放标签，分别是打开小程序与APP。

wx-open-launch-weapp (老司机专线1-VIP通道)

使用过程中简单的几步，我直接列出来吧。

升级微信sdk

先将sdk 调整到 1.6.0 ，点击预览sdk文件

配置开放标签

配置wx.config 文件，允许使用微信内置的开放标签

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

服务号必须认证，且添加js安全域名

登录服务号，右上角，点击进去认证

添加js安全域名步骤：左侧菜单设置 -> 公众号设置 -> 功能设置 -> JS接口安全域名

注意事项

微信版本要求为：7.0.12及以上

系统版本要求为：iOS 10.3及以上、Android 5.0及以上

书写代码

// html -> 微信开放标签包裹 username = 小程序原始id 
<wx-open-launch-weapp username="gh_aaaaaaaaaaa" id="launch-btn">
  <!-- 样式文件 -->
  <style></style>
  <!-- 内容节点 -->
  <script type="text/wxtag-template">
   <span>打开我高贵的小程序</span>
  </script>
</wx-open-launch-weapp>

// 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)
  });

复制代码