H5页面转跳微信小程序界面_h5跳转微信小程序时如何不提示弹出框-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_25288617/article/details/117249801

H5页面转跳小程序界面

页面示例 list.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
<head>
    <title>转跳页面</title>
    <script src="${request.contextPath}/statics/libs/jquery.min.js"></script>
    <!--jquery-->
<!--     html代码中引入JS SDK-->
    <script type="text/javascript" src="https://res2.wx.qq.com/open/js/jweixin-1.3.0.js"></script>
</head>

<body>

<div id="app">
    <div class="wrapper">
        <div id="dlp">
           转跳小程序
        </div>
    </div>

</div>

<script type="text/javascript">
    $(function(){
        var artifact = "${artifact}"; //参数
        var access_token = "${access_token}"; //参数
          console.log('执行了..artifact...'+artifact)
           setTimeout(function(){
               wx.miniProgram.reLaunch({
                   url: '/pages/login/login?artifact='+artifact+"&access_token="+access_token
               })
           },200)
    });
</script>
</body>
</html>

组件web-view

1.首先要提的是个人类型与海外类型的小程序暂不支持使用.
2.页面中一但有<web-view></web-view>，页面会首先显示组件内页面（其他内容一概不显示）
3.<web-view src="https://www.baidu.com/"></web-view>引入页面必须是https开头的，这个页面的域名必须要在微信公众平台小程序后台设置（设置 => 开发设置 => 业务域名）
这个域名配置还需要两点
a.业务域名需IPC备案
b.需下载校验文件（放在服务器根目录，文件为.txt文件）
在这里插入图片描述
这是我服务器的根目录

小程序代码部分。

<web-view src="https://www.xxxx.cn/test/list.html"></web-view>

h5代码部分。
需要引入一个js JSSDK ，有了它你才能调用微信的方法进行页面跳转。（其实还可以做很多事情，自己去看文档吧！）

<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>

微信给出的跳转方法
1、wx.navigateTo
该方法主要用于在小程序中已注册页面之间的跳转。微信官方规定“为了不让用户在使用小程序时造成困扰，我们规定页面路径只能是五层，请尽量避免多层级的交互方式。”其次，该方法跳转页面的时候，原来的页面还留着，可以进行返回的。就像一个栈一样。这个栈只能存储5个页面。

2、wx.redirectTo()
该方法主要用于打开新的页面，用于小程序中已注册页面之间的跳转。使用该方法之后，原来的页面相当于被关闭了，打开了一个新的栈。所以我们可以把一些不需要返回的页面，用wx.redirectTo()来进行跳转。

3、wx.switchTab（）
这个方法是微信给出的跳转方法中，唯一能跳到tabBar注册页面的方法。比如你想通过web-view跳转到tabBar页面，那么此时使用wx.navigateTo（）和wx.redirectTo()都不会成功。必须要使用wx.switchTab（）。