几种跳转微信小程序的方式

一、微信小程序跳转另一个小程序

1.微信小程序能正常跳转到另一个小程序的前提是：这两个小程序被同一个微信公众号关联，否则无法跳转。

wx.navigateToMiniProgram({
　　appId: 'xxxxxxxxxxxxxx', //目标小程序appid
　　path: '', //目标小程序页面路径
　　extraData: {
　　　　user_id: 111,
　　　　store_id: 222,
　　　　userName: '张三'
　　},
　　envVersion: 'release', //develop开发版；trial体验版；release正式版
　　success(res) {
　　　　console.log('跳转成功');
　　}
})

二、H5跳转微信小程序

目前的应用场景是在公众号打开我们的网页，然后跳转到微信小程序的对应页面（因为是微信内网页，微信提倡用jssdk的标签跳转，urlscheme是否可以待验证），下面总结下都需要哪些条件：

 1.H5项目中引入SDK

// 引入微信SDK
http://res.wx.qq.com/open/js/jweixin-1.6.0.js
// 或https
https://res.wx.qq.com/open/js/jweixin-1.6.0.js
// console.log(window.wx)

2.让后台配合给一个接口，获取微信的config参数

    wx.config({
        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来
        appId: data.appId, // 必填，公众号的唯一标识
        timestamp: data.timestamp, // 必填，生成签名的时间戳
        nonceStr: data.nonceStr, // 必填，生成签名的随机串
        signature: data.signature, // 必填，签名
        jsApiList: ['updateTimelineShareData'], // 必填，按需写
        openTagList: ['wx-open-launch-weapp'] // 可选，需使用开放标签，如['wx-open-launch-app']
    })

3.使用开放标签：wx-open-launch-weapp

（1）vue2

<div style="position: relative; width: 100%; height: 300px">
<img src="http://pic5.40017.cn/i/ori/ed500-18AAgY6YGhW.jpg"/>
   <wx-open-launch-weapp 
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%" 
    username="gh_72a4eb2d4324" path="sub_inner_pages/r2x/pages/task- 
    home/task-home.html">
     <script type="text/wxtag-template"> <div style="position: absolute; top: 0; left: 
    0; width: 100%; height: 100%; opacity: 0">
     </div></script>
   </wx-open-launch-weapp>
</div>

（2）vue3

<!-- 跳转小程序的开放标签 文档 https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html -->
<!-- vue3中使用微信开放标签 文档  https://blog.csdn.net/qq_26834399/article/details/119544394 -->
<div style="position: relative; width: 100%; height: 300px">
<img src="http://pic5.40017.cn/i/ori/ed500-18AAgY6YGhW.jpg"/>
            <wx-open-launch-weapp
              id="launch-btn"
              username="gh_72a4eb2d4324"
              path="sub_inner_pages/r2x/pages/task-home/task-home.html"
              style="
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
              "
            >
              <div v-is="'script'" type="text/wxtag-template">
                 <div style="width: 100%; color: orangered; text-align: center">
                   跳转外部小程序
                 </div>
              </div>
            </wx-open-launch-weapp>
</div>

一般思路就是把标签定位在元素上方，用户点击后跳走，里面不加任何东西，当然也可以定位个按钮在原来的图片上等，自由发挥即可~

<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>

三、App跳转微信小程序