PHP试题网_中国最大的免费网络PHP试题测试平台,PHP试卷调查,PHP试卷模板、PHP考试测验
公告: PHP试题网于2022.06.21变更为少儿编程学院

注意:请自行区别跳转和连接。



场景1、小程序当前tabbar连接到h5页面,然后再切换到其它tabbar。注:此场景无法传递数据

     在小程序里使用<web-view src="h5的url地址"></web-view>即可跳转到h5页面。

     注:在小程序里使用h5,必须要在小程序管理端加上业务域名,这一点相当重要,否则不能跳转的。只能切换tabbar。

     可以使用代码:wx.miniProgram.switchTab({url:''})



场景2、h5可以给小程序传递数据。小程序跳转到h5页面,然后再返回到小程序:网上指的h5跳转到小程序主要是指这一方面。


     步骤一:在小程序当前的tabbar里的页面上(如:/pages/index/index)建一个链接navigator,连接到一个/pages/h5/h5.wxml页面,在这个页面登录成功后,返回小程序的当前tabbar并且传数据给小程序。

     login.html页面主要代码:

<navigator url="/pages/h5/h5">navigator</navigator>


   步骤二:新建一个小程序页面/pages/h5/h5.wxml,使用web-view标t签加载http://www.baidu.com/h5/login.html页面

<web-view src="http://www.baidu.com/h5/login.html" bindmessage="handlePostMessage"></web-view>

此页面中的bindmessage就是用来绑定某个方法接收来自h5页面的数据传输:

handlePostMessage: function(e) {
  console.log('handlePostMessage', e, JSON.parse(e.detail.data[0]));
},


  步骤三:http://www.baidu.com/h5/login.html页面代码

  <script src="//res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
 <script type="text/javascript">
    function nook() {// 此方法用于提交登录信息成功后要回调的函数
        wx.miniProgram.postMessage({
          data: JSON.stringify({
            action: 'postData',
            data: 'BASE 64 IMAGE STRING'
          })
        });
        //wx.miniProgram.switchTab({
        //    url: '/pages/index/index',
        //});
        wx.miniProgram.navigateBack(); //此行的效果与上面switchTab的效果是一样的。都可以传输数据
    }

 </script>

     

至此,大功告成。h5和小程序可以互通数据了。效果如下:

image.png



作者:OK兄 浏览次数:30