小程序 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 ...
随机推荐
- sparkSQL脚本更改问题
相应的pom依赖文件 <dependencies> <!-- <dependency> <groupId>org.apache.storm</group ...
- Js拾忆
instanceof运算符:他是判断一个构造函数的prototype是否在对象的原型链上查找到 var a = new Array(); console.log(a instanceof Array) ...
- win2008 401 - 未授权: 由于凭据无效,访问被拒绝。解决方法
iiis中一个小配置的问题,“身份验证”里面“启用匿名身份验证”,编辑匿名身份验证凭据,选中下面的“应用程序池标识” 就可以了
- 剑指offer-01
好久没看java, 今天把 runoob 上的java基础简单过了一遍. 来吧,怎么整这个题目呢? 首先遇到的问题是java如何输入一个数组,而且这个数组并不知道长度是多少 用Scanner类 Sca ...
- English trip EM1 - PE2 My My name is... Teacher:Lamb Key: introduce myself
课上内容(Lesson) Lamb let us does introduce myself. Make a "hangman" game at warm-up . How to ...
- mysql5.7 timestamp错误:there can be only oneTIMESTAMP column with CURRENT_TIMESTAMP in DEFAULT or ON UPDATE
#1293 - Incorrect table definition; there can be only oneTIMESTAMP column with CURRENT_TIMESTAMP in ...
- TFLite基础知识
此基础知识仅为个人学习记录,如有错误或遗漏之处,还请各位同行给个提示. 概述 TFLite主要含有如下内容: (1)TFLite提供一系列针对移动平台的核心算子,包括量化和浮点运算.另外,TFLite ...
- Spark读写HBase
Spark读写HBase示例 1.HBase shell查看表结构 hbase(main)::> desc 'SDAS_Person' Table SDAS_Person is ENABLED ...
- _proto_理解
一个对象就是一个属性集合,并拥有一个独立的prototype(原型)对象.这个prototype可以是一个对象或 者null. 一个对象的prototype是以内部的[[Prototype]]属性来引 ...
- EF开发中EntityFramework在web.config中的配置问题
异常: 未找到具有固定名称“System.Data.SqlClient”的 ADO.NET 提供程序的实体框架提供程序.请确保在应用程序配置文件的“entityFramework”节中注册了该提供程序 ...