微信开发js跳转

2017-01-04 14:17:20 u010635353 阅读数 50576

功能点:页面跳转
本文基于微信小程序公测版,IDE:微信开发者工具 0.11.122100

这里记录一下小程序中页面跳转的方式。

从跳转的方式(或说成打开新页面的方式)来说大致可分为:请求转发请求重定向TAB页跳转(有过web经验的话,应该很清楚两种方式的区别),部分出自官方文档。

wx.navigateTo(OBJECT)

保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面。

这里写图片描述

注意点:小程序中要求页面的层级最多只能有五层,因为这种方式保留当前页面,也就是说以这种方式跳转页面,最多只能打开5个页面。


wx.redirectTo(OBJECT)

关闭当前页面,跳转到应用内的某个页面。

这里写图片描述


wx.switchTab(OBJECT)

跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面

这里写图片描述


wx.navigateBack(OBJECT)

关闭当前页面,返回上一页面或多级页面。可通过 getCurrentPages()) 获取当前的页面栈,决定需要返回几层。

这里写图片描述

注意点:
1.这里需要强调一下小程序中以堆栈形式记录页面。每一个以wx.navigateTo(OBJECT) 方式跳转的页面都会被压入堆栈,但是以wx.redirectTo(OBJECT) 打开的页面则不会。借用一下官方的例子,很清晰明了。

// 此处是A页面
wx.navigateTo({
  url: 'B?id=1'
})

// 此处是B页面
wx.redirectTo({
  url: 'C?id=1'
})

// 在C页面内 navigateBack,将返回A页面
wx.navigateBack()

**2.**wx.navigateTo 和 wx.redirectTo 不允许跳转到 tabbar 页面,只能用 wx.switchTab 跳转到 tabbar 页面

3. 跳转的url是页面的路径(非Tab页面),如需传递参数,要放在路径之后,以 分隔,参数键与参数值用=相连,不同参数用&分隔


从写的位置来说大致可分为两种,一种是在页面wxml文件中以标签的形式,另一种是代码的形式(这种上面已经列举出来了,此处不再赘述)。

组件navigator

页面链接。

这里写图片描述

通过open-type 可以指定跳转的方式是请求转发,请求重定向还是TAB页跳转。(效果同上面js代码的效果,此处不再赘述)


这里记录一个笔者遇到的坑,坑了我一晚上。。。也是很无语。虽然不是页面跳转的问题,但是也有一定联系,姑且记在这里。

本来我的项目首页有两个tab,需要在其中一个列表页中点击一个item进入详情,查看地图。然而,不管我怎么尝试,文档撸了N遍,都还是没解决。

先贴出异常

这里写图片描述

上面报错的aboutUs是首页的其中另一个tab,只是一个展示页,没有操作,所以虽然报错了,然而我并没有管。问题出在我跳转pages/map(详情的地图)的时候,提示我如上最后一行的错误。

Page[pages/map/map] not found. May be caused by: 1. Forgot to add page route in app.json. 2. Invoking Page() in async task.

按照笔者以前android和后台的经验,一直把问题定位到map页的本身。撸了N久都没解决。后来心血来潮把aboutUs的异常解决了,发现问题奇迹般的解决了。

问题出在,aboutUs页,因为只是一个静态页,并没有操作,所以aboutUs.js是空的,问题就出在这。

在小程序中,即时不需要写js的代码,那js文件中也必须要加上Page({})

2018-03-08 13:48:50 qq_32113629 阅读数 164214

个人类型海外类型的小程序不支持 web-view 标签  也就是说个人申请的小程序,就别想跳转了!!!!

1.开发的时候,我们难免碰到要跳转到其他网页中去那该怎么实现呢?

2.例如我想点击一个按钮,跳转到百度(百度的网页还是在小程序中打开) 

3.wxml

   1. index.wxml   (按钮页面)

<view class='wrapper'>
    <button class='wepay' bindtap='goBaidu'>点击跳转</button>
  </view>

   2.out.wxml  (百度页面),

<web-view src="https://www.baidu.com/"></web-view>
//放心你没有看错就这么一行就行了//把你要跳转的界面用src 就可以了,以后要跳转到哪,src里面地址就写哪!

    3.别忘了,要在app.json中配置一下路由,

"pages":[
    "pages/a/a",
    "pages/b/b"
  ],

    电脑上是可以跳转的,体验版的话,在手机上是不好使的,除非你已经在小程序后台完成了配置域名,但是!!!!

注意!!这是顶级注释请看第四条


4.需要配置业务域名并上传验证文件:

这个是我本人的,前端技术QQ交流群,有不会的问题,可以在在群里面问

如果文章对你有帮助  希望各位可以给我的群 冲冲人气 

4.1校验文件需要放在你要跳转到的网站的根目录下面才可以!!!也就是说你想跳转到别人网站网页里面 需要得到别人的同意!!

那比如这个跳转到www.baidu.com 就是行不通的了,只能是自己在开发的时候玩玩(在开发者工具中点设置-项目设置-在不校验合法域名、web-view(业务域名)、TLS 版本以及 HTTPS 证书 前面打上对勾),在正式发布时候肯定是行不通的!!!

4.2那你想跳转到自己的网站中就需要配置域名、下载校验文件了!!再次强调 个人类型与海外类型的小程序暂不支持使用web-view

