百度生态中的动态参数处理主要涉及以下几个方面

星博讯 SEO推广 2

百度小程序动态参数

URL传参

// 跳转时传参
swan.navigateTo({
  url: '/pages/detail/detail?id=123&name=test'
})
// 接收参数
Page({
  onLoad(options) {
    console.log(options.id)    // 123
    console.log(options.name)  // test
  }
})

全局参数管理

// app.js 中设置全局参数
App({
  globalData: {
    userInfo: null,
    token: ''
  }
})
// 页面中使用
const app = getApp()
Page({
  onLoad() {
    console.log(app.globalData.token)
  }
})

百度统计(百度推广)参数

UTM参数追踪

原始链接:https://example.com/product
带参链接:https://example.com/product?utm_source=baidu&utm_medium=cpc&utm_campaign=summer_sale

自动标记参数

// 百度统计自动获取URL参数
var _hmt = _hmt || [];
_hmt.push(['_setAutoPageview', false]);
_hmt.push(['_trackPageview', location.pathname + location.search]);

百度API参数处理

动态请求参数

// 百度地图API
const map = new BMap.Map("container");
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
// 根据动态参数搜索
const local = new BMap.LocalSearch(map, {
  onSearchComplete: (results) => {
    // 处理结果
  }
});
local.search(keyword);

百度翻译API

// 动态参数示例
const appid = 'your_appid';
const q = encodeURIComponent(dynamicText);
const salt = new Date().getTime();
const sign = MD5(appid + q + salt + key);
fetch(`https://fanyi-api.baidu.com/api/trans/vip/translate?q=${q}&from=auto&to=en&appid=${appid}&salt=${salt}&sign=${sign}`)

URL参数处理工具函数

获取URL参数

function getUrlParams(url) {
  const params = {};
  const queryString = url.split('?')[1];
  if (queryString) {
    queryString.split('&').forEach(pair => {
      const [key, value] = pair.split('=');
      params[decodeURIComponent(key)] = decodeURIComponent(value || '');
    });
  }
  return params;
}
// 使用
const params = getUrlParams(window.location.href);
console.log(params.id);

构建带参URL

function buildUrl(baseUrl, params) {
  const url = new URL(baseUrl);
  Object.keys(params).forEach(key => {
    url.searchParams.append(key, params[key]);
  });
  return url.toString();
}

安全注意事项

参数校验

function validateParams(params) {
  // 类型检查
  if (typeof params.id !== 'string') {
    throw new Error('Invalid parameter type');
  }
  // 长度限制
  if (params.name && params.name.length > 100) {
    throw new Error('Name too long');
  }
  // 防止XSS
  const sanitized = {};
  Object.keys(params).forEach(key => {
    sanitized[key] = escapeHtml(params[key]);
  });
  return sanitized;
}

敏感参数加密

// 对敏感参数进行加密传输
function encryptParams(params, secretKey) {
  const str = JSON.stringify(params);
  const encrypted = CryptoJS.AES.encrypt(str, secretKey).toString();
  return encodeURIComponent(encrypted);
}

常见场景示例

搜索页面参数处理

// 处理搜索条件
function handleSearchParams(params) {
  const defaultParams = {
    page: 1,
    pageSize: 20,
    sort: 'default'
  };
  return {
    ...defaultParams,
    ...params,
    timestamp: Date.now()  // 防止缓存
  };
}

分页参数处理

// 分页参数构建
function buildPaginationParams(currentPage, pageSize, filters) {
  return {
    page: Math.max(1, parseInt(currentPage) || 1),
    limit: Math.min(100, Math.max(1, parseInt(pageSize) || 20)),
    ...filters
  };
}

最佳实践建议:

  1. 参数编码:始终对URL参数进行encodeURIComponent处理
  2. 类型转换:显式转换参数类型,避免意外错误
  3. 默认值:为可选参数提供合理的默认值
  4. 参数验证:在服务端和客户端都进行参数验证
  5. 文档化:清晰记录每个参数的用途和格式要求
  6. 版本控制:API参数考虑版本兼容性

具体实现方式需要根据使用的百度具体产品(小程序、API、统计等)和业务需求进行调整。

百度生态中的动态参数处理主要涉及以下几个方面-第1张图片-星博讯-专业SEO_网站优化技巧_搜索引擎排名提升

标签: 百度生态 动态参数处理

抱歉,评论功能暂时关闭!

微信咨询Xboxun188
QQ:1320815949
在线时间
10:00 ~ 2:00