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

简介: 微信小程序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"  οnclick="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>


6.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


相关文章
|
1月前
ssm使用全注解实现增删改查案例——web.xml
ssm使用全注解实现增删改查案例——web.xml
9 0
|
1月前
|
存储 小程序 算法
东郊到家预约系统开发|源码案例|小程序
区块链的最重要特性是去中心化,它不依赖于任何中心机构或第三方信任
|
2月前
|
存储 缓存 小程序
小程序页面路由传参的方法?
小程序页面路由传参的方法?
|
1月前
|
小程序 JavaScript 前端开发
【微信小程序】-- 案例 - 本地生活(二十)
【微信小程序】-- 案例 - 本地生活(二十)
|
21天前
|
存储 小程序
小程序路由传参的方法?
小程序路由传参的方法?
|
1月前
|
JSON 小程序 前端开发
【微信小程序】-- 案例 - 自定义 tabBar(四十六)
【微信小程序】-- 案例 - 自定义 tabBar(四十六)
|
1月前
|
小程序
【微信小程序】-- 自定义组件 - 数据监听器 - 案例 (三十五)
【微信小程序】-- 自定义组件 - 数据监听器 - 案例 (三十五)
|
1月前
|
JSON 小程序 API
【微信小程序】-- 案例 - 本地生活(列表页面)(三十)
【微信小程序】-- 案例 - 本地生活(列表页面)(三十)
|
1月前
|
小程序
【微信小程序】-- 页面事件 - 上拉触底 - 案例(二十七)
【微信小程序】-- 页面事件 - 上拉触底 - 案例(二十七)
|
1月前
|
小程序 JavaScript
【微信小程序】-- 页面导航 -- 导航传参(二十四)
【微信小程序】-- 页面导航 -- 导航传参(二十四)

热门文章

最新文章