微信小程序获取图片使用session（下篇）

shenweihong2025-01-07 10:01

概述：

在本人上一篇文章中，微信小程序获取图片使用session（上篇），文章地址：https://blog.csdn.net/shenweihong/article/details/144970945，提出来性能问题，图片比较大的(超过1M)导致小程序setData渲染效率低，本文基于这个问题，描述解决方法。

开发平台：

前端：微信开发者工具，采用原生的js，基础库版本：3.6.5

后台：eclipse，springboot架构，springboot版本：2.6.13

原理：

文章：微信小程序获取图片使用session（上篇），把cookie放在http head中，

1、这里前端我就把cookie直接放在url中 ，前端只需要处理image属性src的url，不需要手动处理http请求，这个url能不受限制访问后台；

2、后台从请求的url中分离出cookie，和拿到真正想请求的image地址；

3、后台再发起一个http get请求，这个请求带有cookie请求到之前登陆的session中获取。

如下图：

其中两处的后台，是同一个后台程序，只是url不一样

前端代码：

wxml文件

javascript 复制代码 
<view class="grid-container">
  <view class="grid-item" wx:for="{{itemsShow}}" wx:for-item="item" wx:for-index="index" wx:key="*this">
    <image class="image-item" src="{{item.pic}}" bindtap="{{item.act}}"></image>
    <text>{{item.tag}}</text>
  </view>
</view>

js文件

javascript 复制代码 
data: {
    itemsShowPreurl: "/Function/WxTopWorkRecord/GetFunctionLogo/",
    itemsShow:[],
    itemsShowKeep:[],
    itemsShowOrg: [
      {
        tag: "会议",
        pic: "metting",
        act: "onclickFunMetting"
      },
      {
        tag: "记事",
        pic: "record",
        act: "onclickFunNoteBook"
      },
      {
        tag: "借录",
        pic: "borrow",
        act: "onclickFunBorrow"
      },
      {
        tag: "密码",
        pic: "password",
        act: "onclickFunPassword"
      },
      {
        tag: "系统",
        pic: "system",
        act: "onclickFunSystem"
      },
    ]
  },


setItemsShowData(cl) {
    var i = 0;
    var tmpStr = null;

    if (cl.data.itemsShowKeep == null || cl.data.itemsShowKeep.length <= 0) {
      for (i = 0; i < cl.data.itemsShowOrg.length; i++) {
        cl.data.itemsShowKeep.push({
          tag: "",
          pic: "",
          act: ""
        });
        cl.data.itemsShowKeep[i].tag = cl.data.itemsShowOrg[i].tag;
        cl.data.itemsShowKeep[i].act = cl.data.itemsShowOrg[i].act;
      }
    }

    for (i = 0; i < cl.data.itemsShowOrg.length; i++) {
      tmpStr = app.globalData.baseUrl + "/Guest/WxConvert/" + js_util.util_utf8_str_to_hex(app.globalData.coockieStr, false) + cl.data.itemsShowPreurl + cl.data.itemsShowOrg[i].pic;
      cl.data.itemsShowKeep[i].pic = tmpStr; 
    }  
                
    cl.setData({
      itemsShow : cl.data.itemsShowKeep
    });     
  },

这里用到了一个临时变量itemsShowKeep，最终的前端刷新显示在变量itemsShow

app.globalData.baseUrl为请求的基础url，这个/Guest/WxConvert/为公共请求的url，辅助字符转十六进制字符函数：js_util.util_utf8_str_to_hex，如下代码

javascript 复制代码 
function util_utf8_str_to_hex(charStr, isToArray) {
  var i = 0;
  var ch = 0;
  var result = "";

  for (i = 0; i < charStr.length; i++) {   
    ch = charStr.charCodeAt(i);
    if (ch <= 0x7F) {
      result += hex_digits.charAt((ch >>> 4) & 0x0f);
      result += hex_digits.charAt((ch) & 0x0f);
    } else if (ch >= 0x80 && ch <= 0x7FF) {
      result += hex_digits.charAt(((0xC0 + (ch >> 6)) >>> 4) & 0x0f);
      result += hex_digits.charAt((0xC0 + (ch >> 6)) & 0x0f);
      result += hex_digits.charAt(((0x80 + (ch & 0x3F)) >>> 4) & 0x0f);
      result += hex_digits.charAt((0x80 + (ch & 0x3F)) & 0x0f);
    } else if (ch >= 0x800 && ch <= 0xFFFF) {
      result += hex_digits.charAt(((0xE0 + (ch >> 12)) >>> 4) & 0x0f);
      result += hex_digits.charAt((0xE0 + (ch >> 12)) & 0x0f);
      result += hex_digits.charAt(((0x80 + (0x3F & (ch >> 6))) >>> 4) & 0x0f);
      result += hex_digits.charAt((0x80 + (0x3F & (ch >> 6))) & 0x0f);
      result += hex_digits.charAt(((0x80 + (ch & 0x3F)) >>> 4) & 0x0f);
      result += hex_digits.charAt((0x80 + (ch & 0x3F)) & 0x0f);
    }
  }

  if (isToArray) {
    return util_hex_char_to_array(result);
  }
  return result;
}

