经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » HTML/CSS » HTML5 » 查看文章
微信小程序开发--页面之间的跳转
来源:cnblogs  作者:个人升级打怪  时间:2019/7/24 8:51:44  对本文有异议

一、navigator--完成页面之间的跳转

1、新建一个页面文件夹

2、在app.json文件中引入页面
  1. "pages": [
  2. "pages/index/index",
  3. "pages/ranking/ranking"
  4. ],

3、在wxml页面中用navgator标签实现跳转

  1. <navigator url="../ranking/ranking">排行榜</navigator>

二、页面间跳转和传值

1、在地址后面用 ?属性=属性值  的方式传值,多个属性之间用 & 连接

  1. <navigator url="../ranking/ranking?name=月排行榜&age=1">排行榜</navigator>

2、在跳转后的页面的 .js 文件中接收值,options中数据就是页面跳转时传递的值

  1. Page({
  2. onLoad: function (options) {
  3. console.log(options)
  4. }
  5. })

注:reditect跳转,这个跳转是没有过度的,不能返回,适用于只出现一次的页面

  1. <navigator url="../ranking/ranking?name=月排行榜&age=1" redirect>排行榜</navigator>

 三、微信小程序使用API跳转

  1. <!-- index.wxml -->
  2. <view>
  3. <navigator url='../demo1/demo1'>普通页面跳转</navigator>
  4. <button bindtap='ondemo1'>通过API跳转</button>
  5. <button bindtap='ondemo2'>通过API跳转,不能返回</button>
  6. </view>
  1. //index.js
  2. //获取应用实例
  3. const app = getApp()
  4. Page({
  5. ondemo1:function(){
  6. wx:wx.navigateTo({
  7. url: '../demo1/demo1',
  8. success: function(res) {
  9. console.log("通过API跳转成功")
  10. },
  11. // 成功时的回调函数
  12. fail: function(res) {},
  13. //失败时的回调函数
  14. complete: function(res) {},
  15. //完成时的回调函数,无论成功或失败都会执行
  16. })
  17. },
  18. ondemo2:function(){
  19. wx:wx.redirectTo({
  20. url: '../demo2/demo2',
  21. success: function(res) {},
  22. fail: function(res) {},
  23. complete: function(res) {},
  24. })
  25. }
  26. })
  1. <!--pages/demo1/demo1.wxml-->
  2. <text>pages/demo1/demo1.wxml</text>
  3. <button bindtap='toback'>返回上一级</button>
  1. // pages/demo1/demo1.js
  2. Page({
  3. toback:function(){
  4. // wx:wx.navigateBack()
  5. wx:wx.navigateBack({
  6. delta: 1,
  7. //delta指定返回的页面,默认是1
  8. })
  9. }
  10. })

 

 

 

 

 

 

原文链接:http://www.cnblogs.com/DreamchaserHe/p/11214433.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号