微信小程序页面之间传参的几种方式

小程序 0

目录

前言

第一种：url传值

url传值使用详细说明

api跳转

组件跳转

第二种：将值缓存在本地，再从本地取值

第三种：全局传值(应用实例传值)

第四种：组件传值

第五种：使用通信通道（通信通道是wx.navitageTo()独有的）

第六中：使用页面栈（只对当前页面栈中存在的页面生效）

总结

前言

  •  由于经常需要进行页面间传参且各种传参的业务场景也不相同，根据官方文档和日常工作进行了总结，共有六种传参方式。

概览：

方式优点缺点
globalData双向传参、全应用可用不及时
storage双向传参、全应用可用不及时
路由简单方便、及时正向传参
通信通道双向传参、及时仅 wx.navagateTo() 接口调用才可用
页面栈可操作数据和函数、及时反向传参、仅 wx.navagateTo() 和<navigator open-type="navigateTo" url="/bbb?id=1"></navigator〉才可用

第一种：url传值

  • A页面部分js代码

 Page({   toDetailPage: function (e) {     var name = "斗帝蓝电霸王龙Pro";     wx.navigateTo({       url: '/pages/detail/detail?name =' + name,     } })

  • B页面部分js代码

 Page({   /**     * onLoad生命周期函数--监听页面加载    */   onLoad: function (option) {     console.log(option); // 斗帝蓝电霸王龙Pro    /**     * 这种普通函数中this的指向是动态的，为了保证函数内部可以访问到组件实例     * 这里将this赋值给that     * 如果你想直接使用this，可以使用箭头函数，箭头函数没有自己的this     * 他会继承外层作用域的this     * 在箭头函数中this的指向是定义的上下文,而不是执行时的上下文(`不清楚的可以看001例子说明`)    */     let that = this     that.setData({       name：option     })   }, })
 // 001 // 举个例子来说明： const obj = {   name: '斗帝蓝电霸王龙Pro',   sayHello: function() {     console.log(`Hello, ${this.name}!`);   },   sayHelloArrow: () => {     console.log(`Hello, ${this.name}!`);   } }; ​ obj.sayHello(); // 输出：Hello, 斗帝蓝电霸王龙Pro! obj.sayHelloArrow(); // 输出：Hello, undefined! ​ // 下面我来分析一下这段代码    /**     * sayHelloArrow是一个箭头函数。当我们调用obj.sayHello()时，     * this指向的是调用该方法的对象obj，所以输出的结果是Hello, 斗帝蓝电霸王龙Pro!。     * 而当我们调用obj.sayHelloArrow()时，由于箭头函数的this是在定义时确定的,     * 而定义sayHelloArrow时的上下文是全局上下文，     * 所以this.name实际上是指向全局对象（在浏览器中是window对象）的name属性，而全局对象     * 没有name属性，所以输出的结果是Hello, undefined!。`    */

url传值使用详细说明

  • 说明：url上直接携带参数长度是有限的且不支持特殊符号，可用编码、解码的方式解决， 在传参之前进行编码encodeURIComponent()， 接收的时候进行解码decodeURIComponent()。

api跳转

  • A页面部分js代码

 //跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面 wx.switchTab({     url:'/pages/detail/detail?id=5213828', }) //关闭所有页面，打开到应用内的某个页面 wx.reLaunch({   url: '/pages/detail/detail?id=5213828', }) //关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面 wx.redirectTo({   url: '/pages/detail/detail?id=5213828', }) //保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。 wx.navigateTo({   url: '/pages/detail/detail?id='+ encodeURIComponent(this.data.id), }) //以上四种路由方式在传参和接参上没有任何区别

  • B页面部分js代码

 Page({   //地址传参带过来的参数只能在该方法的options参数中获取   onLoad:function(options){     console.log(decodeURIComponent(options.id)) // '5213828' ,无论传的变量是数字、布尔还是对象接收的时候都是字符串   } })

组件跳转

  • A页面部分wxml

 <view>   <navigator open-type="switchTab" url="/pages/detail/detail?id=5213828">   跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面   </navigator>   <navigator open-type="reLaunch" url="/pages/detail/detail?id=5213828">   关闭所有页面，打开到应用内的某个页面   </navigator>   <navigator open-type="redirectTo" url="/pages/detail/detail?id=5213828">   关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面   </navigator>   <navigator open-type="navigateTo" url="/pages/detail/detail?id=5213828">   保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面   </navigator> </view> //以上四种路由方式在传参和接参上没有任何区别

  • B页面部分js代码

 Page({   //地址传参带过来的参数只能在该方法的options参数中获取   onLoad:function(options){     console.log(options.id) //'5213828' ,无论传的变量是数字、布尔还是对象接收的时候都是字符串   } })

第二种：将值缓存在本地，再从本地取值

  • A页面部分js代码

 Page({   toDetailPage: function (e) {     var name = "斗帝蓝电霸王龙Pro";     wx.setStorageSync("name", name);     wx.navigateTo({       url: '/pages/detail/detail'     })   } })

  • B页面部分js代码

 Page({     /**     * onLoad生命周期函数--监听页面加载     */   onLoad: function (option) {     var name = wx.getStorageSync("name");     console.log(name); // 斗帝蓝电霸王龙Pro   } })

第三种：全局传值(应用实例传值)

  • app.js页面代码

 App({   globalData: {     name: '斗帝蓝电霸王龙'   }，   // onLaunch 小程序启动时执行1次，常用于获取场景值或者启动时的一些参数（如自定义分享）   onLaunch() {   // 读取 token     this.getToken()   },   getToken() {     // 读取本地的token     // this 指向应用实例本身     this.token = wx.getStorageSync('token')     this.refreshToken = wx.getStorageSync('refreshToken')   },   setToken(key, token) {     // 存储到应例实例当中     this[key] = token     // 存储到本地存储当中     wx.setStorageSync(key, token)   } })

  • 其他页面js代码

 // 获取应用实例 const app = getApp(); Page({   onLoad: function (option) {     console.log(app.globalData.name); // 斗帝蓝电霸王龙     // 重新存储新的 token     app.setToken('token', '斗帝蓝电霸王龙Pro')     app.setToken('refreshToken', '斗帝蓝电霸王龙Pro')   },   getToken() {     console.log(app.token);  // 斗帝蓝电霸王龙Pro     console.log(app.refreshToken); // 斗帝蓝电霸王龙Pro   } })

第四种：组件传值

  • 父传子

    • 父组件

       // 父组件的wxml <classDetail  detail="{{name}}"></classDetail> // 父组件的js data:{     name:"父组件---斗帝蓝电霸王龙Pro"  } ​ // 父组件的json（要把子组件注册进去） "usingComponents": {     "classDetail": "./components/classDetail/index"   }

    • 子组件

       // 子组件的js   properties:{     detail: String   } ​ // 子组件的wxml <view>{{detail}}<view>  // 父组件---斗帝蓝电霸王龙Pro子传父

  • 子传父

    • 子组件

       // 子组件.wxml <button bindtap="changeSelect">添加</button> ​ // 子组件的js changeSelect(){   // 在子组件当中通过this.triggerEvent("自定义事件名"，要传递的数据)   this.triggerEvent("updataSelect", '子组件---斗帝蓝电霸王龙Pro') }

    • 父组件

       // 父组件的wxml // 在父组件的子标签中声明自定义事件 bind:自定义事件名="事件名" // 注意，这里的changeSelect是父组件js里的方法名称，updataSelect是子组件js里传递的方法名称 <shudanbook index="{{ index }}" bind:updataSelect="changeSelect" ></shudanbook> ​ // 父组件的js   changeSelect(e){   //获得传递过来的值     console.log(e.detail) // 子组件---斗帝蓝电霸王龙Pro   }

第五种：使用通信通道（通信通道是wx.navitageTo()独有的）

  • A页面部分js代码

 wx.navigateTo({   url: "/pages/detail/detail?name='斗帝蓝电霸王龙Pro'",   events: {     // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据     acceptDataFromOpenedPage: function(data) { //参数名字随便起，前后页面对应上即可     //对发送回来的数据进行处理       console.log(data)         // 斗帝蓝电霸王龙Plus     },     someEvent: function(data) { // 参数名字随便起，前后页面对应上即可       console.log(data)        // 斗帝蓝电霸王龙Pro max     }   },   success: function(res) {     // 通过eventChannel向被打开页面传送数据     res.eventChannel.emit('acceptDataFromOpenerPage', { data: '斗帝蓝电霸王龙Pro' })//参数名字随便起，前后页面对应上即可   } })

  • B页面部分js代码

 Page({   onLoad: function(option){     //获取通信通道     const eventChannel = this.getOpenerEventChannel()     // 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据     eventChannel.on('acceptDataFromOpenerPage', function(data) {       //对发送过来的数据进行处理       console.log(data)   // 斗帝蓝电霸王龙Pro     })     //向上一页面发送数据     eventChannel.emit('acceptDataFromOpenedPage', {data: '斗帝蓝电霸王龙Plus'});     eventChannel.emit('someEvent', {data: '斗帝蓝电霸王龙Pro max'});   } })

第六中：使用页面栈（只对当前页面栈中存在的页面生效）

  • A页面部分js代码

 Page({   data:{     name:'斗帝蓝电霸王龙Pro',     age:22   },   eatFood:function(food){     console.log('eating '+ food)       } })

  • B页面部分js代码

 Page({   onLoad: function (options) {     // 获取当前页面栈     const pages = getCurrentPages();     // 获取上一页面对象     let prePage = pages[pages.length - 2];     console.log(prePage.data.name) // 斗帝蓝电霸王龙Pro     prePage.eatFood('斗帝蓝电霸王龙Pro') // eating 斗帝蓝电霸王龙Pro   } })

总结

  1. globalData与storage原理相同都是将数据放在一个公共的地方全应用随意取用，但是他们的数据不推送也不关联，即globalData和storage中的数据更新了，但已经获取过值的页面其对应的值并 不会更新。
  2. 解决办法：将各页面获取值的事件放到onShow()中，每次页面进入前台的时候都会重新从globalData和storage中取值。
  3. 路由携带参数简单方便，但是地址长度有限不能携带大量参数和特殊符号。
  4. 解决办法：在传参之前进行编码encodeURIComponent()，接收的时候进行解码 decodeURIComponent()。如此大量参数可以携带但是只能单方面传递参数，即只能a向b传，反之则不行。
  5. 通信通道，页面可以互相传参，但是该通道仅存在于wx.navagateTo()的接口调用时才有效。
  6. 页面栈，这是一个极其强大功能，它本质上不是向页面传参而是直接修改页面参数和方法。通过页面栈我们可以拿到该页面的对象，然后就可以对该页面的各项数据和函数进行操作。但是这种方法只能在b页面去操作a页面，并不能在a页面操作b页面，因为此时页面栈中还没有b。并且该方法也仅限于通过wx.navagateTo()或 <navigator open-type="navigateTo" url="/pages/detail/detail?id=5213828">跳转</navigator> 这两种方式进入b页面才可使用，因为其他方式跳转到b页面时已经销毁了其他所有页面，页面栈中已经没有上一个页面了。
     

也许您对下面的内容还感兴趣：