云服务器 99 / 年,新老同享(可以99/年续费),开发者力荐特惠渠道,新客户在享受9折
阿里云推广

微信小程序web-view内嵌h5,实现双向传参案例

  • 内容
  • 评论
  • 相关

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


本文标签:

版权声明:若无特殊注明,本文皆为《菜鸟站长》原创,转载请保留文章出处。

本文链接:微信小程序web-view内嵌h5,实现双向传参案例 - https://wlphp.com/?post=270

发表评论

电子邮件地址不会被公开。 必填项已用*标注