需要在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. Mysql推荐使用规范

    一.基础规范 使用InnoDB存储引擎支持事务.行级锁.并发性能更好.CPU及内存缓存页优化使得资源利用率更高 推荐使用utf8mb4字符集无需转码,无乱码风险, 支持emoji表情以及部分不常见汉字 ...

  2. 【编程语言】extern "C"让C++与C进行混合编程

    最近工作不算轻松,现在作为一个项目的负责人统一管理着前端.后端.设计.产品,身上肩负着不小责任,虽然有压力但是对于自己也是一种锻炼.同时自己也在负责整个后端的架构设计,虽然后端经验不是很多,但是自己正 ...

  3. linux命令 常用

    1.linux手动连接主机ssh '主机地址' 2.编辑 vi 查看i 编辑esc 退出编辑:wq 保存退出:q 直接退出 3. linux 防火墙 centOS7 firewall-cmd --sa ...

  4. 交换机telnet配置

    新开箱交换机开机配置Telnet需要三个步骤: 1.开启telnet是能:系统视图模式下输入命令: telnet server enable #开启telnet功能# 2.Telnet创建账号:aaa ...

  5. 支付-stripe

    国外三大支付paypal,braintree,stripe,有兴趣可以去了解一下他们的区别. 支付宝和paypal基本只需要发送charge信息请求交给后端做就ok了,那么stripe前端也只需要收集 ...

  6. Android 正则表达式实例

    editText正则表达式的使用 检查输入是否符合规则 import Android.app.Activity; import android.os.Bundle; import android.vi ...

  7. SWUST OJ(1038)

    顺序表中重复数据的删除 #include <iostream> #include <cstdlib> using namespace std; int main() { int ...

  8. php获取id

    private static function getClientIp() { if (getenv('HTTP_X_FORWARDED_FOR')) { $tmp = explode(',', ge ...

  9. linux环境下安装使用selenium Chrome

    安装驱动 http://chromedriver.storage.googleapis.com/index.html 下载对应chrome浏览器版本的驱动程序 chmod +x chromedrive ...

  10. chrome 和IE 上传的文件,在net 后台取值Request.Form.Files[0].FileName 的不同

    chrome 和IE 上传的文件,在net 后台取值Request.Form.Files[0].FileName 的不同 chrome 获得的是不含路径的纯文件名 IE获得的是含路径的文件名