Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >微信小程序 页面跳转 传递参数

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

作者头像
王小婷
发布于 2018-12-26 09:24:01
发布于 2018-12-26 09:24:01
9.2K00
代码可运行
举报
文章被收录于专栏:编程微刊编程微刊
运行总次数:0
代码可运行

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

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

index.wxml

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
 <view class="btn-area">
 <navigator url="../navigator/navigator?title=我来到了这个神奇的界面并且认识了一个萌妹子&&what=wangting" hover-class="navigator-hover">跳转到新页面</navigator>
 </view>

index.js

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
Page({
  data: {

  },

  //事件处理函数

  onLoad: function () {
  },

})

要把参数传递给navigator界面

navigator.wxml

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<view> {{title}} </view>

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

navigator.js

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
Page({
  data: {},
  onLoad: function(options) {
    // 生命周期函数--监听页面加载
    this.setData({
      title: options.title,
      what: options.what
    })
  }
})

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

分割线:

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<view bindtap="bindViewTap" class="up">
   我要绑定事件带着两个参数跳转界面
</view>

index.js

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
Page({
  data: {

  },

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

  //事件处理函数

  onLoad: function() {},

})

navigator.wxml

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<view> {{title}} </view>
<view > {{what}} </view>

navigator.js

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
Page({
  data: {},
  onLoad: function(options) {
    // 生命周期函数--监听页面加载
    this.setData({
      title: options.title,
      what: options.what
    })
  }
})

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

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<view>
  <text>姓名:{{name}}</text>
</view>

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

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

index.js

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<view>
<text>我的姓名是:{{name}}</text>
</view>
<view>
<text>我的年龄是:{{age}}</text>
</view>

navigator.js

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
Page({

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

  },

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

  }
})

只带一个参数跳转:

index.wxml

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<view>
  <text>姓名:{{name}}</text>
</view>
<button bindtap='buttonListener'>携参数跳转界面</button>

index.js

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
Page({
  data: {
    name: '王小婷'
  },
  buttonListener: function () {
    var that = this
    wx.navigateTo({
      url: '/pages/navigator/navigator?nameData=' + that.data.name 
    })
  }
})

navigator.wxml

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<view>
<text>我的姓名是:{{name}}</text>
</view>