function util_hex_char_to_array(hexStrIn) {
  var i = 0;
  var cnt = 0;
  var ele = 0;
  var bytesArray = null;

  cnt = 0;
  for (i = 0; i < hexStrIn.length; i++) {
    ele = hexStrIn.charCodeAt(i);
    if (ele >= 48 && ele < 48 + 10) {
      cnt++;
    }
    if (ele >= 65 && ele < 65 + 6) {
      cnt++;
    }
    if (ele >= 97 && ele < 97 + 6) {
      cnt++;
    }
  }
  bytesArray = new Uint8Array(parseInt((cnt + 1) / 2));
  cnt = 0;
  for (i = 0; i < hexStrIn.length; i++) {
    ele = hexStrIn.charCodeAt(i);
    if (ele >= 48 && ele < 48 + 10) {
      ele -= 48;
      cnt++;
    } else if (ele >= 65 && ele < 65 + 6) {
      ele = ele - 65 + 10;
      cnt++;
    } else if (ele >= 97 && ele < 97 + 6) {
      ele = ele - 97 + 10;
      cnt++;
    } else {
      continue;
    }
    if ((cnt % 2) == 1) {
      bytesArray[parseInt((cnt - 1) / 2)] = (ele << 4) & 0xF0;
    } else {
      bytesArray[parseInt((cnt - 1) / 2)] |= ele;
    }
  }

  return bytesArray;
}

后台代码：

公共请求

java 复制代码 
@Controller
public class ControllerWxConvertSessionGet {
	
	@RequestMapping(value = "/Guest/WxConvert/{cookie}/**", method = RequestMethod.GET)
	public void WxConvert(@PathVariable("cookie") String cookieStr, HttpServletRequest request, HttpServletResponse response) {
		String getUri = null;
		
		request.getRequestURL();
		
		try {
			getUri = getReqProHostPort(request) + DivGetTrueUri(request);
			System.out.println("DivGetTrueUri = " + getUri);
			System.out.println("cookieStr = " + (new String(DataConvert.stringToHex(cookieStr))));
			if (getUri.startsWith("https")) {
				HttpClient.HttpsGet(response, new String(DataConvert.stringToHex(cookieStr)), getUri);
			} else {
				HttpClient.HttpGet(response, new String(DataConvert.stringToHex(cookieStr)), getUri);
			}
		} catch (MyErrorException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
			return;
		} catch (SocketException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
			return;  
		}		
	}
	
	private String DivGetTrueUri(HttpServletRequest request) throws MyErrorException {
		String orgUri = request.getRequestURI();
		int i = 0;
		int j = 0;
		
		if (orgUri == null) {
			throw new MyErrorException("获取原uri为空");
		}
		if (orgUri.startsWith("/Guest/WxConvert/") == false) {
			throw new MyErrorException("原uri前缀不匹配");
		}
		i = "/Guest/WxConvert/".length();
		j = orgUri.indexOf('/', i);
		if (j <= 0 || j <= i) {
			throw new MyErrorException("没有找到路径");
		}
		
		return orgUri.substring(j);
	}
	
	public static StringBuffer getReqProHostPort(HttpServletRequest request) {
        StringBuffer url = new StringBuffer();
        String scheme = request.getScheme();
        int port = request.getServerPort();
        if (port < 0) {
            // Work around java.net.URL bug
            port = 80;
        }

        url.append(scheme);
        url.append("://");
        url.append(request.getServerName());
        if ((scheme.equals("http") && (port != 80))
            || (scheme.equals("https") && (port != 443))) {
            url.append(':');
            url.append(port);
        }
        //url.append(request.getRequestURI());

        return url;
    }
	
}

