一个C#程序员学习微信小程序路由的笔记
路由大家应该都知道,在微信小程序也是有的,毕竟它是单页面应用程序。在WeChat中有五种跳转方式,分别是wx.switchTab、wx.reLaunch、wx.redirectTo、wx.navigateTo、wx.navigateBack。今天我们就说一说 如何使用这几个API来跳转页面,并且我们还要学习如何进行传参,还要知道页面栈这个知识。
在此之前,一定要学习下页面栈这个东西,要不然你就废了,小程序的页面栈最多可以存放10个页面,当等于10的时候,你就无法再用 navigateTo API的时候,你就无法在进行跳转了,因为它是原页面保留,在原来的页面上面进行添加的。
如果你还不懂的话,这么说吧,比如使用navigateTo从A页面跳转了B,又从B跳转到了C,最后从C跳转到了A那这个页面栈就已经到达了3个!我觉得已经说的差不多了。
但如果你使用了 redirectTo就不一样了,就在上面的实例中,假如我们从B跳转到了C使用了redirectTo那么就相当于有两个页面栈,因为使用它将会替换当前页面。
说了这么多,就是想讲下各种跳转方式,它的作用不同,所以不适当的使用就会让客户懵逼。下面是我总结路由API的作用。
navigateTo, redirectTo 只能打开非 tabBar 页面(一个是有回退按钮,后者没有)
。switchTab 只能打开 tabBar 页面。
比如想要跳转,你可以给按钮一个事件,并且在Js中配对方法,就好了,代码实现是这样的。
<button class="btn-ask" bindtap='mytab'><image src='/images/btn_ask.png' /></button>
Js的实现也很简单,就是通过wx对象的方法来进行跳转(上面说的跳转,都有!)
mytab:function(){ wx.showToast({ title: '加载中', icon: 'loading', duration: 1000 }) wx.navigateTo({ url: '../rediters/redi' }) }
除了通过调用方法的形式,还可以通过 navigator 标签,这个标签就非常舒服了,因为我们的Js通常是要和后端的数据交互,根本不要这些垃圾代码,show代码!
<navigator url='../rediters/redi' hover-class="changestyle" redirect>hahaha</navigator> //那个hover-class的样式 是点击效果!
带上 redirect 就没有返回按钮,反而就有了。现在我们说一下在跳转的时候如何带参跳转!
只需要在定义的时候带上参数就可以了
wx.navigateTo({ url: '../rediters/rediters?queryId=1' })
然后在Page中的Load事件中获取。
onLoad: function (options) { console.log(options) },
但现在问题来了,如何传递多个参数,或者传递个对象,并且如何接收呢?
wx.navigateTo({ url: '../rediters/rediters?queryId=1&State=2&name=3' })
在传递的时候,写上多个参数,那么在load事件的 Options中,它就变成了一个对象。
传递一个对象也可这个差不多。只不过你可以通过Js的方法把它变成Json进行传递。
wx.navigateTo({ url: '../rediters/rediters?testData=' + JSON.stringify(this.data.testData) })
之后在load事件中进行 parse就可以了。
- C#程序员入门学习微信小程序的笔记
- 微信小程序学习笔记 (小程序页面学习 三 逻辑层 页面路由 基础食用方法)
- 一个 Android程序员的小程序入门学习笔记『二』(template 模版的使用注意)
- 一个 Android 程序员的小程序入门学习笔记『一』(标签和特殊CSS)
- 一个 Android程序员的小程序入门学习笔记『三』(自定义属性和获取属性)
- 黑马程序员之C#编程基础学习笔记:不断要求用户输入一个数字,然后打印这个数字的二倍,当用户输入q的时候程序退出。
- 微信小程序,学习笔记(二)样式(WXSS)及一个简单的小测试用例
- 【学习笔记】微信小程序页面路由
- Jsp&Servelet 学习笔记- 在tomcat上部署一个单独的servlet的程序(Ant)
- c#学习笔记 只运行一个实例
- Linux学习笔记------如何执行一个 可执行程序???
- C#学习笔记:程序结构
- shell学习笔记(2) 一个简单的shell脚本程序
- RunLoop学习笔记,从CF层面了解由于CFRunLoopMode机制iOS程序ScrollView的滑动为何如此平滑的原因。还有介绍AFNetworking如何单独发起一个global threa
- 微信:小程序学习笔记(3)
- 学习c#的事件时写的一个小程序
- 一个C++程序员的Delphi学习笔记
- 黑马程序员之C#学习笔记:求一个字符串中各个字符出现的次数
- 【学习笔记】C#中HashTable和快速排序的用法,从单词频率统计小程序写起
- C#高级编程 学习笔记(一) 第一个C#程序