2019-05-11 10:57:50 qq_41296039 阅读数 79
  • 微信开发群发多图文消息-微信开发16(PHP)

    会员免费看,http://edu.csdn.net/lecturer/842 右侧可办理会员卡。微信群发多图文消息开发是子恒老师《子恒说微信开发》视频教程的第16部。详细讲解了用php开发微信群发图文消息。内容包含图文消息前端页面,一个页面插入多个百度UEditor,群发多图文,查询和删除图文消息等等。欢迎反馈,微信号:QQ68183131

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


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

一、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不写默认是上一层
    }
   }
2018-05-10 23:37:51 vigliang 阅读数 107
  • 微信开发群发多图文消息-微信开发16(PHP)

    会员免费看,http://edu.csdn.net/lecturer/842 右侧可办理会员卡。微信群发多图文消息开发是子恒老师《子恒说微信开发》视频教程的第16部。详细讲解了用php开发微信群发图文消息。内容包含图文消息前端页面,一个页面插入多个百度UEditor,群发多图文,查询和删除图文消息等等。欢迎反馈,微信号:QQ68183131

    8110 人正在学习 去看看 秦子恒
关于小程序导航跳转页面开发者文档里面有些简单的介绍。
wx.redirectTo(OBJECT):关闭当前页面,跳转到应用内的某个页面。
wx.navigateTo(OBJECT):保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面。
wx.reLaunch(OBJECT): 基础库 1.1.0 开始支持,低版本需做兼容处理, 关闭所有页面,打开到应用内的某个页面。
wx.switchTab(OBJECT): 跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面
wx.navigateBack(OBJECT): 关闭当前页面,返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈,决定需要返回几层。

常用wx.navigateTo(OBJECT)去做跳转页面的处理,先要传参数,其方法之一就是在前边绑定事件和相应的数据。

Comment

下面是一个简单的例子wxml代码与js代码分别如下

 <view bindtap='evaluation' data-id='{{item.id}}'>
 </view>
Page({
  data:{
  },
  evaluation: function (e) {//跳转评教问卷页面
    // console.log(e);
    var id = e.target.dataset.id;
    wx.navigateTo({
      url: '../evaluation/evaluation?id='+id
    })
  }
})
需要注意的是,一定要在js里面去控制台打印传过来的参数(console.log(e )),观察自己写的参数(data-id='{{item.id}}')是否传过来。还有url的写法也要注意一下‘url地址?参数名’+数据内容



2018-02-28 10:47:45 Cream_Cicilian 阅读数 2517
  • 微信开发群发多图文消息-微信开发16(PHP)

    会员免费看,http://edu.csdn.net/lecturer/842 右侧可办理会员卡。微信群发多图文消息开发是子恒老师《子恒说微信开发》视频教程的第16部。详细讲解了用php开发微信群发图文消息。内容包含图文消息前端页面,一个页面插入多个百度UEditor,群发多图文,查询和删除图文消息等等。欢迎反馈,微信号:QQ68183131

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

两种方法
①wx.navigateTo(普通跳转)

wx.navigateTo({
      url: '../card/card',
    })

②wx.redirectTo(把当前页面变成首页)

 wx.redirectTo({
     url: '../card/card',
   })
2018-10-10 17:03:52 astonishqft 阅读数 1476
  • 微信开发群发多图文消息-微信开发16(PHP)

    会员免费看,http://edu.csdn.net/lecturer/842 右侧可办理会员卡。微信群发多图文消息开发是子恒老师《子恒说微信开发》视频教程的第16部。详细讲解了用php开发微信群发图文消息。内容包含图文消息前端页面,一个页面插入多个百度UEditor,群发多图文,查询和删除图文消息等等。欢迎反馈,微信号:QQ68183131

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

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

前言

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

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方法来进行数据修改绑定了。

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

2017-11-28 16:13:35 wyj_0926 阅读数 18820
  • 微信开发群发多图文消息-微信开发16(PHP)

    会员免费看,http://edu.csdn.net/lecturer/842 右侧可办理会员卡。微信群发多图文消息开发是子恒老师《子恒说微信开发》视频教程的第16部。详细讲解了用php开发微信群发图文消息。内容包含图文消息前端页面,一个页面插入多个百度UEditor,群发多图文,查询和删除图文消息等等。欢迎反馈,微信号:QQ68183131

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

微信公众号消息增加跳转链接

背景:

用户在首次关注公众号后会弹出一条欢迎消息。给这条消息增加跳转的链接,使得用户在点击之后可以跳转

到一个你希望用户访问的页面。

解决方案:

根据微信开发者文档,找到了3种实现方式。

1.文本消息

文本消息提供的参数中是不存在url这个参数的。所以无法使用官方提供的接口直接添加跳转链接。只能退而

求其次,在文本内容中裸写跳转url。例如:''欢迎关注,点击一下链接了解更多公众号信息。www.xxxx.com"。

效果很挫2.图文消息

相对于文本消息,图文消息提供了url参数,可以在调用接口时,将链接加上就可以发送一条可点击跳转的消息。

效果还是很不错的,不传图片其实也是可以的,就会只显示文字。
3.模版消息

模板消息也是完全可以满足需求的,但模板消息有很多不便之处。使用模板消息必须有对应的模板存在,如

果没有适合当前需求的模板,就必须去向微信公众号提交申请,通过后才能使用该模板。另外模板消息有每日使用

次数上限。将模板消息用来回复首次关注的用户实在有点大材小用。

参数 是否必传 说明
url 模板跳转链接
效果是完全能够满足需求的。如果条件都符合,可以使用模板消息。

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