需要在H5页面被作出判断和处理  点击事件发生时跳转到小程序内部页面

1.引入小程序提供的JS

  1. <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>

2.通常情况下一个H5页面可能应用到多个活动场景中 并不止在小程序中使用

这时候就需要在小程序里面加入一个参数作为判断 (以下代码中参数名为channel=‘wechat’)

小程序中:

  1. onLoad: function (options) {
  2. var url = ''; //此处的url是你的H5页面的网址
  3. if(url.indexOf('?')>0){ //在这儿添加参数 以便于进入H5页面时好做判断
  4. this.url = url + '&channel=wechat'
  5. }else{
  6. this.url = url + '?channel=wechat'
  7. }
  8. this.setData({
  9. url: this.url
  10. })
  11. },
  1. <web-view src="{{ url }}"></web-view>

H5页面中:

  1. function GetQueryString(name) { //截取链接中的参数
  2. var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
  3. var r = window.location.search.substr(1).match(reg);
  4. if (r != null) return unescape(r[2]); return null;
  5. }
  6. var channel = GetQueryString("channel");
  7. $(document).on('click', '.go', function() {if (channel && channel == 'wechat') {
  8. wx.miniProgram.navigateTo({
  9. url: '', //此处的url是你小程序里面页面的路由
  10. });
  11. }
  12. });

3.如果该H5页面只用在小程序里面 则不需要做判断了 直接跳转

H5页面中:

  1. $(document).on('click', '.go', function() {
  2. wx.miniProgram.navigateTo({
  3. url: '', //此处的url是你小程序里面页面的路由
  4. });
  5. });

小程序 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. angular + socket.io+nodejs

    一.服务器端: 基本和nodejs工程相同 https://www.cnblogs.com/xuanmanstein/p/10509445.html 安装socket.io npm i --save ...

  2. 一步一步搭建vue项目

    1 安装步骤 创建一个目录,我们这里定义为Vue 在Vue目录打开dos窗体,输入如下命令:vue create myproject 选择自定义   4. 先选择要安装的项目,我们这里选择4个   5 ...

  3. 键盘坏了几个键位之后,linux上的remap方法

    Use xev command to find the keycode xmodmap -pke |more To Change keymapping for this Laptop: 我是日文键盘, ...

  4. 【期望dp】绵羊跳弹簧

    [期望dp] 绵羊跳弹簧 >>>>题目 [题目] T 组数据.对于每一组数据,有n+1 个格子从0 到n 标号,绵羊从0 号结点开始,每次若在 x 位置掷骰子,令掷出的数为nu ...

  5. POJ-3450 Corporate Identity (KMP+后缀数组)

    Description Beside other services, ACM helps companies to clearly state their “corporate identity”, ...

  6. PHP的json_encode()函数与JSON对象

    一.问题描述 这周搬砖的时候,前端通过ajax获取后端的数据后,照例用 对象.属性 的方式取值,然而结果总是总是不能如预期般展示在页面上. 先写个 demo 还原下场景:选中一个下拉框列表选项后,会在 ...

  7. 双目深度估计传统算法流程及OpenCV的编译注意事项

    起因: 1. 双目立体视觉中双目深度估计是非常重要且基础的部分,而传统的立体视觉的算法基本上都在opencv中有相对优秀的实现.同时考虑了性能和效率.因此,学习使用opencv接口是非常重要的. 2. ...

  8. leetcode 230 二叉搜索树中第K小的元素

    方法1:统计每个节点的子节点数目,当k>左子树节点数目时向左子树搜索,k=左子树节点数目时返回根节点,否则向右子树搜索. 方法2:递归中序遍历,这里开了O(n)空间的数组. class Solu ...

  9. js生成二维码 qrcode

    js生成二维码 QRcode npm 地址 1.安装qrcode //在项目文件夹中执行: npm install --save qrcode //或者,将其全局安装以使用qrcode命令行来保存qr ...

  10. 常用js函数开始收集~

    获取样式: var getStyle=function(ele,atr){ return typeof(ele)=='undefined'?0: ele.currentStyle? ele.curre ...