小程序 web-view 嵌套的网页跳转到小程序内部页面 实现无缝连接
需要在H5页面被作出判断和处理 点击事件发生时跳转到小程序内部页面
1.引入小程序提供的JS
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
2.通常情况下一个H5页面可能应用到多个活动场景中 并不止在小程序中使用
这时候就需要在小程序里面加入一个参数作为判断 (以下代码中参数名为channel=‘wechat’)
小程序中:
onLoad: function (options) {
var url = ''; //此处的url是你的H5页面的网址
if(url.indexOf('?')>0){ //在这儿添加参数 以便于进入H5页面时好做判断
this.url = url + '&channel=wechat'
}else{
this.url = url + '?channel=wechat'
}
this.setData({
url: this.url
})
},
<web-view src="{{ url }}"></web-view>
H5页面中:
function GetQueryString(name) { //截取链接中的参数
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if (r != null) return unescape(r[2]); return null;
}
var channel = GetQueryString("channel");
$(document).on('click', '.go', function() {if (channel && channel == 'wechat') {
wx.miniProgram.navigateTo({
url: '', //此处的url是你小程序里面页面的路由
});
}
});
3.如果该H5页面只用在小程序里面 则不需要做判断了 直接跳转
H5页面中:
$(document).on('click', '.go', function() {
wx.miniProgram.navigateTo({
url: '', //此处的url是你小程序里面页面的路由
});
});
小程序 web-view 嵌套的网页跳转到小程序内部页面 实现无缝连接的更多相关文章
- 微信小程序web-view(webview) 嵌套H5页面 唤起微信支付的实现方案
场景:小程序页面有一个web-view组件,组件嵌套的H5页面,要唤起微信支付. 先讲一下我的项目,首先我是自己开发的一个H5触屏版的商城系统,里面含有购物车,订单支付等功能.然后刚开始,我们公众号里 ...
- 小程序web开发框架-weweb介绍
weweb是一个兼容小程序语法的前端框架,你可以用小程序的写法,来写web单面应用.如果你已经有小程序了,通过它你可以将你的小程序运行在浏览器中.在小程序大行其道的今天,它可以让你的小程序代码得到最大 ...
- 一套代码小程序&Web&Native运行的探索05——snabbdom
接上文:一套代码小程序&Web&Native运行的探索04——数据更新 对应Git代码地址请见:https://github.com/yexiaochai/wxdemo/tree/ma ...
- 一套代码小程序&Web&Native运行的探索04——数据更新
接上文:一套代码小程序&Web&Native运行的探索03 对应Git代码地址请见:https://github.com/yexiaochai/wxdemo/tree/master/m ...
- 一套代码小程序&Web&Native运行的探索02
接上文:一套代码小程序&Web&Native运行的探索01,本文都是一些探索性为目的的研究学习,在最终版输出前,内中的内容可能会有点乱 参考: https://github.com/f ...
- php程序开发之实现网页跳转
php程序开发之实现网页跳转的三种方式 2017年04月16日 20:44:14 阅读数:3352 PHP目前是用来开发WEB项目的首选语言.Web项目中,从一个网页跳转到另一个网页是最常用的技术之一 ...
- 小程序 web 端实时运行工具
微信小程序 web 端实时运行工具 https://chemzqm.github.io/wept/
- 一套代码小程序&Web&Native运行的探索06——组件系统
接上文:一套代码小程序&Web&Native运行的探索05——snabbdom 对应Git代码地址请见:https://github.com/yexiaochai/wxdemo/tre ...
- 一套代码小程序&Web&Native运行的探索03——处理模板及属性
接上文:一套代码小程序&Web&Native运行的探索02 对应Git代码地址请见:https://github.com/yexiaochai/wxdemo/tree/master/m ...
随机推荐
- time to set up Goals
Function Goal Training for new guys, meanings who takes part of QA jobs and make other QA members g ...
- Ant Design of React 框架使用总结1
一. 为什么要用UI 框架 统一了样式交互动画 . Ui框架会对样式,交互动画进行统一,保证了系统风格完整统一,不像拼凑起来的. 兼容性 ,不是去兼容IE 6 7 8那些低版本浏览器,而是对主流的标 ...
- 一个可以配置阴影方向和颜色的类 CardView 控件 SCardView
一.控件简述 今天给大家推荐一个控件 SCardView ,看名字就很容易才出来它其实就是一个 CardView .把它拿出来,是因为它解决了一些 CardView 无法实现的需求以及简化了 Card ...
- git 执行pull错误如何撤销
比如你当前所在的空间是trunk,但是执行了git pull origin branches,这时需要回滚回去,可以用一下步骤: 1.运行git reflog命令查看你的历史变更记录,如下: 69fd ...
- 现代 PHP 新特性 —— 生成器入门(转)
原文链接:blog.phpzendo.com PHP 在 5.5 版本中引入了「生成器(Generator)」特性,不过这个特性并没有引起人们的注意.在官方的 从 PHP 5.4.x 迁移到 PHP ...
- cmd非运行完再保存,结果显示&保存同时进行
#coding:utf-8 """ fps信息获取到文件 """ import sys import subprocess class Lo ...
- MongoVUE的table view视图不显示列标题
近来项目用到mongodb,遂装了个MongoVUE,当然是破解版的. 但是发现个小问题,就是table view视图下列标题文字标签不见了,Find的执行按钮也是空白一片: 开始以为破解的不彻底,重 ...
- 使用js如何设置、获取盒模型的宽和高
第一种: dom.style.width/height 这种方法只能获取使用内联样式的元素的宽和高. 第二种: dom.currentStyle.width/height 这种方法获取的是浏览器渲染以 ...
- Web程序报错:Error instantiating servlet
---恢复内容开始--- web程序的前期准备工作都做好了,也就是web程序的目录都建好了,在WEB-INF文件夹下建立了classes文件夹,用于存放编好的.class文件.我想这两个类应该都在相应 ...
- WDA基础十六:ALV的颜色
这里介绍三种类型的颜色:列的背景色,单元格的背景色,单元格文本的颜色. 1.给ALV结构添加颜色控制字段: 三个字段都是同一类型:WDY_UIE_LIBRARY_ENUM_TYPE COL_BACKG ...