小程序 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 ...
随机推荐
- selenium+java二元素定位
页面元素定位是自动化中最重要的事情, selenium Webdriver 提供了很多种元素定位的方法. 测试人员应该熟练掌握各种定位方法. 使用最简单,最稳定的定位方法. 自动化测试步骤 定位元素 ...
- Spring框架IOC和AOP的实现原理(概念)
IoC(Inversion of Control) (1). IoC(Inversion of Control)是指容器控制程序对象之间的关系,而不是传统实现中,由程序代码直接操控.控制权由应用代码中 ...
- [JavaScript] 表单验证不通过不提交的JS写法
主要是本世纪初的写法.<script> function validateForm(f) { if (f.name.value == "") { alert(" ...
- SYN-flood攻击
原理:当TCP三次握手进行第一次握手时,客户端向服务端发送SYN请求报文,第二次握手服务端会返回一个SYN+ACK的一个确认报文,syn-flood攻击就发生在第三次握手,当客户端不去回应服务端的SY ...
- windows系统下安装rabbitmq教程
1.简介 安装rabbitmq需要下载软件Erlang语言开发包和RabbitMQ文件包.文件最新下载地址如下: Erlang: https://www.erlang.org/ RabbitMQ: h ...
- 数学运算比IF要快
问题 虽然很早就知道,CPU在处理 if 这样的判断语句时,使用了预测的技术,所以如果条件总是一个结果,效率就很好.反过来说,如果你使用数学运算避免 if 判断,那么就意味着性能一定比 if 要好. ...
- 后缀html和htm文件的区别
后缀html和htm文件的区别: (1)如果一个网站有index.html和index.htm,默认情况下,优先访问.html. (2).htm后缀是为了兼容以前的dos系统8.3的命名规范
- python小总结2(time,os)
一.时间模块 1.1 Time time.time():获取时间戳,结果为一个浮点数 time.gtime():获取时间的元组形式 time.localtime():获取的是当地时间 time.mkt ...
- spring 中IOC实验(一)
软件151 王帅 1.三个类,Human(人类)是接口,Chinese(中国人)是一个子类,American(美国人)是另外一个子类. 代码如下: package cn.com.chengang.s ...
- 小学四则运算编程(c#)
---恢复内容开始--- 预计耗时与实际耗时: 代码基本完善后,对代码进行了性能改善,使用递归并减少了一些不必要的代码. 项目分析:二年级以下无乘除,四年级以下无小数 性能: 类图: 通过这次个人项目 ...