http(s)辅助函数

javascript 复制代码 
	public static void HttpGet(HttpServletResponse response, String cookie, String toUrl) throws SocketException {		
		String strTmp = null;
		byte[] tmpBytes = null;
		InputStream inStream = null;
		try {
            URL url = new URL(toUrl);
	        HttpURLConnection connection = (HttpURLConnection) url.openConnection();
           	connection.setRequestMethod("GET");
            //connection.setRequestProperty("Content-Type", "application/json");
            connection.setConnectTimeout(10000);
            connection.setReadTimeout(20000);
            connection.setRequestProperty("User-Agent", "Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.2; Trident/4.0; .NET CLR 1.1.4322; .NET CLR 2.0.50727; .NET CLR 3.0.04506.30; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729)");
            connection.setRequestProperty("Cookie", cookie);
            connection.setDoOutput(true);
            connection.setDoInput(true);
            connection.connect();
            //tmpBytes = bodyData;
            
            //connection.getOutputStream().write(tmpBytes);
           // strTmp = "";
           int responseCode = connection.getResponseCode();           
           System.out.println("responseCode = " + responseCode);
           if (responseCode == 200) {
        	   inStream = connection.getInputStream();
        	   if (response != null) {
        		   response.setStatus(responseCode);
        		   MyStream.readAllToOutStream(inStream, response.getOutputStream());
        	   }
        	   //tmpBytes = MyStream.readAllBytes(inStream);
        	   //strTmp = (new String(tmpBytes));
        	   //System.out.println("post readAllBytes = " + strTmp);        	  
        	   inStream.close();
           } else {      	   
        	   strTmp = connection.getResponseMessage();
        	   if (response != null) {
	        	   if (strTmp != null && strTmp.length() > 0) {
	        		   response.setStatus(responseCode, strTmp);
	        	   } else {
	        		   response.setStatus(responseCode);
	        	   }
        	   }
        	   strTmp = "";
           }
            connection.disconnect();
        } catch (java.net.ConnectException e) {
        	throw e;
        } catch (java.net.SocketException e) {
        	throw e;
        }catch (Exception e) {
            e.printStackTrace();
        }
		
		//if (strTmp == null) {
		//	strTmp = "";
		//}
		
		//return strTmp;
	} 
	
	public static void HttpsGet(HttpServletResponse response, String cookie, String toUrl) throws SocketException {		
		String strTmp = null;
		byte[] tmpBytes = null;
		InputStream inStream = null;
		try {
            URL url = new URL(toUrl);
	        HttpsURLConnection connection = (HttpsURLConnection) url.openConnection();
	        connection.setHostnameVerifier(allHostsValid);
           	connection.setRequestMethod("GET");
            //connection.setRequestProperty("Content-Type", "application/json");
            connection.setConnectTimeout(10000);
            connection.setReadTimeout(20000);
            connection.setRequestProperty("User-Agent", "Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.2; Trident/4.0; .NET CLR 1.1.4322; .NET CLR 2.0.50727; .NET CLR 3.0.04506.30; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729)");
            connection.setRequestProperty("Cookie", cookie);
            connection.setDoOutput(true);
            connection.setDoInput(true);
           // connection.setSSLSocketFactory(createSSLSocketFactory());
            connection.connect();
            //tmpBytes = bodyData;
            
            //connection.getOutputStream().write(tmpBytes);
           // strTmp = "";
           int responseCode = connection.getResponseCode();           
           System.out.println("responseCode = " + responseCode);
           if (responseCode == 200) {
        	   inStream = connection.getInputStream();
        	   if (response != null) {
        		   response.setStatus(responseCode);
        		   MyStream.readAllToOutStream(inStream, response.getOutputStream());
        	   }
        	   //tmpBytes = MyStream.readAllBytes(inStream);
        	   //strTmp = (new String(tmpBytes));
        	   //System.out.println("post readAllBytes = " + strTmp);        	  
        	   inStream.close();
           } else {      	   
        	   strTmp = connection.getResponseMessage();
        	   if (response != null) {
	        	   if (strTmp != null && strTmp.length() > 0) {
	        		   response.setStatus(responseCode, strTmp);
	        	   } else {
	        		   response.setStatus(responseCode);
	        	   }
        	   }
        	   strTmp = "";
           }
            connection.disconnect();
        } catch (java.net.ConnectException e) {
        	throw e;
        } catch (java.net.SocketException e) {
        	throw e;
        }catch (Exception e) {
            e.printStackTrace();
        }
		
		//if (strTmp == null) {
		//	strTmp = "";
		//}
		
		//return strTmp;
	} 
	
	private static HostnameVerifier allHostsValid = new HostnameVerifier() {
		@Override
		public boolean verify(String hostname, SSLSession session) {
			return true;
		}

	};

	private static SSLSocketFactory createSSLSocketFactory() {
		TrustManager[] trustAllCerts = new TrustManager[] { new X509TrustManager() {
			@Override
			public void checkClientTrusted(X509Certificate[] chain, String authType) {
			}

			@Override
			public void checkServerTrusted(X509Certificate[] chain, String authType) {
			}

			@Override
			public X509Certificate[] getAcceptedIssuers() {
				return new X509Certificate[] {};
			}
		} };

		// 使用上述TrustManager初始化SSLContext
		SSLContext sslContext = null;
		try {
			sslContext = SSLContext.getInstance("SSL");
			sslContext.init(null, trustAllCerts, new java.security.SecureRandom());
		} catch (NoSuchAlgorithmException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		} catch (KeyManagementException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}

		// 创建一个不进行主机名验证的SSLConnectionSocketFactory
		return sslContext.getSocketFactory();
	}

