精华内容
下载资源
问答
  • //保留当前页面跳转到应用内的某个页面(最多打开5个页面,之后按钮就没有响应的) wx.navigateTo({ url:"/pages/aaa/aaa" }) //跳转到tabBar页面,并关闭其他所有tabBar页面 wx.switchTab({ url:"/pages/aaa/...

    一、小程序内跳转
    1.普通跳转

    //保留当前页面,跳转到应用内的某个页面(最多打开5个页面,之后按钮就没有响应的)
    wx.navigateTo({    
    url:"/pages/aaa/aaa"
    })
    
    //跳转到tabBar页面,并关闭其他所有tabBar页面
    wx.switchTab({    
    url:"/pages/aaa/aaa"
    })
    
    //关闭当前页面,跳转到应用内的某个页面(这个跳转有个坑,就是跳转页面后页面会闪烁一下)
    wx.redirectTo({      
    url:"/pages/aaa/aaa"
    })
    
    //跳转至指定页面并关闭其他打开的所有页面(这个最好用在返回至首页的的时候)
    wx.reLaunch({     
    url:'/pages/index/index'
    })
    

    2.指定页面返回

    //返回页面跳转
    //注意:调用 navigateTo 跳转时,调用该方法的页面会被加入堆栈,而 redirectTo 方法则不会
    
    // 此处是A页面
    wx.navigateTo({
      url: 'B?id=1'
    })
     
    // 此处是B页面
    wx.navigateTo({
      url: 'C?id=1'
    })
     
    // 在C页面内 navigateBack,将返回A页面
    wx.navigateBack({
      delta: 2 //返回的层数
    })
    

    3.页面跳转并传参

    wx.navigateTo({
        url: '/pages/Deposit/Deposit?merchantId=' + this.data.coach.coachId,
    })
    
    //取值用option.type
     onLoad: function (options) {
        this.setData({
          "machantId": options.machantId,
           "merchantRecordId":options.merchantRecordId
        })
      }
    

    二、微信H5跳转小程序
    H5页面必须加入以下script

    <script src="https://test.com/jquery.js"></script>
    <script src="https://res.wx.qq.com/open/js/jweixin-1.3.0.js"></script>
    <script>
    $(function(){
      $('#btn').on('click',function(s) {
        wx.miniProgram.navigateTo({
          url:'/pages/index/index?id=xxx',
          success: function(){
              console.log('success')
          },
          fail: function(){
              console.log('fail');
          },
          complete:function(){
              console.log('complete');
          }
    
          });
      });
    });
    </script>
    
    展开全文
  • 工作可能有这样的需求,就是手机浏览器中加载一个h5页面,点击可以打开某一个APP,比如微信等。这时候通常都是采用URL Scheme的方式进行配置跳转。 那么什么是URL Scheme呢? 简单说:它是一个页面跳转协议。 2、 ...

    前言

    工作可能有这样的需求,就是手机浏览器中加载一个h5页面,点击可以打开某一个APP,比如微信等。这时候通常都是采用URL Scheme的方式进行配置跳转。
    那么什么是URL Scheme呢?
    简单说:它是一个页面跳转协议。

    URL Scheme协议

    URL Scheme是一种页面内跳转协议,是一种非常好的实现机制,通过定义自己的scheme协议,可以非常方便跳转app中的各个页面;通过scheme协议,服务器可以定制化告诉App跳转那个页面,可以通过通知栏消息定制化跳转页面,可以通过H5页面跳转页面等。

    苹果手机中的APP都有一个沙盒,APP就是一个信息孤岛,相互是不可以进行通信的。但是iOS的APP可以注册自己的URL Scheme,URL Scheme是为方便app之间互相调用而设计的。

    URL Scheme必须能唯一标识一个APP,如果你设置的URL Scheme与别的APP的URL Scheme冲突时,你的APP不一定会被启动起来。因为当你的APP在安装的时候,系统里面已经注册了你的URL Scheme。
    完整的URL Scheme格式:

    stars://host:8088/pageDetail?pageId=102
    

    1.stars:表示Scheme协议名称,可以自定义
    2.host: 表示协议的跳转地址名称,通常和APP中配置的名称是一直的
    3.pageDetail:表示跳转的具体页面名称
    4.pageId:表示传递的参数
    5.8088:通常表示跳转地址的端口名称

    具体使用配置

    Android配置

    <activity
    
             ...
    
                <!--要想在别的App上能成功调起App,必须添加intent过滤器-->
                <intent-filter>
                    <!--协议部分,随便设置-->
                    <data
                        android:host="host"
                        android:path="/pageDetail"
                        android:port="8088"//可以不要
                        android:scheme="stars"/>
                    <!--下面这几行也必须得设置-->
                    <!--表示该页面可以被隐式调用,必须加上该项-->
                    <category android:name="android.intent.category.DEFAULT"/>
                    <action android:name="android.intent.action.VIEW"/>
                    <!--如果希望该应用可以通过浏览器的连接启动,则添加该项-->
                    <category android:name="android.intent.category.BROWSABLE"/>
                </intent-filter>
            </activity>
    

    IOS配置

    只需要配置info.plist 文件,只需要配置URL Schemes就可以了,identifier是可选配置
    1040068-20181130105211704-1793990249.png

    注意事项

    正常情况下,以上配置后,就可以正常进行跳转了,但是在安卓上,还需要进行一步配置,如果你的应用被其注册过的外部 url 调起,如果要在现有的 MainActivity 中监听传入的 intent,那么需要在AndroidManifest.xml中将 MainActivity 的launchMode设置为singleTask

    <activity
      android:name=".MainActivity"
      android:launchMode="singleTask">
    

    另外在Android端如果是在APP未启动情况下,还需要进行一下配置,才可以拉起APP后跳转至指定页面。

    if(IS_ANDROID){
          Linking.getInitialURL().then(url=>{
            console.log('---url---',url)
            if(url) {
              handleOpenWithURL(url)
            }
          })
        }
    

    官方文档有说明
    Handling Deep Links
    There are two ways to handle URLs that open your app.

    1. If the app is already open, the app is foregrounded and a Linking event is fired
    You can handle these events with Linking.addEventListener(url, callback).

    2. If the app is not already open, it is opened and the url is passed in as the initialURL
    You can handle these events with Linking.getInitialURL(url) – it returns a Promise that resolves to the url, if there is one.

    觉得文章不错的,给我点个赞哇,关注一下呗!
    技术交流可关注公众号【君伟说】,加我好友一起探讨
    交流群:wayne214(备注技术交流)邀你入群,抱团学习共进步

    展开全文
  • H5实现页面内跳转页面

    千次阅读 2019-09-27 10:11:04
    <!DOCTYPE html><html><body> <iframe src="/example/html/demo_iframe.html" name="iframe_a"></iframe> <p><a href="http://www.w3school.com.cn" target="iframe_...

    <!DOCTYPE html>
    <html>
    <body>

    <iframe src="/example/html/demo_iframe.html" name="iframe_a"></iframe>

    <p><a href="http://www.w3school.com.cn" target="iframe_a">W3School.com.cn</a></p>

    <p><b>注释:</b>由于链接的目标匹配 iframe 的名称,所以链接会在 iframe 中打开。</p>

    </body>
    </html>

     

    原文来源:http://www.w3school.com.cn

    转载于:https://www.cnblogs.com/snow-zhang/p/10431483.html

    展开全文
  • H5跳转到APP指定页面

    万次阅读 2017-12-22 11:51:01
    1.设置urlschemes urlschemes尽量设一个唯一的字符串,例如可以设为:iOS+公司英文名+ 项目工程名 ...2.跳转到指定页面 在使用iOSTencentTest://打开app会调用AppDelegate的代理方法 -(BOOL)applicat...

    1.设置urlschemes

    adsd
    urlschemes尽量设一个唯一的字符串,例如可以设为:iOS+公司英文名+ 项目工程名
    比如我的设为iOSTencentTest,在浏览器中输入地址iOSTencentTest://即可跳转到我的app

    2.跳转到指定页面

    在使用iOSTencentTest://打开app会调用AppDelegate的代理方法

    -(BOOL)application:(UIApplication *)app openURL:(NSURL *)url options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options

    跳转指定页面在该方法中操作
    iOSTencentTest://后面是可以添加参数的,例如iOSTencentTest://goodsDetails?id=xxxxx
    goodsDetails可直接通过url.host获取
    id=xxxxx 参数可直接通过url.query获取
    可以根据自身需求去设置不同的host和参数。
    这里写图片描述

    h5那边只需要执行:

    window.location.href = 'iOSTencentTest://goodsDetails?id=xxxxx'

    附:

    //获取Window当前显示的ViewController
    - (UIViewController*)currentViewController{
        //获得当前活动窗口的根视图
        UIViewController* vc = [UIApplication sharedApplication].keyWindow.rootViewController;
        while (1)
        {
            //根据不同的页面切换方式,逐步取得最上层的viewController
            if ([vc isKindOfClass:[UITabBarController class]]) {
                vc = ((UITabBarController*)vc).selectedViewController;
            }
            if ([vc isKindOfClass:[UINavigationController class]]) {
                vc = ((UINavigationController*)vc).visibleViewController;
            }
            if (vc.presentedViewController) {
                vc = vc.presentedViewController;
            }else{
                break;
            }
        }
        return vc;
    }
    //NSString类别方法
    //通过url.query获取参数字符 再分成字典 
    -(NSMutableDictionary *)getURLParameters
    {
        if (!self.length) {
            return nil;
        }
        NSMutableDictionary  *params = [NSMutableDictionary   dictionary];
        if ([self containsString:@"&"]) {
            NSArray *urlComponents = [self componentsSeparatedByString:@"&"];
    
            for(NSString *keyValuePair in urlComponents) {
    
                //生成key/value
                NSArray *pairComponents = [keyValuePair componentsSeparatedByString:@"="];
                NSString *key = [pairComponents.firstObject stringByRemovingPercentEncoding];
                NSString*value = [pairComponents.lastObject stringByRemovingPercentEncoding];
    
                //key不能为nil
    
                if(key==nil|| value ==nil) continue;
    
                id existValue = [params valueForKey:key];
                if(existValue !=nil) {
                    //已存在的值,生成数组。
                    if([existValue isKindOfClass:[NSArray class]]) {
                        //已存在的值生成数组
                        NSMutableArray*items = [NSMutableArray arrayWithArray:existValue];
                        [items addObject:value];
                        [params setValue:items forKey:key];
                    }else{
                        //非数组
                        [params setValue:@[existValue,value]forKey:key];
                    }
    
                }else{
                    //设置值
                    [params setValue:value forKey:key];
                }
    
            }
        }else {
            //单个参数生成key/value
            NSArray *pairComponents = [self componentsSeparatedByString:@"="];
            if(pairComponents.count==1) {
                return nil;
            }
            //分隔值
            NSString *key = [pairComponents.firstObject stringByRemovingPercentEncoding];
            NSString *value = [pairComponents.lastObject stringByRemovingPercentEncoding];
            //key不能为nil
            if(key ==nil|| value ==nil)return nil;
            //设置值
            [params setValue:value forKey:key];
    
        }
        return params;
    }
    
    展开全文
  • H5跳转App的某个指定页面

    万次阅读 2018-08-07 23:25:54
    H5链接打开原生App并跳转到指定界面 因为目前项目需要先登录才能够使用,所以跳转时候需要判断是否登录,先上图,有图有真相 具体步骤如下: - 将清单文件中首页的exported属性改为true - 对首页添加intent ...
  • 1. jweixin-module 继承 Alt + c 调出终端输入以下代码 npm i jweixin-module -S 集成成功 出现如图所示文件夹 .../pages/index/index 为页面的路径 ?a=1为跳转携带的参数,可填写可不填写 完结散花~ ...
  • h5页面跳转微信小程序页面

    万次阅读 2019-05-15 17:33:37
    // 动态加载js脚本文件 h5跳转小程序 还需要加载一个微信的jssdk let script = document . createElement ( "script" ) ; script . type = "text/javascript" ; script . src = '...
  • h5页面跳转支付宝app指定页面

    万次阅读 2019-04-18 20:43:21
    废话少说 代码只有一行 <a href="alipays://platformapi/startapp?saId=10000007&...qrcode=https://render.alipay.com/p/h5/shebei/index.html?ct=ZJXL&__webview_options__=t...
  • 需求背景:因为业务需要从H5页面跳转到小程序页面,再从小程序页面返回到H5时,H5页面也要刷新 目前在这个问题时有很多思路,大概如下: 1.document.hidden判断页面是否可以见(此方法在Chrome浏览器下能够准备的...
  • H5上滑跳转页面的实现

    千次阅读 2019-04-19 22:09:58
    H5项目上滑跳转页面 框架:vue + jquery + bootstrap export default { name: 'home', data () { return { p_demo:'',//获取页面body节点,以便加载监听 start:"",//触摸开始的坐标点 move:"",//触摸移动实时...
  • H5跳转至APP指定页面

    千次阅读 2018-11-13 09:26:45
    1.设置urlschemes urlschemes尽量设一个唯一的字符串,例如可以设为:iOS+公司英文名+ 项目工程名  ...2.跳转到指定页面 在使用iOSTencentTest://打开app会调用AppDelegate的代理方法 -(BOOL)application...
  • H5页面跳转微信小程序

    千次阅读 2020-09-04 11:17:08
    首先非常开心,微信终于支持H5 HTML页面可以跳转到小程序。又多个一个扩展功能。 开始你的表演 官方API地址 https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html 一、配置“JS...
  • 需要跳转页面 ... &lt;view class="subject subject1" data-info='{{objecturl2}}' bindtap='toAdmm' &...//跳转h5页面链接 data:{ objecturl2: "https://....../action2/index.html...
  • taro小程序跳转h5页面

    千次阅读 2019-12-02 11:37:08
    微信小程序跳转h5页面 项目架构-tarojs+react+sass+微信开发者工具 项目使用taro官网上面的步骤构建起来的项目架构,之后生成微信端的小程序,由于项目与车险有关,需要多个渠道融合在一起,所以避免不了要调用...
  • H5 跳转web view固定页面

    千次阅读 2016-09-22 13:56:59
    截取跳转的url 解析json串,跳转native wv_news.setWebViewClient(new WebViewClient() {  @Override   public void onPageFinished(WebView view, String url) {  super.onPageFinished...
  • 小程序跳转到的H5页面,再跳转回跳小程序

    万次阅读 热门讨论 2018-08-21 10:00:14
    哈喽,大家上午好,萍子又来啦,本人最近一段时间一直在做小程序的项目,大大小小的坑真的是踩了不小,无奈本人啊还老是忘记自己究竟踩过那些坑,但是不得不说虽然小程序尚还有很多不完善的...H5跳转到小程序的方...
  • 主要介绍了小程序跳转H5页面的方法步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • h5页面跳转回小程序页面 失败

    千次阅读 2019-03-13 16:21:19
    在小程序里嵌套h5页面,然后从h5跳转回小程序,jwexin-1.3.2.js 也引入了,然后打印 wx 也可以打印出来,但是页面就是不跳转! 方法: navigateTo, redirecTo 只能打开非 tabBar页面! 所以当你发现跳转失败的...
  • 最近一个需求,app 内嵌的 h5 需要做任务,但是任务是在一个原生的页面中,产品的需求是如果用户做了任务,返回 h5 后,任务自动标识为完成,一般情况下我们这安卓都会有一些操作后的返回监听,但是这次比较特殊,需要前端来...
  • uni-app实现h5跳转app指定url或者app跳转app指定页面 以抖音为实例: openDouyin(url) { console.log(url); if (url.indexOf('v.douyin') == -1) { uni.showToast({ title: "非抖音链接...
  • 实战h5页面跳转到小程序

    千次阅读 2020-09-01 21:00:29
    实战h5页面跳转到小程序
  • h5跳转APP

    千次阅读 2018-07-19 10:36:05
    H5跳转到APP指定页面 微信浏览器打开知乎H5可以直接跳转到知乎APP iOS/Android 浏览器(h5)及微信中唤起本地APP 1. 设置urlschemes urlschemes尽量设一个唯一的字符串,例如可以设为:iOS+公司英文名+ ...
  • 微信内打开H5页面,选择跳转任意微信小程序
  • H5跳转app

    千次阅读 2019-05-23 08:59:20
    常常会看见H5网页跳转app,有app就打开,没有app就跳转到下载页面下载,所以博主在客户的要求下用H5完成了操作,接入外接平台 极光魔链(免费) 。
  • 小程序跳转h5页面.rar

    2019-12-18 15:19:29
    使用tarojs生成微信小程序,实现小程序跳转h5页,或者跳转小程序,需要配置需要跳转的小程序openid,之后再需要跳转页面将url带入webview中,动态概念webview中的url,并将webview中的url与视图关联,达到预期效果...
  • 前段时间做了在h5页面中打开或者下载app的功能 参考了咸鱼的提示短信短连接页面,西瓜视频页面,等等。 最后根据公司的市场和场景,计划从h5直接跳转到google应用市场的app详情页面。...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 31,099
精华内容 12,439
关键字:

h5跳转页面