2018-10-10 17:03:52 astonishqft 阅读数 1480
  • 微信支付开发-微信公众号开发12-微信开发php

    微信公众平台开发之微信支付开发是子恒老师《微信公众平台开发》视频教程的第12部。详细讲解了用php进行微信支付的开发。内容包含获取支付密钥,微信公众号支付开发,扫码支付,微信刷卡支付,异步处理支付结果等等。欢迎反馈,微信/QQ:68183131

    27830 人正在学习 去看看 秦子恒

微信小程序页面跳转方式的总结

前言

在微信小程序的开发中经常会遇到页面跳转的情况,有的在跳转的时候还需要在页面之间传递参数,今天整理下常见的几种页面跳转方式。

wx.navigateTo

保留当前页面,跳转到应用内的某个页面,但是不能跳到tabbar页面

示例1:

wx.navigateTo({
  url: `/pages/demo/demo?name=${name}`
})

需要注意的是,需要跳转的应用内非 tabBar 的页面的路径, 路径后可以带参数。参数与路径之间使用 ? 分隔,参数键与参数值用 =相连,不同参数用 & 分隔;如 'path?key=value&key2=value2'。这样在目标页面中就可以这样引用传入参数:

示例2:

Page({
  onLoad: function(option){
    console.log(option.query)
  }
})

传递的参数在跳转页面中的onLoad函数中通过option.query就可以获取到。

wx.redirectTo

这个方法和wx.navigateTo方法很相似,微信官方文档中是这么定义的:

关闭当前页面,跳转到应用内的某个页面,但是不允许跳转到 tabbar 页面。

从定义来看这两者差不多,一个是保留当前页面一个是关闭当前页面,这个要怎么理解呢?区别在于:

调用 navigateTo 跳转时,调用该方法的页面会被加入堆栈,而 redirectTo 方法则不会

也就是说如果用redirectTo方法从A页面跳到B页面,A页面会被删掉,从B页面调到C页面,B页面会被删掉,如果这个时候想从C页面回到B页面就没法返回了,因为B页面这个时候已经被销毁了。

wx.navigateBack

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

这个方法很简单,返回上一页面。但是需要注意的是,这个方法返回上一页面的时候是无法传参的,如果父页面想要获取子页面的参数怎么办呢?微信为我们提供了一个很强大的方法叫getCurrentPages

示例2:

    const pages = getCurrentPages();
    // let currpage = pages[pages.length - 1]; 
    let prevPage = pages[pages.length - 2];
    prevPage.setData({
      id
    });

通过getCurrentPages();获取当前的页面湛,let currpage = pages[pages.length - 1];pages[pages.length - 1];得到当前页面,let prevPage = pages[pages.length - 2]得到父页面,这样就可以直接在子页面中调用父页面的prevPage.setData方法来进行数据修改绑定了。

下面的是我的公众号二维码图片,欢迎关注。
在这里插入图片描述

2019-04-09 19:05:42 weixin_44112242 阅读数 114
  • 微信支付开发-微信公众号开发12-微信开发php

    微信公众平台开发之微信支付开发是子恒老师《微信公众平台开发》视频教程的第12部。详细讲解了用php进行微信支付的开发。内容包含获取支付密钥,微信公众号支付开发,扫码支付,微信刷卡支付,异步处理支付结果等等。欢迎反馈,微信/QQ:68183131

    27830 人正在学习 去看看 秦子恒

微信开发页面点击跳转wxml页面
主页

js页面
toLogin:function(){
wx.navigateTo({
url: ‘…/login/login’,//跳转页面的路径
})
},

2019-05-11 10:57:50 qq_41296039 阅读数 81
  • 微信支付开发-微信公众号开发12-微信开发php

    微信公众平台开发之微信支付开发是子恒老师《微信公众平台开发》视频教程的第12部。详细讲解了用php进行微信支付的开发。内容包含获取支付密钥,微信公众号支付开发,扫码支付,微信刷卡支付,异步处理支付结果等等。欢迎反馈,微信/QQ:68183131

    27830 人正在学习 去看看 秦子恒


为了不让用户在使用小程序造成困扰,微信小程序规定页面路径只能是五层。请尽量避免多层次的交互方式。:

一、navigator标签直接跳转

navigator标签是wxml的重要组成,类似于HTML中的a标签;相当于一个超链接的跳转

几个重要的属性

  • url 文件跳转的地址,后面跟的是相对路径
  • redirect 跳转了过去,文件不会回退
  • delta 回退的层数,默认是1
  • hover-class 指定点击时的样式类,当hover-class="none"时,没有点击态效果

参数与路径之间使用 ? 分隔,参数键与参数值用 = 相连,不同参数用 & 分隔;如 ‘path?key=value&key2=value2’
文件层次如下:
在这里插入图片描述

<navigator url='../demo2/demo2?name=小明&age=18'>小明</navigator>
<navigator url='../demo2/demo2?name=小红' redirect>跳转过去不回来了</navigator>

二、navigateTo跳转

  • url 跳转的路径和navigator的url使用方法一
  • success 接口调用成功后回调的函数
  • fail 接口调用失败回调的函数
  • complete 接口调用结束调用的函数(调用成功、失败都会执行)

.xml中的代码

<!--pages/demo1/demo1.wxml-->
<button type='prinary' bindtap='tapHandle'>跳转过去</button>

.js文件中的代码

  tapHandle:function()  {     
  // 点击按钮系统会自动执行这里的代码    
    console.log(111);     
     wx.navigateTo({      
       url: '../demo2/demo2',     
          // success:function(res) {},      
          // fail:function(){},       
          // complete:function(){}
 	 })  
  }

