小程序与H5如何互相跳转

H5跳小程序

方案一：开放标签官方文档

注：只有在微信内置浏览器才会生效，开放标签是基于jssdk开发的，在其他的浏览器就不好使了。 注：在index.html页面head标签里引入 （必须是1.6版本的哦 否则不会生效哒）

// index.html加入以下代码
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

// 封装公共文件 wechat.js
function registerWeChatSDK (self, data) {
    if (data.appId) {
    	wx.config({
            debug: false,                    // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: data.appId,               // 必填，公众号的唯一标识
            timestamp: data.timestamp,       // 必填，生成签名的时间戳
            nonceStr: data.nonceStr,         // 必填，生成签名的随机串
            signature: data.signature,       // 必填，签名
            jsApiList: [],
            openTagList:['wx-open-launch-weapp'] 
        })
      wx.ready(function () {
      	// 分享朋友圈
        wx.updateTimelineShareData({
          title: title, // 分享标题
          link: href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
          imgUrl: imgUrl, // 分享图标
          success: function () {}
        })
        // 分享好友
        wx.updateAppMessageShareData({
          title: title, // 分享标题
          desc: desc, // 分享描述
          link: href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
          imgUrl: imgUrl, // 分享图标
          success: function () {}
        })
      })
    }
}

// 使用组件
<template>
<wx-open-launch-weapp id="launch-btn" username="gh_xxxxxxxx" path="pages/home/index.html?user=123&action=abc">
  <script type="text/wxtag-template">
    <style>.btn { padding: 12px }</style>
    <button class="btn">打开小程序</button>
  </script>
</wx-open-launch-weapp>
</template>

// main.js
Vue.config.ignoredElements = ['wx-open-launch-weapp']

注：

• 1.须在微信浏览器上才能看到效果，开发者工具上不行；
• 2.已认证的服务号，服务号绑定“JS接口安全域名”下的网页可使用此标签跳转任意合法合规的小程序；
• 3.已认证的非个人主体的小程序，使用小程序云开发的静态网站托管绑定的域名下的网页，可以使用此标签跳转任意合法合规的小程序。
• 4.wechatVersion>=7.0.12

方案二：URL Scheme官方文档

小程序跳H5

小程序的web-view官方文档

<web-view src="{{webSrc}}"></web-view>

小程序跳小程序

wx.navigateToMiniProgram({
   appId: 'xxxxxx',
   path: 'pages/index/index'
})