jq、vue、uni-app、小程序的页面传参方式

在Web开发和移动应用开发中，页面间的传参是一个常见的需求。这里，我将详细解释如何在几种不同的框架和技术栈中（jQuery (jq), Vue.js, uni-app, 小程序）实现页面传参，并给出相应的代码示例。

1. jQuery (jq) 页面传参

在jQuery中，页面传参通常是通过URL的查询字符串（Query String）、Cookie、LocalStorage或SessionStorage等方式来实现的。这里以URL查询字符串为例：

发送页面：

javascript// 假设你要传递的参数是 userId 和 userName
var userId = 123;
var userName = "JohnDoe";

// 构造URL
var url = "nextPage.html?userId=" + userId + "&userName=" + encodeURIComponent(userName);

// 跳转到新页面
window.location.href = url;

接收页面（nextPage.html）：

javascript$(document).ready(function() {
var urlParams = new URLSearchParams(window.location.search);
var userId = urlParams.get('userId');
var userName = decodeURIComponent(urlParams.get('userName'));

console.log(userId, userName); // 输出: 123, JohnDoe
});

注意：这里使用了URLSearchParams，这是一个较新的API，可能需要在旧版浏览器中通过polyfill来支持。

2. Vue.js 页面传参

在Vue.js中，页面传参通常是通过路由（Vue Router）来实现的。

发送页面（路由跳转）：

javascriptthis.$router.push({ name: 'NextPage', params: { userId: 123, userName: 'JohnDoe' } });
// 注意：在Vue Router中，params通常用于命名路由的动态段，这里可能需要改为query

// 或者使用query（适用于非命名路由或需要URL显示参数的情况）
this.$router.push({ path: '/nextPage', query: { userId: 123, userName: 'JohnDoe' } });

接收页面：

javascriptexport default {
mounted() {
// 假设你使用query来传递参数
console.log(this.$route.query.userId, this.$route.query.userName); // 输出: 123, JohnDoe
}
}

3. uni-app 页面传参

uni-app支持Vue.js的语法，因此页面传参的方式也类似Vue.js。但uni-app有自己的页面跳转和参数传递机制。

发送页面：

javascriptuni.navigateTo({
url: '/pages/nextPage/nextPage?userId=123&userName=JohnDoe'
});

接收页面（nextPage.vue）：

javascriptexport default {
onLoad(options) {
console.log(options.userId, options.userName); // 输出: 123, JohnDoe
}
}

4. 小程序 页面传参

在小程序中，页面间的传参也是通过URL的查询字符串来实现的，但与Web开发略有不同。

发送页面：

javascriptwx.navigateTo({
url: '/pages/nextPage/nextPage?userId=123&userName=JohnDoe'
});

接收页面（nextPage.js）：

javascriptPage({
onLoad: function(options) {
console.log(options.userId, options.userName); // 输出: 123, JohnDoe
}
})

注意：以上示例代码仅供参考，具体实现可能需要根据实际的框架版本和项目需求进行调整。