微信小程序，navigator页面跳转带参数，请求数据，保存，调用

最新推荐文章于 2025-05-20 07:40:20 发布

原创最新推荐文章于 2025-05-20 07:40:20 发布 · 1.4w 阅读

36 ·

CC 4.0 BY-SA版权

前端同时被 2 个专栏收录

30 篇文章

订阅专栏

小程序

20 篇文章

订阅专栏

本文详细介绍了如何在微信小程序中使用Navigator组件进行页面跳转并携带参数，通过具体实例展示了如何从index页面跳转到logs页面，同时传递表单数据和后台请求数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

List item

小程序 navigator 跳转页面携带参数

具体的文档我就不在啰嗦了下面是我写的一大个例子：.

场景需求：
1，页面跳转携带参数，从index页面使用 navigateTo跳转到logs页面；
,2， aa 和 bb 是我后台请求的数据，
3， aa 和 bb 在logs页面渲染，

	
  // 获取表单内容
  formSubmit: function(e) {
    console.log('form发生了submit事件，获取from表单数据：', e.detail.value)
    console.log('获取data的数据', this.data)
    wx.navigateTo({
      url: "/pages/logs/logs?name=" + this.data.aa + "&ids=" + this.data.bb,
    })
  },

项目的目录结构；
在这里插入图片描述

				**正文开始，**

index.wxml

  <view class="calculate">
    <view class="nav">  navigator测试</view> 
    <form bindsubmit="formSubmit" bindreset="formReset">
        <view class="count">
          <input name= "client_name"
                 class="border_radu10_padd20"
                  placeholder-class="area_placeholder"     
                  placeholder="输入姓名"></input>
        </view>
        <view class="count">
             <navigator hover-class="navigator-hover"  open-type="navigate"> 
                     <button form-type="submit">免 费 获 取 报 价</button>
            </navigator>
        </view> 
    </form>
</view>

index.js

Page({
  data: {
  },
  // 获取表单内容
  formSubmit: function(e) {
    console.log('form发生了submit事件，携带数据为：', e.detail.value)
    //打印的结果 -- form发生了submit事件，携带数据为： {client_name: ""}
    console.log('this  data的数据', this.data)
    //打印结果  --  this  data的数据 {__webviewId__: 104, aa: "011cDAr209H90K1q4As20rBJr20cDArx", bb: "login:ok"}
    wx.navigateTo({
       url: "/pages/logs/logs?name=" + this.data.aa + "&ids=" + this.data.bb + "&client_name=" + e.detail.value.client_name,
    })
  },
  onLoad: function(options) {
    this.wxlogin();
  },
  wxlogin: function() { //获取用户的openID和sessionKey
    var that = this;
    wx.login({
      //获取code 使用wx.login得到的登陆凭证，用于换取openid
      success: (res) => {
        console.log("登录",res);
        //打印结果 -- 登录{errMsg: "login:ok", code: "011cDAr209H90K1q4As20rBJr20cDArx",}
         that.setData({
           aa:res.code,
           bb:res.errMsg,
         })
      }
    });
  },

很重要：that.setData（{}）的作用就是把这里。请求接口的res数据绑定到 data里面了，
获取data里面的值调用this.data 就可以得到，注意如果没有that.setData 是不会有res数据的；
index.wxss的数据我就不写了，能做这到这个地步的，css样式，应该是闭着眼睛的事了
第二个页面logs
logs.wxml

<view class="box">
  <view class="bgsolor"></view>
  <view class="monad">
    <view class="detail">
      <view class="initial">
        <view> data.code数据 </view>
        <text>{{data.ids}}</text>
      </view>
      <view class="initial">
        <view>data.errMsg数据</view>
        <text>{{data.name}}</text>
      </view>
    </view>
    <view class="note">
      <text>拼搏到无能为力，坚持到感动自己</text>
      <text> 加油，加油，加油</text>
      <text> 翛翾梓</text>
    </view>
  </view>
</view>

logs.js

Page({
  data: { },
  onLoad: function (options) {
    // var name = options.name;  //021oahhj2LUcMD01Rolj25Rihj2oahhh
    // var age = options.ids;   //login:ok"
    console.log(options);
    //打印结果 -- {name: "021oahhj2LUcMD01Rolj25Rihj2oahhh", ids: "login:ok"， client_name: ""}
    this.setData({
       data:options,
    })
  },
})

因为美术出身，不能忍受丑的东西，所以，我的界面写的稍微好看点，
但是重要的不是这，是方法；
演示一下
输入我是帅哥，并点击
在这里插入图片描述
点击过后，查看打印结果；

跳转后的logs页面；

刚刚一个女生要和我视频，
我果断拒绝，谁都不能阻止我写博客，
热爱学习的我，只关注知识，
因为古人曾说，书中自有颜如玉。。有点牵强哎；
不管了，
赶紧道歉去了，拜了拜；