传递过长的字符串vue 小程序-前端-E先生的博客
Java
MySQL
大数据
Python
前端
黑科技
大语言模型
    首页 >> 互联网 >> 前端

传递过长的字符串vue 小程序

[导读]:encodeURIComponent...

对于传递过长的字符串,你可以采用以下几种方法来优化和处理:

1. 使用本地存储

在页面之间传递长字符串时,可以使用本地存储将数据存储在一个页面中,然后在下一个页面中读取它。这是最直接和常见的方法。

在传递页面中存储数据:

const goShare = async () => {
  let jobId = modal.value.id;
  let res = await upload(base64Image.value.slice(22));
  if (res.data.fileUrl) {
    // Store the model in local storage
    wx.setStorageSync('model', JSON.stringify(modal.value));

    // Navigate to the next page with shorter parameters
    wx.miniProgram.navigateTo({
      url: `/pages_share/share/shareJobInfo?id=${jobId}&base64Image=${res.data.fileUrl}`
    });
  }
};

在接收页面中读取数据:

onLoad(e) {
  console.log('onLoad parameters:', e);

  if (e.id) {
    this.eId = e.id;
  }

  if (e.base64Image) {
    this.base64Image = e.base64Image;
  }

  try {
    // Retrieve the model from local storage
    const model = wx.getStorageSync('model');
    console.log('Retrieved model:', model);

    if (model) {
      this.toModel = JSON.parse(model);
      const text = this.toModel.postDesc || '';
      this.parts = text.split('\n');
      this.canvasH = this.parts.length * 40 + 450;
    } else {
      console.warn('No model data found in local storage.');
      this.toModel = {};
      this.parts = [];
      this.canvasH = 0;
    }
  } catch (error) {
    console.error('Failed to parse JSON:', error);
    this.toModel = {};
    this.parts = [];
    this.canvasH = 0;
  }
}

2. URL 编码

对长字符串进行 URL 编码和解码,可以防止特殊字符引起的问题,并且可以让数据更加紧凑。

在传递页面中 URL 编码:

const goShare = async () => {
  let jobId = modal.value.id;
  let res = await upload(base64Image.value.slice(22));
  if (res.data.fileUrl) {
    // Encode the model data
    const encodedModel = encodeURIComponent(JSON.stringify(modal.value));

    // Navigate to the next page with the encoded model data
    wx.miniProgram.navigateTo({
      url: `/pages_share/share/shareJobInfo?id=${jobId}&base64Image=${res.data.fileUrl}&model=${encodedModel}`
    });
  }
};

在接收页面中 URL 解码:

onLoad(e) {
  console.log('onLoad parameters:', e);

  if (e.id) {
    this.eId = e.id;
  }

  if (e.base64Image) {
    this.base64Image = e.base64Image;
  }

  if (e.model) {
    try {
      // Decode the model data
      const decodedModel = decodeURIComponent(e.model);
      console.log('Decoded model:', decodedModel);
      this.toModel = JSON.parse(decodedModel);
      const text = this.toModel.postDesc || '';
      this.parts = text.split('\n');
      this.canvasH = this.parts.length * 40 + 450;
    } catch (error) {
      console.error('Failed to parse JSON:', error);
      this.toModel = {};
      this.parts = [];
      this.canvasH = 0;
    }
  } else {
    console.warn('No model data found in parameters.');
    this.toModel = {};
    this.parts = [];
    this.canvasH = 0;
  }
}

3. 使用压缩技术

在传递前对长字符串进行压缩,在接收后解压缩。可以使用 JS 压缩库,如 jsziplz-string

使用 lz-string 进行压缩和解压缩:

import LZString from 'lz-string';

// 在传递页面中压缩数据:
const goShare = async () => {
  let jobId = modal.value.id;
  let res = await upload(base64Image.value.slice(22));
  if (res.data.fileUrl) {
    // Compress the model data
    const compressedModel = LZString.compressToEncodedURIComponent(JSON.stringify(modal.value));

    // Navigate to the next page with the compressed model data
    wx.miniProgram.navigateTo({
      url: `/pages_share/share/shareJobInfo?id=${jobId}&base64Image=${res.data.fileUrl}&model=${compressedModel}`
    });
  }
};

// 在接收页面中解压缩数据:
onLoad(e) {
  console.log('onLoad parameters:', e);

  if (e.id) {
    this.eId = e.id;
  }

  if (e.base64Image) {
    this.base64Image = e.base64Image;
  }

  if (e.model) {
    try {
      // Decompress the model data
      const decompressedModel = LZString.decompressFromEncodedURIComponent(e.model);
      console.log('Decompressed model:', decompressedModel);
      this.toModel = JSON.parse(decompressedModel);
      const text = this.toModel.postDesc || '';
      this.parts = text.split('\n');
      this.canvasH = this.parts.length * 40 + 450;
    } catch (error) {
      console.error('Failed to parse JSON:', error);
      this.toModel = {};
      this.parts = [];
      this.canvasH = 0;
    }
  } else {
    console.warn('No model data found in parameters.');
    this.toModel = {};
    this.parts = [];
    this.canvasH = 0;
  }
}

通过这些方法,可以有效解决长字符串传递的问题。你可以根据具体的需求和场景选择最合适的方法进行处理。

image.png

本文来自E先生的博客,如若转载,请注明出处:https://javajz.cn

留言区

联系人:
手   机:
内   容:
验证码:

历史留言

欢迎加Easy的QQ