最终请求资源的地方

java 复制代码 
package com.shenweihong.controller;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;

import com.shenweihong.html.ResponseFile;
import com.shenweihong.main.UserDir;

@Controller
public class ControllerWxTopWorkRecord {
	@GetMapping("/Function/WxTopWorkRecord/GetFunctionLogo/{PicName}")
	public void GetFunctionLogo(@PathVariable("PicName") String picName, HttpServletRequest request, HttpServletResponse response) {
		System.out.println("picName = " + picName);
		response.setContentType("image/jpeg");
		ResponseFile.ResponseWriteStreamFile(UserDir.GetResourceDir() + "static/wx_image/public/" + picName + ".jpg", response);
	}  
}
相关推荐
Emma歌小白10 小时前
如何首次运行小程序后端
微信小程序
赣州云智科技的技术铺子11 小时前
【一步步开发AI运动APP】十二、自定义扩展新运动项目1
微信小程序·小程序·云开发·智能小程序
2501_9159184112 小时前
iOS 上架全流程指南 iOS 应用发布步骤、App Store 上架流程、uni-app 打包上传 ipa 与审核实战经验分享
android·ios·小程序·uni-app·cocoa·iphone·webview
00后程序员张13 小时前
iOS App 混淆与加固对比 源码混淆与ipa文件混淆的区别、iOS代码保护与应用安全场景最佳实践
android·安全·ios·小程序·uni-app·iphone·webview
破无差1 天前
《赛事报名系统小程序》
小程序·html·uniapp
00后程序员张1 天前
详细解析苹果iOS应用上架到App Store的完整步骤与指南
android·ios·小程序·https·uni-app·iphone·webview
海绵宝宝不喜欢侬1 天前
uniapp-微信小程序分享功能-onShareAppMessage
微信小程序·小程序·uni-app
2501_915106321 天前
Xcode 上传 ipa 全流程详解 App Store 上架流程、uni-app 生成 ipa 文件上传与审核指南
android·macos·ios·小程序·uni-app·iphone·xcode
亮子AI1 天前
【小程序】微信小程序隐私协议
微信小程序·小程序
weixin_177297220691 天前
短剧小程序系统开发：打造个性化娱乐新平台
小程序·娱乐·短剧
热门推荐
01GitHub 镜像站点02UV 工具安装与国内镜像源配置指南03UV安装并设置国内源04Claude Code 平替：OpenAI发布 Codex CLI ，GPT-5 国内直接使用0546个Nano-banana 精选提示词，持续更新中06A股预测还能更准？开源大模型Kronos带你跑通预测+回测全流程07conda中设置镜像地址（附所有可换的地址）08保姆级教程：手把手教你用Dify实现完美多轮对话（附Chatflow和提示词）09KGG转MP3工具|非KGM文件|解密音频10解决 WSL Ubuntu 中 /etc/resolv.conf 自动重置问题