专栏首页编程微刊微信小程序 页面跳转 传递参数

微信小程序 页面跳转 传递参数

微信小程序 页面跳转 传递参数的这个知识点我们在开发过程之中会经常遇到,记录一下,虽然很简单,但是对于刚刚接触的人来说,看文档不如看demo来的快和方便。 先看一下官方给出的文档:

https://developers.weixin.qq.com/miniprogram/dev/api/wx.navigateTo.html?search-key=wx.navigateTo()

index.wxml

 <view class="btn-area">
 <navigator url="../navigator/navigator?title=我来到了这个神奇的界面并且认识了一个萌妹子&&what=wangting" hover-class="navigator-hover">跳转到新页面</navigator>
 </view>

index.js

Page({
  data: {

  },

  //事件处理函数

  onLoad: function () {
  },

})

要把参数传递给navigator界面

navigator.wxml

<view> {{title}} </view>

<view > {{what}} </view>

navigator.js

Page({
  data: {},
  onLoad: function(options) {
    // 生命周期函数--监听页面加载
    this.setData({
      title: options.title,
      what: options.what
    })
  }
})

效果 传递的两个参数到了这个界面了

分割线:

通过js里面的绑定的函数事件来跳转 index.wxml

<view bindtap="bindViewTap" class="up">
   我要绑定事件带着两个参数跳转界面
</view>

index.js

Page({
  data: {

  },

  //事件处理函数
  bindViewTap: function() {
    wx.navigateTo({
      url: '../navigator/navigator?title=我来到了这个神奇的界面并且认识了一个萌妹子&&what=wangting'
      //  url: '../logs/logs'
    })
  },

  //事件处理函数

  onLoad: function() {},

})

navigator.wxml

<view> {{title}} </view>
<view > {{what}} </view>

navigator.js

Page({
  data: {},
  onLoad: function(options) {
    // 生命周期函数--监听页面加载
    this.setData({
      title: options.title,
      what: options.what
    })
  }
})

效果: http://recordit.co/rDhRuFEpYc

再来一个demo:便于理解和实践 index.wxml

<view>
  <text>姓名:{{name}}</text>
</view>

<view>
  <text>年龄:{{age}}</text>
</view>

<button bindtap='buttonListener'>携参数跳转界面</button>

index.js

Page({

  /**
   * 页面的初始数据
   */
  data: {
    name: '王小婷',
    age: '22'

  },

  buttonListener: function () {
    var that = this
    wx.navigateTo({
      url: '/pages/navigator/navigator?nameData=' + that.data.name + '&ageData=' + that.data.age
    })
  }
})

navigator.wxml

<view>
<text>我的姓名是:{{name}}</text>
</view>
<view>
<text>我的年龄是:{{age}}</text>
</view>

navigator.js

Page({

  /**
   * 页面的初始数据
   */
  data: {
    name: null,
    age: null

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this
    that.setData({
      name: options.nameData,
      age: options.ageData
    })

  }
})

只带一个参数跳转:

index.wxml

<view>
  <text>姓名:{{name}}</text>
</view>
<button bindtap='buttonListener'>携参数跳转界面</button>

index.js

Page({
  data: {
    name: '王小婷'
  },
  buttonListener: function () {
    var that = this
    wx.navigateTo({
      url: '/pages/navigator/navigator?nameData=' + that.data.name 
    })
  }
})

navigator.wxml

<view>
<text>我的姓名是:{{name}}</text>
</view>

navigator.js

Page({
  data: {
    name: null
  },
  onLoad: function (options) {
    var that = this
    that.setData({
      name: options.nameData,
    })
  }
})

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 小程序登录按钮遮罩浮层效果

    2:在弹出的授权框里,拒绝授权按钮的时候,界面的数据没有办法加载出来,允许授权的时候,界面就能渲染从后端拿过来的数据

    祈澈菇凉
  • 小程序调用新闻接口实现列表循环

    今天我又来调接口了,调用天气接口,音乐接口,新闻接口,图片接口,调完之后瞬间又觉得自己心情美美哒了,哈哈哈。

    祈澈菇凉
  • uniapp图片弹框效果

    需求:点击提交按钮,提交成功后会弹出一个弹框,提示成功,点击右上角的叉号或者我知道了,隐藏弹框效果。

    祈澈菇凉
  • [android] 隐式意图的配置

    ndroid里面的清单文件相当于windows上的注册表,例如播放器可以关联文件直接打开,清单文件中activity节点的intent-filter节点进行配置

    陶士涵
  • 内存页面共享-KSM

    本文适合有基本Linux内存管理概念的新手阅读,且本文旨在从工作流程和设计思想上介绍KSM,在涉及到源代码的地方,进行了部分删减,如果想详细了解KSM,推荐阅读...

    233333
  • 九彩拼盘的自我介绍

    工作中,我是一枚 Web 前端程序猿。我做前端 5 年多了,做过不少项目,带过人,做过一些分享和企业培训,前端顾问,还算是经验比较丰富的前端程序员。

    Joel
  • Java 代码质量

    被滥用的instanceof instanceof滥用, 或者直接强转, 大都数情况可以用方法override, 而且应当避免使用isA(), isB()之类的...

    用户1216491
  • 微信小程序|文本框和页面分割线

    在配置微信小程序的页面时,大部分普通页面需要添加文本框并在其中设置文本,以及设置分割线,其中也包括设置样式所处位置。这就需要我们合理使用view标签搭配WXSS...

    算法与编程之美
  • Java反射技术详解

      相信很多人都知道反射可以说是Java中最强大的技术了,它可以做的事情太多太多,很多优秀的开源框架都是通过反射完成的,比如最初的很多注解框架,后来因为java...

    黄林晴
  • 浏览器窗口间通信

    浏览器多个标签页窗口间通信,主要是指的同源的多个页面间的通信,主要方法有本地存储通信、Web Worker通信、Web Socket通信。

    WindrunnerMax

扫码关注云+社区

领取腾讯云代金券