需要在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 嵌套的网页跳转到小程序内部页面 实现无缝连接的更多相关文章

  1. 微信小程序web-view(webview) 嵌套H5页面 唤起微信支付的实现方案

    场景:小程序页面有一个web-view组件,组件嵌套的H5页面,要唤起微信支付. 先讲一下我的项目,首先我是自己开发的一个H5触屏版的商城系统,里面含有购物车,订单支付等功能.然后刚开始,我们公众号里 ...

  2. 小程序web开发框架-weweb介绍

    weweb是一个兼容小程序语法的前端框架,你可以用小程序的写法,来写web单面应用.如果你已经有小程序了,通过它你可以将你的小程序运行在浏览器中.在小程序大行其道的今天,它可以让你的小程序代码得到最大 ...

  3. 一套代码小程序&Web&Native运行的探索05——snabbdom

    接上文:一套代码小程序&Web&Native运行的探索04——数据更新 对应Git代码地址请见:https://github.com/yexiaochai/wxdemo/tree/ma ...

  4. 一套代码小程序&Web&Native运行的探索04——数据更新

    接上文:一套代码小程序&Web&Native运行的探索03 对应Git代码地址请见:https://github.com/yexiaochai/wxdemo/tree/master/m ...

  5. 一套代码小程序&Web&Native运行的探索02

    接上文:一套代码小程序&Web&Native运行的探索01,本文都是一些探索性为目的的研究学习,在最终版输出前,内中的内容可能会有点乱 参考: https://github.com/f ...

  6. php程序开发之实现网页跳转

    php程序开发之实现网页跳转的三种方式 2017年04月16日 20:44:14 阅读数:3352 PHP目前是用来开发WEB项目的首选语言.Web项目中,从一个网页跳转到另一个网页是最常用的技术之一 ...

  7. 小程序 web 端实时运行工具

    微信小程序 web 端实时运行工具 https://chemzqm.github.io/wept/

  8. 一套代码小程序&Web&Native运行的探索06——组件系统

    接上文:一套代码小程序&Web&Native运行的探索05——snabbdom 对应Git代码地址请见:https://github.com/yexiaochai/wxdemo/tre ...

  9. 一套代码小程序&Web&Native运行的探索03——处理模板及属性

    接上文:一套代码小程序&Web&Native运行的探索02 对应Git代码地址请见:https://github.com/yexiaochai/wxdemo/tree/master/m ...

随机推荐

  1. 在webstorm中配置sass的自动编译,并且可以指定编译后的css的目录.

    参考: WebStorm-2018.2-Help-Sass, Less, and SCSS 作者:tobyDing链接:https://www.jianshu.com/p/0fe52f149cab來源 ...

  2. Hadoop之运行模式

    Hadoop运行模式包括:本地模式.伪分布式以及完全分布式模式. 一.本地运行模式 1.官方Grep案例 1)在hadoop-2.7.2目录下创建一个 input 文件夹 [hadoop@hadoop ...

  3. Redis缓存之自定义CacheManager

    测试缓存:原理:CacheManager===Cache 缓存组件来实际给缓存中存储数据1,引入redis的starter,容器中保存的是RedisCacheManager2,RedisCacheMa ...

  4. android -------- RecyclerView的可(多个Item水平,垂直)滚动列表的实现

    RecyclerView的可滚动的列表实现,视图相邻的视图在屏幕上部分或完全可见(水平3个item,第一个和第三个显示一部分,第二个完全显示) 效果如图: 基于RecyclerView完成的(自定义控 ...

  5. 2>&1 什么意思

    1.  0 表示stdin标准输入 2.  1 表示stdout标准输出 3.   2表示stderr标准错误 意思是:把标准错误重定向到标准输出?

  6. Mock.js——数据模板定义

    1. 安装 npm install mockjs --save-dev //安装开发依赖 2. 数据模板定义规则 Mock.mock({...}) String: 'string|num1-num2' ...

  7. linux逻辑卷管理(LVM)

    1. 逻辑卷(LVM)的原理 LVM(Logical Volume Manager)逻辑卷管理 是在物理磁盘和文件系统的之间添加一个逻辑层,通过对底层物理磁盘的封装,以逻辑卷的方式呈现给上层应用,通过 ...

  8. JS 超类和子类

    此篇由别的大神的博客与<javascript高级程序设计>一书整理而来 原博客地址:https://hyj1254.iteye.com/blog/628555 看到javascript高级 ...

  9. EXCE 表格导入导出遇到问题(easypoi)

    使用Easypoi进行excel表格的导入导出遇到的问题: 1.导出时候打开文件一直遇乱码,主要的原因就是我在实体类没有进行给每个字段进行注解,就会导致每个字段找不到对应的汉字表头,所以一定不要忘了导 ...

  10. 20175212童皓桢 《Java程序设计》第一周学习

    学号 20175212-2 <Java程序设计>第1周学习总结 教材学习内容总结 1.安装了virtualbox 并配置了推荐的Ubuntu虚拟机 2.在Linux下通过shell,安装了 ...