千锋扣丁学堂HTML5培训之微信小程序页面间跳转传参方式总结

今天千锋扣丁学堂HTML5培训老师给你们分享一篇关于JavaScript微信小程序页面间跳转传参方式总结的详细介绍，首先在作微信小程序的时候，常常会遇到须要页面间传递参数的状况，根据目前项目经验，总结了如下几种方式：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.$root0 == 'function'

&& prevPage.data.$root[0]functionName

} 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.$root0 == 'function'

&& newPage.data.$root[0]functionName

oldOnReady.apply(newPage)

newPage.onReady = oldOnReady

}

})

prePage[type] = oldEventFn

}

})(...args)

}

}

传递方式那么多，选择适合本身的才是最重要的。虽然咱们写的这个传参方法不是微信官方支持的，由于文档里面明确说了不要修改页面栈，但就目前使用状况来看仍是没遇到什么问题的，也许还没遇到吧。

以上就是关于千锋扣丁学堂HTML5培训之微信小程序页面间跳转传参方式总结的所有内容了，但愿本文的内容对你们的学习或者工做具备必定的参考学习价值，想要了解更多关于HTML5开发方面内容的小伙伴，请关注扣丁学堂HTML5培训官网、微信等平台，扣丁学堂IT职业在线学习教育有专业的HTML5讲师为您指导，此外扣丁学堂老师精心推出的HTML5视频教程定能让你快速掌握HTML5从入门到精通开发实战技能。