微信小程序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


相关文章
|
3天前
|
API 开发者
微信native支付对接案例详解
本文详细介绍了微信Native支付的对接流程,包括效果展示、产品介绍、接入前准备、开发指引、API列表、支付通知等,并强调了只有通过微信认证的服务号才能对接微信支付。每年需支付300元认证费用。
16 3
|
24天前
|
移动开发 小程序
仿青藤之恋社交交友软件系统源码 即时通讯 聊天 微信小程序 App H5三端通用
仿青藤之恋社交交友软件系统源码 即时通讯 聊天 微信小程序 App H5三端通用
49 3
|
2月前
|
Web App开发 移动开发 前端开发
H5微信外支付(移动端浏览器)
H5微信外支付(移动端浏览器)
47 1
 H5微信外支付(移动端浏览器)
|
2月前
|
移动开发 小程序 数据可视化
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
320 3
|
2月前
|
缓存 数据可视化 Serverless
微信小游戏 案例一 像素飞机
微信小游戏 案例一 像素飞机
21 2
|
2月前
|
开发框架 前端开发 JavaScript
微信小游戏案例三 抓星星
微信小游戏案例三 抓星星
96 0
微信小游戏案例三 抓星星
|
2月前
|
JavaScript 小程序 前端开发
微信小程序 案例二 飞机大战
微信小程序 案例二 飞机大战
57 0
微信小程序 案例二 飞机大战
|
2月前
|
移动开发 小程序 数据可视化
一招学会DIY官网可视化设计支持导出微擎、UNIAPP、H5、微信小程序源码
一招学会DIY官网可视化设计支持导出微擎、UNIAPP、H5、微信小程序源码
47 2
|
3月前
|
前端开发 机器人 测试技术
【RF案例】Web自动化测试弹窗处理
在进行Web自动化测试时,常会遇到不同类型的弹窗,如ajax、iframe、新窗口及alert/Confirm等。这些弹窗可通过Selenium进行定位与处理。其中,ajax弹窗直接定位处理;iframe需先选中再操作;新窗口类似iframe处理;而alert/Confirm则需特殊方法应对。在Robot Framework中,需先定义并获取窗口后使用特定关键字处理。此外,还有部分div弹窗需在消失前快速定位。希望本文能帮助大家更好地处理各类弹窗。
54 6
【RF案例】Web自动化测试弹窗处理
|
3月前
|
前端开发 数据安全/隐私保护
【前端web入门第二天】03 表单-下拉菜单 文本域 label标签 按钮 【附注册信息综合案例】
本文档详细介绍了HTML表单的多种元素及其用法,包括下拉菜单(`&lt;select&gt;` 和 `&lt;option&gt;`)、文本域(`&lt;textarea&gt;`)、标签解释(`&lt;label&gt;`)、各类按钮(`&lt;button&gt;`)及表单重置功能、无语义布局标签(`&lt;div&gt;` 和 `&lt;span&gt;`)以及字符实体的应用。此外,还提供了一个完整的注册信息表单案例,涵盖个人信息、教育经历和工作经历等部分,展示了如何综合运用上述元素构建实用的表单。
【前端web入门第二天】03 表单-下拉菜单 文本域 label标签 按钮 【附注册信息综合案例】