三、redirectTo跳转

关闭当前页面后,跳转到应用被的某个页面,但是不允许跳转到tabber页面上
使用方法跟navigateTo类似,效果相当于加上redirect 属性的navigator标签。
跟navigateTo类似的它同时也有success、fail、complete 三个属性但是使用方法和navigateTo完全一致。

具体的.js代码如下

        wx.redirectTo({       
           url: '../demo2/demo2',    
        })

四、navigateBack返回上一页

具体使用效果是关闭当前页面,返回上一些或者多级页面。
注意:如果跳转的同时原页面已经被关闭则不可使用,如redirectTo和携带redirect 属性的navigator标签这两种情况下返回上一层页面就不可使用,会直接出现方法工作的情况。
delta参数是navigateBack中最重要的参数,默认是1返回上一层,如果在方法中将delta设置成2则返回上两层,以此类推。
同时navigateBack也具备success,fail,complete三个参数,我们在这就不一一赘述了。

页面层次跟原来的一样,代码如下:

.wxml代码

<!--pages/demo2/demo2.wxml-->
<text>pages/demo2/demo2.wxml</text>
<button bindtap='backHandle'>返回</button>

.js代码

  backHandle:function ()
   {   
    //默认返回上一层   
    wx.navigateBack()  
    {      
   	 delta:1;    //如果delta不写默认是上一层
    }
   }
2016-10-12 10:53:11 qq_31383345 阅读数 131905
  • 微信支付开发-微信公众号开发12-微信开发php

    微信公众平台开发之微信支付开发是子恒老师《微信公众平台开发》视频教程的第12部。详细讲解了用php进行微信支付的开发。内容包含获取支付密钥,微信公众号支付开发,扫码支付,微信刷卡支付,异步处理支付结果等等。欢迎反馈,微信/QQ:68183131

    27830 人正在学习 去看看 秦子恒

  微信小程序的页面跳转,页面之间传递参数笔记.

CSDN微信小程序开发专栏,欢迎关注!

  先上demo图:

  


为了简化逻辑,所以index.wxml里面只写了两个text.既然是跳转,那就还有其他页面.

目录如下:


三个页面,但是代码很简单.直接上代码.

<span style="font-size:24px;"><!--index.wxml-->  
<view class="btn-area">  
  <navigator url="../navigator/navigator?title=我是navigate" >跳转到新页面</navigator>  
  <navigator url="../redirect/redirect?title=我是redirect" redirect>在当前页打开</navigator>  
</view></span>



index.wxml中的URL就是跳转的页面路径.上面代码中就是navigator目录下的navigator页面,title是参数.
navigator下redirect属性是值在当前页打开.如果不加redirect就是跳转到新页面.都可以携带参数.
navigator下redirect属性是值在当前页打开.如果不加redirect就是跳转到新页面.都可以携带参数.


<span style="font-size:24px;"><!--navigatort.wxml-->  
<view style="text-align:center"> {{title}} </view></span>

在navigatort.wxml中通过js代码可以获取到title,代码如下

//navigatort.js

Page({  
  onLoad: function(options) {  
    this.setData({  
      title: options.title  
    })  
  }  
})


<span style="font-size:24px;"><!--redirect.wxml-->  
<view style="text-align:center"> {{title}} </view></span>


<span style="font-size:24px;">//redirect.js  
Page({  
  onLoad: function(options) {  
    this.setData({  
      title: options.title  
    })  
  }  
})</span>



最后上两张跳转后的图.

1.跳转到新页面




2.在原来的页面打开



有没有发现一个细节,在原来的页面打开是不会出现返回按钮的,而跳转到新页面后会出返回按钮.

这是因为我写了两个页面.如果indexwxml不是一级页面,这里都会出现返回按钮.

当然返回的结果是不一样的:

1.跳转到新页面,返回是回到之前的页面;

2.在原来页面打开,返回是回到上一级页面.

微信开发文档

http://blog.csdn.net/qq_31383345

2017-09-20 11:25:16 qq_15873073 阅读数 1553
  • 微信支付开发-微信公众号开发12-微信开发php

    微信公众平台开发之微信支付开发是子恒老师《微信公众平台开发》视频教程的第12部。详细讲解了用php进行微信支付的开发。内容包含获取支付密钥,微信公众号支付开发,扫码支付,微信刷卡支付,异步处理支付结果等等。欢迎反馈,微信/QQ:68183131

    27830 人正在学习 去看看 秦子恒

微信对scheme进行了屏蔽,这就是为什么微信里跳转不到其他app的原因。在ios中,使用universal link的方式跳转,这个是微信操控不了的,但是在android中,目前的做法都是在h5页面上提示用户右上角浏览器打开,使用第三方浏览器进行跳转。但是有没有其他方式可以实现跳转呢?方法当然是有的,不过是有局限性的。

===技术实现===
# 大致思路:在h5页面触发推送,调用服务端推送代码,客户端自定义接收方式为不显示在通知栏,而是打开app中界面。
# 进程保活:为了保护进程不被系统杀死,我们可以开启前台service,提高服务优先级,降低被杀死的风险。
# 不同跳转:在服务端推送的时候给客户端传不同的参数,客户端收到后跳转到相应界面即可。

==备注==
该方式只有在进程存在的情况下适用,如若用户手动杀死进程,则方法无效
跳转的时候由于上下文是context,所以启动模式必须要是FLAG_ACTIVITY_NEW_TASK

跳转前需要先判断时间,防止刚开始没收到推送,然后后面打开app的时候自动跳转


没有更多推荐了,返回首页