navigator.js

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
Page({
  data: {
    name: null
  },
  onLoad: function (options) {
    var that = this
    that.setData({
      name: options.nameData,
    })
  }
})

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018.12.11 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
小程序扫码成功后带着参数跳转到指定页面
要扫的二维码,通过草料二维码生成的,这个网站挺好的,用起来比较简单方便,可以直接输入文字生成二维码,也可以放入链接生成二维码。
王小婷
2018/12/26
5K0
微信小程序-页面跳转数据传递
在之前的文章当中我们都实现了一个功能就是可以从上一个页面传递数据给下一个页面,那么我们能不能从下一个页面传递数据给上一个页面呢,答案是可以的。
程序员NEO
2023/05/22
4110
微信小程序页面跳转传值
第二步(B页面):利用 options 对象接收,然后就可以使用 A页面 的 flag 了
peng_tianyu
2022/12/15
1.6K0
微信小程序页面跳转传值
全解小程序猜数字游戏 04《 程序员变现指南之 微信&QQ 小程序 真的零基础开发宝典》
由于小程序开发需要一定的基础,这些基础需要提前掌握,本教程只对小程序开发进行零基础说明。
1_bit
2022/01/06
9260
全解小程序猜数字游戏 04《 程序员变现指南之 微信&QQ 小程序 真的零基础开发宝典》
【愚公系列】《微信小程序与云开发从入门到实践》052-天气预报小程序的开发(城市选择模块开发)
在我们的日常生活中,天气信息对出行、工作和休闲活动的影响不可忽视。随着小程序的普及,开发一款便捷的天气预报小程序成为了许多开发者的目标。而城市选择模块作为天气预报小程序的核心功能之一,直接关系到用户获取天气信息的准确性和便捷性。
愚公搬代码
2025/01/29
2060
微信小程序扫描二维码的内容,作为参数跳转填入到下一个页面input框
scan.wxml <view class="container"> <view class='imagesize'> <image class='img' bindtap='getScancode' src="{{back}}"></image> </view> <view style="display: flex;justify-content: center;">请扫描卡号</view> <!-- <view wx:if="{{result !=''}}
王小婷
2021/07/13
7770
小程序 | 15-页面跳转
实现界面跳转有两种方式:通过 navigator 组件 和 通过 wx 的 api 跳转
CnPeng
2021/05/17
9320
小程序 | 15-页面跳转
微信小程序入门《二》实例:条件渲染、数据遍历、网络请求、获取本地图片
实例内容 条件渲染 数据遍历 网络请求 获取本地图片 实例一: 条件渲染 如果motto为Hello World,则输出你好世界,否则原样输出。 这里是分支条件判断,直接在视图文件里修改,修改inde
极乐君
2018/02/05
1.8K0
微信小程序入门《二》实例:条件渲染、数据遍历、网络请求、获取本地图片
微信小程序开发详解《四》页面生命周期和参数传递
1:页面的生命周期 在初始页面:index.js中增加如图所示代码 点击“编译”后,运行这个小程序:日志如下图所示:初始页面index.js启动会从app,js中的生命周期方法调用开始:onLaunc
极乐君
2018/02/05
6740
微信小程序开发详解《四》页面生命周期和参数传递
小程序wx.switchTab的跳转传参问题
这篇文章demo是为了一个粉丝(实力宠粉,手动微笑,哈哈)写的,正好今天周五,时间还是比较多的,不急着回家,因为回家也是玩游戏,留在办公室里面还可以多学习一些知识。和这篇文章类似,小程序扫码成功后带着参数跳转到指定页面,不同的地方是tab页的跳转。
王小婷
2019/01/28
3.5K0
小程序wx.switchTab的跳转传参问题
微信小程序web-view实例
微信小程序web-view实例 index.js //index.js //获取应用实例 const app = getApp() Page({ /** * 页面的初始数据 */ data: { }, goBaidu: function(e) { wx.navigateTo({ url: '../out/out', success: function(e) { cons
达达前端
2019/07/03
1.7K0
微信小程序web-view实例
微信小程序开发入门篇
本文档将带你一步步创建完成一个微信小程序,并可以在手机上体验该小程序的实际效果。 开发准备工作 获取微信小程序的 AppID 登录 https://mp.weixin.qq.com ,就可以在网站的“
xiangzhihong
2018/02/05
1.5K0
微信小程序开发入门篇
打造新闻阅读微信小程序:从列表展示到实用功能一应俱全
微信小程序作为一个轻量级的应用平台,为用户提供了便捷的信息获取和服务体验。本文将以一个新闻阅读类的微信小程序为例,详细介绍如何实现新闻列表展示、图片加载、Tab滑动切换、获取数据、处理图片加载失败、数据缓存、分页加载、错误处理、下拉刷新、列表项点击跳转、用户授权、搜索功能、图片预览和小程序分享等功能。跟随本文的步骤,你将轻松掌握微信小程序的开发技巧,为用户打造一款实用且美观的新闻阅读应用。
陆业聪
2024/07/23
4720
打造新闻阅读微信小程序:从列表展示到实用功能一应俱全
小程序页面事件与wxs脚本
在使用 组件跳转到指定的 tabBar 页面时,需要指定 url 属性和 open-type 属性,其中:
timerring
2023/06/10
5960
小程序页面事件与wxs脚本
微信小程序——轮播图、组件传值、下拉刷新、导航 实战开发
滑块视图容器。其中只可放置swiper-item组件,否则会导致未定义的行为。 属性表如下
wsuo
2020/09/22
1.7K0
【微信小程序+Python后台从0到1实战开发】02微信小程序基础事件及数据获取
day02 微信小程序 1. 跳转 1.1 对标签绑定点击事件 <view bindtap="clickMe" data-nid="123" data-name="SD" >点我跳转</view> Page({ ... /** * 点击绑定的事件 */ clickMe:function(e){ var nid = e.currentTarget.dataset.nid; console.log(nid); } }) 1.2 页面跳转 wx.navigateTo({
天道Vax的时间宝藏
2021/08/11
1.1K0
小程序手动定位
view组件可用作父容器,也可以用来展示一段文本,text组件也可以用来展示文本,区别在于view中的文本不能选中。 {{}}是小程序中数据绑定的语法。在小程序中没有dom和bom,所以不能根据id等属性获取控件,只能通过数据绑定的方式。 在index.js中未变量addresss赋值,然后index.wxml中就可以自动更新,这与angular很像,但是,小程序中是单项绑定。 tap是一个触摸事件,小程序中使用bind或者catch方式绑定事件,其属性值是一个函数名称,这个函数在index.js中定义,当用户触摸此view时就会执行对应的函数
黄啊码
2021/09/26
6670
小程序开发项目实战:在线学习平台
随着教育行业的数字化转型,在线学习平台成为了学习者的重要选择。通过微信小程序,开发者可以为用户提供高效、便捷的在线学习体验。本文将通过实例分析,指导你开发一个简单的在线学习平台小程序,涵盖项目需求分析、架构设计、技术实现及优化等方面。
LucianaiB
2025/01/28
4170
微信小程序入门文档下载_小程序开发教程全集免费
最新一版的微信开发者工具,把微信公众号的调试开发工作也集成了进去,可以更换开发模式。
全栈程序员站长
2022/09/20
11.3K0
微信小程序入门文档下载_小程序开发教程全集免费
微信小程序跳转页面传多个参数(拼接)
//事件处理函数,带着4个参数跳转,姓名时间被访部门 bindViewTapsuccess: function() { wx.navigateTo({
王小婷
2021/07/13
3.6K0
推荐阅读
相关推荐
小程序扫码成功后带着参数跳转到指定页面
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验