进入到小程序后台 https://developers.weixin.qq.com   设置-开发设置 -业务域名

4.3web-view 的 src可以是可打开关联的公众号的文章地址! (打开公众号这块也是个坑)

5.index.js

goBaidu:function(){
    wx.navigateTo({
      url:'../out/out', //
      success:function() {

      },       //成功后的回调;
      fail:function() { },         //失败后的回调;
      complete:function() { }      //结束后的回调(成功,失败都会执行)
 })

6.效果图

这是我的微信公众号

不定期更新前端知识

 

2018-01-29 14:47:52 mmd1234520 阅读数 13284
这篇文章主要介绍了微信小程序 跳转页面的两种方法详解的相关资料,需要的朋友可以参考下

微信小程序 跳转页面

小程序页面有2种跳转,可以在wxml页面或者js中:

1,在wxml页面中:

[js] view plain copy
  1. <navigator url="../index/index">跳转到新页面</navigator>  
  2. <navigator url="../index/index" open-type="redirect">在当前页打开</navigator>  
  3. <navigator url="../index/index" open-type="switchTab">切换到首页Tab</navigator>  

2,在js页面中:

  

【注意】此处注意两个关键词 “应用内的页面” 和 “tabBar页面”。  app.json文件中tabBar中注册过的tab页,即为“tabBar页面”,非tabBar中注册占用的页面即为“应用内的页面” 。 如下图:home页面为“应用内的页面”,index和logs页面则为 “tabBar页面”。

 

转自:http://blog.csdn.net/qq_23174861/article/details/78626949

2018-11-23 10:33:46 shirln 阅读数 24202

推荐阅读:

假设我们要实现的功能是从小游戏A跳转到小游戏B
对于小游戏A:
(1)在platform.ts中添加代码如下:
在这里插入图片描述

/** 
 * 平台数据接口。
 * 由于每款游戏通常需要发布到多个平台上,所以提取出一个统一的接口用于开发者获取平台数据信息
 * 推荐开发者通过这种方式封装平台逻辑,以保证整体结构的稳定
 * 由于不同平台的接口形式各有不同,白鹭推荐开发者将所有接口封装为基于 Promise 的异步形式
 */
declare interface Platform {

    getUserInfo(): Promise<any>;

    login(): Promise<any>;
    //调转
    navigateToMiniProgram():Promise<any>;

}

class DebugPlatform implements Platform {
    async getUserInfo() {
        return { nickName: "username" }
    }
    async login() {
    }
    async navigateToMiniProgram(){

    }
    
}
if (!window.platform) {
    window.platform = new DebugPlatform();
}
declare let platform: Platform;

declare interface Window {

    platform: Platform
}

(2)在main.ts中定义一个跳转按钮并调用platform.ts的方法
在这里插入图片描述

	//跳转
        let stepBtn = new eui.Button();
        stepBtn.label = "跳转";
        stepBtn.x=550;
        stepBtn.y=550;
        this.startPanel.addChild(stepBtn);
        stepBtn.addEventListener(egret.TouchEvent.TOUCH_TAP, ()=>{
            platform.navigateToMiniProgram();
        }, this);

(3)发布成微信小程序,使用微信开发工具打开,在platform.js中添加代码如下:
在这里插入图片描述

navigateToMiniProgram() {
    return new Promise((resolve, reject) => {
      wx.navigateToMiniProgram({
        appId: 'wxcaa5b0bc1f60c1a1',
        path: '',
        extraData: {},
        envVersion: 'develop',
        success(res) {
          // 打开成功
          console.log("跳转成功了。。。");
        }
      })
    })
  }

注意: appId填将要跳转到的微信小游戏的ID
(4)在game.json中配置需要跳转的小程序的AppId,如下:
在这里插入图片描述

"navigateToMiniProgramAppIdList": [
        "wx423487eff0d25e65",
        "wx0706950c2e35f971",
        "wxcaa5b0bc1f60c1a1",
        "wx57652bd7c9253521",
        "wxccd61b9d7ccaae4d"
    ]
2019-06-12 19:19:29 weixin_37828719 阅读数 1713

方法一:WXML页面实现

1.<navigator url = "/pages/aaa/aaa">跳转到新页面</navigator>

2.<navigator url = "/pages/aaa/aaa" open-type = "redirect">跳转到新页面</navigator>

3.<navigator url = "/pages/aaa/aaa" open-type = "switchTab">跳转到新页面</navigator>

 

方法二:js页面实现

bindViewTab:function(){

    wx.navigateTo({    //保留当前页面,跳转到应用内的某个页面(最多打开5个页面,之后按钮就没有响应的)

         url:"/pages/aaa/aaa"

    })

 

   wx.redirectTo({      //关闭当前页面,跳转到应用内的某个页面(这个跳转有个坑,就是跳转页面后页面会闪烁一下,完全影响了我自己的操作体验,太缺德了。)

          url:"/pages/aaa/aaa"

     })

  wx.reLaunch({     //跳转至指定页面并关闭其他打开的所有页面(这个最好用在返回至首页的的时候)

    url:'/pages/index/index'

  })

    wx.switchTab({    //跳转到tabBar页面,并关闭其他所有tabBar页面

           url:"/pages/aaa/aaa"

     })

 

    wx.navigateBack({     //返回上一页面或多级页面

          delta:1

    })

}