移动端页面跳转传参技巧：从基础到加密处理-嘻道妙招

（用力滑动屏幕的你是不是也发现）明明只是点了个按钮跳转页面，怎么突然就参数丢失了？别急！咱们今天把移动端传参那点事儿，从菜鸟到黑客防御级别都唠明白。先灵魂三问：传参到底传了个啥？为什么我的参数总丢？被坏人截胡了怎么办？

??第一关：传参基本功修炼??
新手必问：URL里那一串问号是干啥的？其实就像快递单号，?id=123&from=home这串字符就是你的参数包裹。试试这个基础操作：

javascript复制// 发件方
location.href = `detail.html?id=${商品ID}&source=推荐列表`;

// 收件方
const urlParams = new URLSearchParams(location.search);
console.log(urlParams.get('id')); // 拆包裹取货

但这里藏着个坑：中文参数会变成乱码！就像把生鲜快递写成文字游戏，必须用encodeURIComponent()打包：

javascript复制const keyword = encodeURIComponent('春节特惠');
location.href = `search.html?q=${keyword}`;

??常见翻车现场??：

参数值带等号或&符号（title=2024&促销）
页面刷新后参数消失
安卓/iOS处理方式不同

??第二关：花式传参实战手册??
遇到这仨场景别懵圈：
??场景1??：要传整个对象怎么办？
把对象转成JSON字符串：

javascript复制// 发送方
const data = {userId: 8877, vipLevel: 2};
localStorage.setItem('tempParams', JSON.stringify(data));
location.href = 'profile.html';

// 接收方
const savedData = JSON.parse(localStorage.getItem('tempParams'));

??注意??：用后记得localStorage.removeItem('tempParams')清场，就像退房要检查有没有落东西。

??场景2??：跨APP跳转怎么玩？
用自定义协议（慎用！）：

javascript复制// 唤起其他APP
location.href = 'myapp://goods/888?from=web';

// 自家APP内拦截处理
if (navigator.userAgent.includes('MyApp')) {
  handleDeepLink(location.href); // 自己写解析逻辑
}

??场景3??：参数太长了怎么办？
试试路由参数伪装术：

javascript复制// 把参数藏在路径里
/router/order/20240501123456/status

// 用正则提取
const path = '/router/order/20240501123456/status';
const orderId = path.match(/\/order\/(\w+)\/status/)[1];

??第三关：加密防偷窥实战??
当你要传余额、手机号这些敏感数据时，试试这三板斧：

??初级加密??：Base64障眼法

javascript复制// 发送方
const raw = 'phone=13800138000&vip=1';
const encoded = btoa(raw); // 转base64
location.href = `safe.html?data=${encoded}`;

// 接收方
const decoded = atob(urlParams.get('data'));

??注意??：这就像把纸条倒着写，稍微懂行的人都能破解。

??进阶方案??：AES加密
需要引入crypto-js库：

javascript复制// 加密端
const encrypted = CryptoJS.AES.encrypt(
  JSON.stringify({userId: 8877}), 
  '秘钥别用123456'
).toString();

// 解密端
const bytes  = CryptoJS.AES.decrypt(encryptedStr, '秘钥别用123456');
const data = JSON.parse(bytes.toString(CryptoJS.enc.Utf8));

??血泪教训??：千万别把秘钥硬编码在代码里！建议每个用户动态生成。

??绝杀技??：时间戳+签名验证

javascript复制// 生成签名
const timestamp = Date.now();
const sign = md5(`param1=value&timestamp=${timestamp}&salt=随机字符串`);

// 携带校验
location.href = `api?param1=value&timestamp=${timestamp}&sign=${sign}`;

// 服务端验证
const serverSign = md5(接收参数拼接+盐值);
if (serverSign !== sign) throw new Error('参数被篡改！');

??个人安全建议??

别在URL里传明文密码（见过太多翻车案例）
加密参数建议配合HTTPS使用
定期更换加密盐值，就像换门锁密码
重要操作一定要服务端二次验证

下次传参前先做安全检查：这个参数暴露了用户什么？如果被中间人看到会怎样？能不能用临时令牌替代？记住，安全从来不是"会不会出事"，而是"出事时能不能扛住"。移动端传参就像寄快递，既要保证包裹送到对的人手里，也要防止半路被拆包偷看。

本文由嘻道妙招独家原创，未经允许，严禁转载

移动端页面跳转传参技巧：从基础到加密处理

相关推荐