微信小程序中页面间跳转传参体例

标签:程序,页面,跳转,体例 发布时间:2019年06月19日 点击3

在做微信小程序的时候,经常会碰到必要页面间传递参数的情况,根据目前项目经验,总结了以下几种体例:URL传参、缓存和方法调用。

URL传参

这种体例是最简单也是最常用的,这里就不做过多介绍了。

缓存

虽然URL传参比较简单易用,但也有局限性,就是只能传递简单参数,对于复杂的参数就显得无能为力了,但许多时候我们必要传递的是结构比较复杂的数据,这时候许多开发者都会想到用缓存。

使用缓存我们有两种体例:小程序自带Storage和vuex。由于我们的项目是基于mpvue的,顺带也用了vuex了

  • Storage:通过小程序提供的API可以方便的进行缓存操作,如:wx.setStorage、wx.getStorage等。
  • Vuex:这就跟我们平时在做vue项目时一样了,在store中声明一个变量存放传递的参数。

不管是用上面哪种体例,想法都是一样的:在跳转页面之前先把参数保存到缓存,进入页面之后先获取缓存的参数,然后消灭缓存中的参数,进行营业操作。大致伪代码如下:

// pageA.vue 
goToPageB() {
  let arg = {
    name: 'Jack',
    age: 9
  }
  // 先把参数保存到缓存 比如这里用的是小程序的Storage,这里采用同步的体例
  wx.setStorageSync({
    key: 'pageArg',
    data: arg
  })
  wx.navigateTo({
    url: 'pageB'
  })
}


// pageB.vue 
mounted() {
  // 从缓存中掏出参数
  let arg = wx.getStorageSync('pageArg')
  // 消灭缓存中的页面参数
  wx.removeStorageSync('pageArg')
  // 进行营业处理
  // ...
}
复制代码

大致就是这么个逻辑,可能详细项目中会对存取缓存进行封装,或者在vuex中的做法又不一样,但思想是一样的。

如许做是可以实现功能,但总感觉不太好,每次都要进行存取操作,感觉很麻烦,而且显得不高端。。。

于是乎,我们想了个体例传递,就是今天的主角:方法调用。

方法调用

这种体例一定不是最好最优雅的解决体例,由于我们也觉得有欠缺的地方,但目前用起来照旧比较方便的,今天放出来也是盼望让大家看下怎么进行修改,也以便于我们优化。

重要是用了小程序提供的getCurrentPages方法,详细内容可查看文档,我这里直接就贴图了,由于文档说的很简单

小程序对页面的管理感觉跟欣赏器中的history差不多,也是有一个页面栈,每次跳转页面都是往这个栈里push一个页面对象,返回的时候就pop一个,当然详细实现要复杂许多。

这里官方重点提醒了:不要尝试修改页面栈,这也就是为什么我说我们的这种传参体例不是很好的缘故原由制作网站,我们就是通过方法修改了这个页面栈的数据

带参数返回上一页

详细实现体例

// 往前获取页面对象,类似history.go(-n)
function getPageByPreCount(n) {
  let currentPages = getCurrentPages()
  return currentPages[Math.max(0, currentPages.length - (n + 1))]
}

/* 返回上一页并带回参数
 * parameter functionName 上一个页面中用来接收带回参数的方法名称,细致:方法要在data中
 * parameter args  带回去的参数
*/
function returnPrevPage(functionName, ...args) {
  if (functionName) {
    let prevPage = getPageByPreCount(1)
    wx.navigateBack()
    // 方法里手动调用了页面的方法,并把页面参数在这里作为方法参数传递
    prevPage.data.$root[0] && typeof prevPage.data.$root[0][functionName] == 'function' 
    && prevPage.data.$root[0][functionName](...args)
  } else {
    wx.navigateBack()
  }
}
复制代码

项目中使用,如在搜索页(search.vue)面中有一个过滤条件是用户,但可以选择多个用户重庆网站制作,而且选择用户是在另外一个页面(user-pick.vue)里进行的,这就是要从user-picker.vue跳回search.vue,并带回选中的用户列表信息

// user-pick.vue
methods: {
  onSelectConfirm(users) {
    returnPrevPaeg('onSelectUser', users)
  }
}

// user-pick.vue
data() {
  return {
    // 把详细处理照旧放到了methods中,假如处理逻辑比较简单也可以直接放这里
    onSelectUser: this.onUserOk
  }
},
methods: {
  onUserOk(users) {
    // 拿到用户信息 进行搜索操作
    // this.search(user)
  }
}
复制代码

带参数跳转页面

返回上一页照旧比较好理解的,由于页面已经在页面栈里存在了,可以取到并调用方法,但对于跳转的就不太好实现了淄博网站建设,由于每次跳转页面都是往页面栈里追加一个新的对象,在跳转前无法获取到该对象。

这里就是我说的做的不太好的地方,由于我们采用的是setTimeout体例。。。

// 前进页面回调方法
function navigateTo (url,functionName,...args) {
  triggerNextPageFn('onHide', functionName, ...args)
  // 跳转后处理数据
  wx.navigateTo({url})
}
function redirectTo (url,functionName,...args) {
  triggerNextPageFn('onUnload', functionName, ...args)
  // 跳转后处理数据
  wx.redirectTo({url})
}

// 通用触发后一个页面的方法
function triggerNextPageFn(type, functionName, ...args) {
  let prePage = getCurPage()
  if (functionName) {
    // 保存当前变量
    ((..._args) => {
      let oldEventFn = prePage[type]
      prePage[type] = () => {
        // 前进页面改变onReady方法,这里使用了setTimeout
        setTimeout(() => {
          let newPage = getCurPage()
          let oldOnReady = newPage.onReady
          newPage.onReady = function () {
            newPage.data.$root[0] && typeof newPage.data.$root[0][functionName] == 'function' 
            && newPage.data.$root[0][functionName](..._args)
            oldOnReady.apply(newPage)
            newPage.onReady = oldOnReady
          }
        })
        prePage[type] = oldEventFn
      }
    })(...args)
  }
}
复制代码

小结

传递体例那么多,选择适合本身的才是最紧张的。虽然我们写的这个传参方法不是微信官方支撑的浙江人事考试网首页,由于文档里面明确说了不要修改页面栈,但就目前使用情况来看照旧没碰到什么题目的,大概还没碰到吧。

就本篇文章中介绍的传参体例,假如有不妥的地方或者更好的修改建议,盼望大家能帮我们提出来,大家共同提高。

手机网站建设