h5跳转小程序

小程序内打开h5

这个只需要用web-view标签即可，

可打开关联的公众号的文章，其它网页需登录小程序管理后台配置业务域名。

<web-view src="https://www.baidu.com" bindload="bindload" binderror="binderror"></web-view>

参考文档：https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html

小程序内h5返回小程序

返回指定页面即可

wx.miniProgram.navigateTo({url: '/path/to/page'})

参考文档：https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html

h5 跳转到小程序（微信环境）

1、使用wx-open-launch-weapp标签

它依赖于微信 JS-SDK 的支持，因此只能在微信环境中使用。需要进行签名校验

注意微信按钮的style不好调整，所以我们将它设置为宽度100%，高度适合的一条透明按钮，再将自己所需要的按钮样式写在同样的位置。

<div style="position: relative;width: 100%;height: 3rem;">
   //需要的按钮样式，以绝对定位放在微信跳转按钮的相同位置
  <van-button  style="position: absolute;top:1rem">打开小程序</van-button >
    //微信跳转按钮
   <wx-open-launch-weapp
       style="position: absolute;top: 0"
       id="launch-btn"
       appid="wx12345678"
     username="小程序原始id，即小程序对应的以gh_开头的id"
     path="pages/home/index?user=123&action=abc"
      referrerinfo="{'key1':'value1','key2':'value2'}"  <!-- 可选参数，传递额外信息给小程序 -->
    >
     <script type="text/wxtag-template">
       <style>.mini-btn {
         width:100%;
         margin: 24px auto;
         height: 3rem;
       opacity: 0}</style> //设置透明度为0
       <p class="mini-btn"></p>
     </script>
   </wx-open-launch-weapp>
 </div>
<!-- 引入微信 JS-SDK -->
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<script>
window.onload = function() {
    // 页面加载完成后的代码
    console.log('页面加载完成');
    this.getWxConfig()//发起微信验证的接口请求
};
// 后端验证接口： getSign （验证接口测试最好在线上测试）
 getSign = (data = {}) => {
    return request({
        url: '后端验证接口地址',
        method: 'post',
        data: data
    })
}
  getWxConfig () {
      let that = this
      let url = window.location.href.split('#')[0]
      const query = {
        webUrl: url,
        userId: this.userId
      }
      getSign(query).then(res => {
        wx.config({
          debug: false, // 验证结果弹窗控制，微信环境可能会因为接口安全问题出现失败弹窗，所以直接设置的false，
          appId: res.data.appId, // 公众号唯一appid
          nonceStr: res.data.nonceStr,
          timestamp: res.data.timestamp,
          signature: res.data.signature,
          jsApiList: ['scanQRCode'],//随便填写的一个
          openTagList: ['wx-open-launch-weapp']
        })
        wx.ready(function (success) {
          that.isWxBtn = true //表示验证成功
          console.log('success', success)
        })
        wx.error(function (err) {
          Toast.fail('暂不支持',error);
          // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
          console.log('error', error)
        })
      })
    }
 
</script>

参考文档：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html#21

官方案例：https://developers.weixin.qq.com/miniprogram/dev/wxcloudservice/wxcloud/guide/staticstorage/jump-miniprogram.html

2、使用URL Link

适用于从短信、邮件、网页、微信内等场景打开小程序。

生成的 URL Link 如下所示：

https://wxaurl.cn/*TICKET* 或 https://wxmpurl.cn/*TICKET*

参考文档：https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/url-link.html

h5跳转小程序非微信环境 URL Scheme

适用于从短信、邮件、微信外网页等场景打开小程序。 通过 URL Scheme 打开小程序的场景值为 1065。

在H5页面中通过a标签或者JavaScript的window.location.href进行跳转。

1、加密 URL Scheme

获取方式：通过服务端接口可以获取打开小程序任意页面的加密 URL Scheme。

location.href = 'weixin://dl/business/?t= *TICKET*'

2、明文 URL Scheme

获取方式：开发者无需调用平台接口，在MP平台->设置->隐私与安全->明文Scheme拉起此小程序声明后，可自行根据如下格式拼接appid和path等参数，作为明文 URL Scheme 链接。

location.href = 'weixin://dl/business/?appid=*APPID*&path=*PATH*&query=*QUERY*&env_version=*ENV_VERSION*'

参考文档：https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/url-scheme.html

小程序打开小程序

wx.navigateToMiniProgram({
   appId: appId, //必传值
   path: path,//别的小程序路径,空为跳到主页
   success(res) {
     // 打开成功
   },
   fail(res) {
     //打开失败
    }
})

参考文档：https://developers.weixin.qq.com/miniprogram/dev/api/navigate/wx.navigateToMiniProgram.html

小程序内h5跳另一个小程序

当我们的H5被某一个小程序打开，又想在H5内打开别的小程序，这种我们可以结合”小程序内H5返回小程序”和”小程序打开小程序”的模式

首先是H5页面修改

1、获取配置的别的小程序参数和别的小程序路径

2、跳转到包含该h5页面的小程序某个页面，带上目标参数和路径

wx.miniProgram.navigateTo({

    url: '/pages/自己小程序页面路径?appid=别的小程序参数&path=别的小程序路径'

});

然后是小程序页面修改

1、获取别的小程序appid和别的小程序路径path

2、小程序打开小程序

wx.navigateToMiniProgram({
   appId: appId, //必传值
   path: path,//别的小程序路径,空为跳到主页
   success(res) {
     // 打开成功
   },
   fail(res) {
     //打开失败
   }