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

• 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>
        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页面；

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