PHP菜鸟博客_共同学习分享PHP技术心得【PHP爱好者】
微信小程序web-view内嵌h5,实现双向传参案例
2021-5-8 菜鸟站长


1.微信小程序带参跳转h5代码



.js








Page({


  data:{


    openid:'123456789x'


  },


  onLoad(options){


    var openid=this.data.openid;


    this.setData({


      src:'https://www.wlphp.com/test/test.php?openid='+openid


    })


  }


})


.wxml










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

2.h5页面php代码






.php



 <?php print_r($_GET);?>

<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>

<input type="button" value="返回到小程序toolbar"  onclick="goback()">

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

<script>

        function goback(){

                 wx.miniProgram.reLaunch({url: '/pages/sorts/sorts'});

        }

</script>



1.jpg

如果要跳转非toolbar页面可以用wx.miniProgram.navigateTo



如果带参数可以在url的值后面?id=1传参到小程序



关于小程序内嵌h5支付问题,h5支付不支持,jsapi待研究,native扫码支付可以在h5显示出来二维码,但是无法在页面长按识别二维码支付(不知道后续是否会支持),可以采用带参数跳转到小程序原生页面,然后调用小程序支付,然后支付完毕再带参数跳转到h5页面的方案。



微信官方的web-view说明文档地址:



https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html





发表评论:
昵称

邮件地址 (选填)

个人主页 (选填)

内容