最近遇到个需求，公众号没有授权手机号的操作，所以需要跳转到小程序获取手机号，查看了微信的官方文档，翻到了这个wx-open-launch-weapp h5跳转小程序。

奉劝各位，看文档一定要仔细啊😭。

看了半天文档，又在网上折腾了一番，终于搞出来了，废话不多说，直接上代码。

官方给出的Demo是这个样子的：

<wx-open-launch-weapp
  id="launch-btn"
  username="gh_xxxxxxxx"
  path="pages/home/index?user=123&action=abc"
>
  <script type="text/wxtag-template">
    <style>.btn { padding: 12px }</style>
    <button class="btn">打开小程序</button>
  </script>
</wx-open-launch-weapp>
<script>
  var btn = document.getElementById('launch-btn');
  btn.addEventListener('launch', function (e) {
    console.log('success');
  });
  btn.addEventListener('error', function (e) {
    console.log('fail', e.detail);
  });
</script>

看了半天，emmmmm.......

表示看了个寂寞，哈哈哈~

没办法，继续网上搜索，看其他文章，有好几篇都让和官方文档去对照，我又回去看了好几遍，终于，看到了几个重点：

（一）  【这里圈一下哈，根据自己的资质来搞，不要乱搞！！】

开放对象

1.已认证的服务号，服务号绑定“JS接口安全域名”下的网页可使用此标签跳转任意合法合规的小程序。
2.已认证的非个人主体的小程序，使用小程序云开发的静态网站托管绑定的域名下的网页，可以使用此标签跳转任意合法合规的小程序。

（二）

注意红框位置

那么问题来了，这玩意儿到底干嘛的呢？？？

答：这个主要是规避微信开发者工具报错，防止你头疼的。。。

 那那那那那么问题又来了，这玩意儿到底写在哪呢？？？

我的项目是Vue项目，经过总结，我写在了这里，src/main.js

（三） 这块划重点了啊！！！

这块一定要引入js文件，我是放在了 public/index.html文件内

 这个看情况吧，你们也可去去其他文章看看，看不懂没关系，但是一定要看.....

假装看也行，我不管~

基本上配置重点就这三块，但是官方文档还是要自己研究的啊，从头看到尾，看完再找其他文章，不然看一遍，就会像我一样，跑到这来，寄几个写文章记录流程，ε=(´ο｀*)))唉

还有几个小点要注意下：

1、微信开发者工具是没办法触发打开小程序的。【我也不知道是谁说的，严格来讲（反正我这里是），本地调试是打不开的，没有弹窗，我的测试环境[有正式服务器、域名]，开发者工具会弹窗，但也仅限于有弹窗。】

 给你们截个图看看，快看！！！

 呐，酱婶

嗯......好像就一点需要注意的。

没事，你们先看着，哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈

我是不是还没放主要代码，emmmmm......

闭嘴，不许*****

来了来了，截图➕代码：

 <wx-open-launch-weapp
        username="gh_*******"
        path="pages/******/******.html"
        id="open-launch"
        v-if="phoneAuth"
        @launch="onLaunch"
        @error="onError"
    >
      <script type="text/wxtag-template">
        <style>
          .btn {
            width: 92px;
            height: 92px;
          }
        </style>
        <div class="btn"></div>
      </script>
    </wx-open-launch-weapp>

 我是直接在代码中加了这个开放标签，没有再多写<script>，我看其他文章有写，但是我删掉之后，发现，没啥影响，果断删掉了。

另外，这个标签找个地方放就行

为啥？？

因为你还要调整样式，放到你喜欢的地方，或者别人喜欢的地方，知道了呗！

这些就够用了，解释一下，需要吗？？？

不用算了。

ε=(´ο｀*)))唉

username是小程序的原始Id，自己去小程序找找

path是你要跳转的小程序页面，记得最后加上.html，我也不知道为啥，反正我加了，不加行不行？你试试不就得了，这么懒呢😒

id="open-launch"是用来给wx-open-launch-weapp写样式的，这个样式可以和其他标签一样，写在<style>内。

两个绑定事件我就不废话了，文档内有说明，注意一点的是，launch方法，是你操作弹窗就会触发这个方法。所以想要拦截小程序操作后的事件，想想算了，别当真。

下面这个class=btn的div是我根据我的业务需求写的，你也可以按照官方文档来写，你开心就好~

不管你是button也好，div也罢，这个样式只能写成内联或者行内的，否则没效果。

为啥？？？

你哪那么多为什么呢？？我不知道行了吧😳

好了，到目前为止，应该，也许，大概就这些了吧？

哎呀，有我再更新，真的是。。。

另外有啥问题应该可以留言吧，不能留言就憋着吧，我也没办法。

有错别字也别找我，输入法的锅，我才不背，哼！

好了，挂了吧

欢迎打赏👇