微信开发无法显示图片_微信 开发 图文 开发 图片 不显示 - CSDN
  • 微信开发的的时候有时需要预览图片,我们会用微信中的: wx.previewImage({ current: url, // 当前显示图片的http链接 urls: [] // 需要预览的图片http链接列表 });但是如果写完代码发现在手机上出现了黑屏的...

    在微信开发的的时候有时需要预览图片,我们会用微信中的:

        wx.previewImage({
            current: url, // 当前显示图片的http链接
            urls: [] // 需要预览的图片http链接列表
        });

    但是如果写完代码发现在手机上出现了黑屏的问题,有可能是以下几种情况:
    1、urls后以的[]没有去掉,这个属于语法错误了,去掉就可以了

    $(".img_prev").click(function(){
        var url =$(this).attr("src");
        var arr = Array();
        var urls =$("#img_prev").children("img").each(function(index){
            var temp = $(this).attr("src");
            arr.push(temp);
        });
    
        wx.previewImage({
            current: url, 
            urls: [arr] //这里就将[]去掉
        });
    });

    2、urls后的数组格式不正确,造成浏览器没有办法识别,这种情况经经常出现的就是在后台取出数据之后没有转换为js可以识别的数组而造成的;

    正确格式:

    $(".img_prev").click(function(){
        var url =$(this).attr("src");
        var arr = Array();
        var urls =$("#img_prev").children("img").each(function(index){
            var temp = $(this).attr("src");
            arr.push(temp);
        });
    
        wx.previewImage({
            current: url, // 当前显示图片的http链接
            urls: arr // 需要预览的图片http链接列表
        });
    });
    
    //如在必要可以将数组打印出来对比一下就可知道了
    
    展开全文
  • 今天整理一下微信开发中遇到的图片和附件的上传问题。 开发环境参考:微信开发(一)--分享接口 点击打开链接 由于是基于weixin-java-tools 封装的java sdk,所以在微信底层处理上我们可以直接调用WxMpService. ...

          今天整理一下微信开发中遇到的图片和附件的上传问题。

          开发环境参考:微信开发(一)--分享接口 点击打开链接

          由于是基于weixin-java-tools 封装的java sdk,所以在微信底层处理上我们可以直接调用WxMpService.

          .数据准备:

               进入页面前,根据条件查询相应的图片附件列表(已有数据时进行展示,没有数据可以忽略):

    	           //查询图片数据  
    		List<FileModel> imgList = fileModelService.loadFileModelsByBFTT(11);
    		   //查询附件数据
    		List<FileModel> attachmentFileList = fileModelService.loadFileModelsByBFTT(11);
    		

          二.页面准备:    

                jspye页面设置上传按钮,遍历读取图片列表   

        <!-- 图片上传 -->   
    				 <div class="form-group">
    				    <div class="input-group">
    				       <div class="input-group-addon "><span style="color:red;"> </span>图片上传:</div>
    				       <input type="hidden" name="fileIds" id="fileIds">
    				       <div class="input-group-addon">
    				       	
    				       				<a href="javascript:void(0)" οnclick="chooseImage('${basePath }','${id}');">
    						       			<span class="glyphicon glyphicon-plus"></span>
    						       		</a>
    				       
    				       </div>
    				    </div>
    				  </div>
    				  
    				  <!-- 缩略图 -->
    				  <ul class="body-img-ul">
    				  		<c:forEach items="${imgList}" var="v" varStatus="sta">
    				  			<li style="background-image:url('${simplePath }${v.revealpath }')" 
    				  				οnclick="previewImage('${simplePath }${v.revealpath }');">
    				  		
    					       		<i class="del_icon" οnclick="deleteImage('${v.id }',this,'${basePath }')"></i>
    		    	            </li>
    				  		</c:forEach>
    				  </ul>
    				   <!-- 附件上传 --> 
    				   <div class="form-group">
    				    <div class="input-group">
    				       <div class="input-group-addon "><span style="color:red;"> </span>附件上传:</div>
    				       <div class="input-group-addon">
    				       		<input type="hidden" name="attachmentIds" id="attachmentIds">
    				       		
    					       				<span class="glyphicon glyphicon-plus">
    					       					<input type="file" class="attachmentFile" name="attachmentFile" id="attachmentFile"
    						       				 οnchange="uploadAttachment('${basePath }','${id}');"/>
    					       				</span>
    				       </div>
    				    </div>
    				  </div>
    				  <!-- 附件 -->
    				  <ul class="body-file-ul">
    				  		<c:forEach items="${attachmentFileList }" var="v" varStatus="sta">
    		    	            <li>
    					  			<a href="${simplePath }${v.revealpath }">
    					  				<c:choose>
    			              		 		<c:when test="${fn:length(v.filename) < 20 }">
    			              		 			${v.filename }
    			              		 		</c:when>
    			              		 		<c:otherwise>
    			              		 			${fn:substring(v.filename,0,20) }....${v.extname }
    			              		 		</c:otherwise>
    			              		 	</c:choose>
    					  			</a>
    					
    					       				<i class="del_icon" οnclick="deleteImage('${v.id }',this,'${basePath }')"></i>
    		    	            </li>
    				  		</c:forEach>
    				  </ul>
    				<!-- 附件上传 -->  
    				    

         三.初始化jssdk:  

              controller

    @Controller
    @RequestMapping("jssdk")
    public class WeXinJsSdkController {
    	
    	@Autowired
    	private WxMpService wxMpService;
    	
    	@RequestMapping(value = "/config", method = RequestMethod.GET)
    	@ResponseBody
    	public WxJsapiSignature wxJsSdkConfig(HttpServletRequest request,String url) {
    		try {
    			WxJsapiSignature wxJsapiSignature = wxMpService.createJsapiSignature(url);
    			return wxJsapiSignature;
    		} catch (WxErrorException e) {
    			return null;
    		}
    	}
    	  
    }
      js请求获取config 参数 
    	/* 初始化jssdk */
    	$.get("${basePath}/jssdk/config.do",{url:window.location.href},function(data,status){
    		if(status == "success"){
    			wx.config({
    			    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
    			    appId: data.appId, // 必填,公众号的唯一标识
    			    timestamp: data.timestamp, // 必填,生成签名的时间戳
    			    nonceStr: data.nonceStr, // 必填,生成签名的随机串
    			    signature: data.signature,// 必填,签名,见附录1
    			    jsApiList: ['chooseImage', 'uploadImage', 'downloadImage', 'previewImage'] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
    			 
    			});
    			wx.ready(function(){
    				//layer.msg("jssdk初始化成功");
    			    // config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,
    			    //所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。
    			});
    			wx.error(function(res){
    			    // config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,
    			    //也可以在返回的res参数中查看,对于SPA可以在这里更新签名。
    				layer.msg(res);
    			});
    		}
    		},"json");

      js 配置

        1. chooseImage    手机选择或拍摄图片 
        2. uploadImage    上传图片到微信服务器
        3. downloadImage  下载图片到本地

        previewImage   本地图片预览 


    	
    	//微信sdk上传图片------------------------
    var images = {
    	    localIds: [],
    	    serverIds: [],
    	  }; 
    function chooseImage(basePath,id){
    	wx.chooseImage({
    	    count: 6, // 默认9
    	    sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
    	    sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
    	    success: function (res) {
    	    	images.localIds = res.localIds; // 返回选定照片的本地ID列表,localId可以作为img标签的src属性显示图片
    	    	//显示缩略图
    	        for(var i=0;i<images.localIds.length;i++){
    	        	var liLength = $(".body-img-ul li").length;
    	        	if(liLength >= 6 ){
    	        		layer.msg("最多允许上传6张图片!");
    					return;
    		        }
    	        	var imgHtml = "<li style=\"background-image:url('"+images.localIds[i]+"')\"";
    	        		   imgHtml += "οnclick=\"previewImage('"+images.localIds[i]+"')\">";
    	        		   imgHtml += "<i class=\"del_icon\"></i>";
    	        		   imgHtml += "</li>";
    	  				
    	        	$(".body-img-ul").append(imgHtml);
    		    }
    		    //递归的上传图片
    	        syncUpload(images.localIds,id);
    	    }
    	});
    }
    //将微信服务器的图片下载到本地
    var syncUpload = function(localIds,id){
    	var localId = localIds.pop();
    	//上传图片到微信服务器
        wx.uploadImage({
            localId: localId, // 需要上传的图片的本地ID,由chooseImage接口获得
            isShowProgressTips: 1, // 默认为1,显示进度提示
            success: function (res) {
            	images.serverIds.push(res.serverId); // 返回图片的服务器端ID
                if(localIds.length > 0){
                	syncUpload(localIds,id);  
                }else if(images.localIds.length == 0){
                	var serverids = images.serverIds.join(',');
                	$.post(
                		basePath+"/fileupload/uploadImg.do",
                		{"serverIds":serverids,"id":id}
                		,function(data,status){
            			if(status == "success"){
            				images.serverIds = [];
            				//存储文件id到页面
            				setFileIds(data.join(','));
            				
            				var tempLen = $(".del_icon").length;
            				var dataLen = data.length;
            				var del_index;
            				var del_id;
            				for(var i = 1;i<dataLen+1;i++){
            					del_index = tempLen-i;
            					del_id = data[i-1];
            					addDeleteEvent(del_index,del_id,basePath);
            				}
            				layer.msg("上传成功!");
            			}
            	  },"json");
                }
            }
        });
     }
    //添加事件
    function addDeleteEvent(del_index,del_id,basePath){
    	$(".del_icon").eq(del_index).click(function(e){
    		deleteImage(del_id,this,basePath);
    		window.event.cancelBubble = true;
    	});
    }
    //添加上传的filemodeID
    function setFileIds(fildIds){
    	var temp = $("#fileIds").val();
    	if(temp == ""){
    		 $("#fileIds").val(fildIds)
    	}else{
    		$("#fileIds").val(temp+","+fildIds)
    	}
    }
    //预览图片
    function previewImage(url){
    	document.write("url----"+url);
    	 wx.previewImage({
             current: url, // 当前显示图片的http链接
             urls: [url] // 需要预览的图片http链接列表
    	 });
    }
    //异步删除图片
    function deleteImage(id,obj,basePath){
    	$.ajax({
    		  type: 'POST',
    		  url: basePath+"/fileupload/deleteFile.do",
    		  data:{"id":id},
    		  dataType: 'json',
    		  success: function(data){
    			 if(data.state == 200){
    				layer.msg("删除成功!");
    				 //移除对应数据
    				 $(obj).parent()[0].remove();
    			 }else{
    				 layer.msg("删除失败!");
    			 }
    		  }
    		});
    	 window.event.cancelBubble = true;
    }
    //微信sdk上传图片------------------------
    //上传附件
    function uploadAttachment(basePath,id) {
       //限制数量
    	var liLength = $(".body-file-ul li").length;
    	if(liLength >= 6 ){
    		layer.msg("最多允许上传6份附件!");
    		return;
        }
       //上传文件
       $.ajaxFileUpload({
           url: basePath+"/fileupload/uploadAttachment.do", //文件上传到哪个地址,告诉ajaxFileUpload
           data:{"bussinessId":bussinessId,"id":id},
           secureuri: false, //一般设置为false
           fileElementId: 'attachmentFile', //文件上传控件的Id  <input type="file" id="fileUpload" name="file" />
           dataType: 'json', //返回值类型 一般设置为json
           success: function (data, status){//服务器成功响应处理函数
        	   if(data.state == 200){
        		   var imgHtml = "<li>";
        		   imgHtml += "<a href=\""+basePath+data.data[2]+"\">"+data.data[1]+"</a>";
        		   imgHtml += "<i class=\"del_icon\" οnclick=\"deleteImage('"+data.data[0]+"',this,'"+basePath+"')\"></i>";
        		   imgHtml += "</li>";
        		   $(".body-file-ul").append(imgHtml)
        		   //存储文件id到页面
        		   setFileIds(data.data[0]);
        	   }
    		   layer.msg(data.msg);
           	}
           });
       };
    	
    
    .后台配置文件名称,设置本地存储路径,把相应数据存储到本地:  

    @Controller
    @RequestMapping("/fileupload")
    public class FileUploadController {
    	
    	public String prefix ="yongjun/upload/";
    	private Logger logger = LoggerFactory.getLogger(this.getClass());
    	@Autowired
    	private WxMpService wxMpService;
    	@Autowired
    	private UsersService usersService;
    	@Autowired
    	private FileModelService fileModelService;
    	@Value(value = "#{resourceProperties['uploadUrl']}")
    	private String uploadUrl;
    	
    	@RequestMapping(value = "/uploadImg", method = RequestMethod.POST)
    	@ResponseBody
    	public String[] uploadImg(String serverIds,BigDecimal id,HttpServletRequest request){
    		
    		String[] result;
    		//获取当前用户
    		CurrentUser currentUser = usersService.getCurrentUser(request);
    		try {
    			String[] serverId_arr = serverIds.split(",");
    			if(serverId_arr != null && currentUser != null){
    				//图片存储
    				List<FileModel> fileModelStorelist = new ArrayList<FileModel>();
    				for (int i=0;i<serverId_arr.length;i++) {
    					File file = wxMpService.getMaterialService().mediaDownload(serverId_arr[i]);
    					String filePath = FileUploadUtil.uploadImg(file, uploadUrl, currentUser);
    					//文件模型数据
    					FileModel fileModel = new FileModel();
    					fileModel.setCreatedTime(new Date());
    					byte disabled = 0;
    					fileModel.setDisabled(disabled);
    					fileModel.setFilename(file.getName());
    					fileModel.setRealname(file.getName());
    					fileModel.setExtname(filePath.substring(filePath.lastIndexOf(".")+1));
    					fileModel.setFilepath(filePath);
    					fileModel.setRevealpath(filePath.replace("C:\\crm2009\\upload", "/myImg").replace("\\", "/"));
    					fileModel.setFiletype("image");
    					
    					fileModelStorelist.add(fileModel);
    				}
    				result = fileModelService.storeFileModelList(fileModelStorelist);
    				return result;
    			}else{
    				logger.info("当前用户不存在!!");
    				return null;
    			}
    		} catch (Exception e) {
    			e.printStackTrace();
    			logger.info("下载文件失败!!"+e.getClass());
    			return null;
    		}
    		
    		
    	}
    	@RequestMapping(value = "/uploadAttachment", method = RequestMethod.POST)
    	@ResponseBody
    	public ResultData uploadAttachment(BigDecimal bussinessId,BigDecimal id,HttpServletRequest request,MultipartFile attachmentFile){
    		
    		//判断文件类型
    		String originalFilename = attachmentFile.getOriginalFilename();
    		String[] imagType={".jpg",".png",".bmp",".gif"};
    		List<String> imagTypeList = Arrays.asList(imagType);
    		if(imagTypeList.contains(originalFilename.substring(originalFilename.lastIndexOf(".")).toLowerCase())){
    			return ResultData.error("无法上传图片!");
    		}
    		String[] result = new String[3];
    		//获取当前用户
    		CurrentUser currentUser = usersService.getCurrentUser(request);
    		try {
    			if(currentUser != null){
    				//上传文件
    				String filePath = FileUploadUtil.uploadFile(attachmentFile, uploadUrl, currentUser);
    				//文件模型数据
    				FileModel fileModel = new FileModel();
    				fileModel.setCreatedTime(new Date());
    				byte disabled = 0;
    				fileModel.setBussinessid(bussinessId);
    				fileModel.setDisabled(disabled);
    				fileModel.setFilename(originalFilename);
    				fileModel.setRealname(filePath.substring(filePath.lastIndexOf("/")+1));
    				fileModel.setExtname(filePath.substring(filePath.lastIndexOf(".")+1));
    				fileModel.setFilepath(filePath);
    				fileModel.setRevealpath(filePath.replace("C:\\crm2009\\upload", "/myImg").replace("\\", "/"));
    				fileModel.setFiletype("attachment");
    				fileModelService.storeFileModel(fileModel);
    				
    				result[0] = fileModel.getId().toString();
    				result[1] = fileModel.getFilename();
    				result[2] = fileModel.getRevealpath();
    				return ResultData.ok(result, "上传成功!");
    			}else{
    				logger.info("当前用户不存在!!");
    				return null;
    			}
    		} catch (Exception e) {
    			e.printStackTrace();
    			logger.info("下载文件失败!!"+e.getClass());
    			return null;
    		}
    		
    		
    	}
    	
    	@RequestMapping(value = "/deleteFile", method = RequestMethod.POST)
    	@ResponseBody
    	public ResultData deleteFile(BigDecimal id){
    		fileModelService.deleteFileModel(id);
    		return ResultData.ok();
    	}
    	
    }
    .设置 文件转接工具类:

         

    public class FileUploadUtil {
    	/**
    	 * 上传文件
    	 * @param file 源文件
    	 * @param uploadUrl 上传地址
    	 * @param currentUser 当前用户
    	 * @param fileType 
    	 * @return
    	 */
    	public  static String uploadImg(File file,String uploadUrl,CurrentUser currentUser) {
    		//处理待写入的位置
    		if(currentUser != null){
    			uploadUrl += "\\image\\" +currentUser.getLoginName().toString();
    		}
    		File uploadPosition = new File(uploadUrl);
    		if(!uploadPosition.exists()){
    			//文件路径不存在,则创建
    			uploadPosition.mkdirs();
    		}
    		if (file.renameTo(new File(uploadPosition + "\\" + file.getName()))) {
                System.out.println("File is moved successful!");
            } else {
                System.out.println("File is failed to move!");
            }
    		return uploadPosition + "/" + file.getName();
    	}
    	public  static String uploadFile(MultipartFile file,String uploadUrl,CurrentUser currentUser) throws UnsupportedEncodingException {
    		//处理待写入的位置
    		if(currentUser != null){
    			uploadUrl += "\\attachment\\" +currentUser.getLoginName().toString();
    		}
    		File uploadPosition = new File(uploadUrl);
    		if(!uploadPosition.exists()){
    			//文件路径不存在,则创建
    			uploadPosition.mkdirs();
    		}
    		String originalFilename = file.getOriginalFilename();
    		String realName = UUID.randomUUID().toString() + originalFilename.substring(originalFilename.lastIndexOf("."));
    		try {
    			file.transferTo(new File(uploadPosition + "\\" +  realName));
    			System.out.println("File is moved successful!");
    		} catch (IllegalStateException | IOException e) {
    			e.printStackTrace();
    			System.out.println("File is failed to move!");
    		}
    		return uploadPosition + "/" + realName;
    	}
    } 
       学习在于不断地探索、思考和总结记录,欢迎喜欢的朋友们在下方留言,与君共同进步!







    展开全文
  • 最近自己在做毕设,是一个微信小程序,虽然自己有一点前端开发经验,以为小程序前端和这个差不多可以直接开撸,但是这两天被一些图片问题烦了好久。 这也是自己第一次写博客,实在太生气了,网上也没找到自己想要的...

    最近自己在做毕设,是一个微信小程序,虽然自己有一点前端开发经验,以为小程序前端和这个差不多可以直接开撸,但是这两天被一些图片问题烦了好久。

    这也是自己第一次写博客,实在太生气了,网上也没找到自己想要的结果,所以写下来记录下来,顺便让和我一样错误的人知道咋解决,笑cry,虽然真的很低级的错误。
    以下是遇到的问题。
    1:在开发者工具可以显示图片,手机预览,真机调试却看不到。
    2:在最开始的iphone5环境里调试开发,设置的图片是定位而且定位 top:0rpx;在父级元素上的,不同环境却有空白部分。
    ps:所有这些都是在建立本地开发环境上的,上线的我不知道。

    然后以下是自己解决方法。
    1:原来是图片名字是带有了中文,但是在开发者工具可以看到,在手机预览上却没有看到,我把它换成英文就没事了。主要是自己在阿里图标下的图片,自带中文,而自己在tab里设置的图片也是中文名字的,但是没事,一切照常显示,所以我以为这样是可以的,当然我不知道上线后会不会有改变,我的小程序目前只是在本地开发,还没有。所以总结是:image标签路径里文件名不能带有中文,不然,虽然在电脑开发能看到,手机预览看不到的(个中缘由我也不清楚)。
    2:看了很久wxml,wxss,后再调试才发现是image的mode属性设置的问题,因为图片不够大,而view又比较大,mode设置的是bottom,所以在有些设备情况下,图片上面会有留白,同理,center也是。
    下面再分享下自己在csdn上看到的另一个可能对新手有帮助的有关微信小程序image显示的问题的帖子吧。

    微信小程序 图片在真机不显示跳坑总结
    https://blog.csdn.net/qq_35112961/article/details/78247108
    em…现在再看才发现,原来里面有自己的情况啊,是自己大意了没有检查啊。

    那么就总结如下吧:
    1:本地开发环境下,tab里设置的图片文件名里可以带有中文名,但是在image标签里不行。
    2:本地开发环境下,image标签的mode设置为bottom,center之类的不缩放显示下面图片时,如果图片不够大,父级元素又很大的时候,可能上面会有留白,即使设置了定位top:0rpx;也没用。

    oh yeah 人生中第一篇博客。哈哈哈哈。。。2333

    展开全文
  • 有时会不显示自定义的图片和描述。分步骤检查出现的问题: 调用config 接口的时候传入参数 debug: true 可以开启debug模式,页面会alert出错误信息。以下为常见错误及解决方法: 1.invalid url domain当前页面所在...

    在做h5页面分享时,用到了微信的自定义分享js-sdk  。

    有时会不显示自定义的图片和描述。分步骤检查出现的问题:

    调用config 接口的时候传入参数 debug: true 可以开启debug模式,页面会alert出错误信息。以下为常见错误及解决方法:

    1.invalid url domain当前页面所在域名与使用的appid没有绑定,请确认正确填写绑定的域名,仅支持80(http)和443(https)两个端口,因此不需要填写端口号(一个appid可以绑定三个有效域名,见 ]目录1.1.1)。

    2.invalid signature签名错误。建议按如下顺序检查:

    1.确认签名算法正确,可用http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign 页面工具进行校验。

    2.确认config中nonceStr(js中驼峰标准大写S), timestamp与用以签名中的对应noncestr, timestamp一致。

    3.确认url是页面完整的url(请在当前页面alert(location.href.split('#')[0])确认),包括'http(s)://'部分,以及'?'后面的GET参数部分,但不包括'#'hash后面的部分。

    4.确认 config 中的 appid 与用来获取 jsapi_ticket 的 appid 一致。

    5.确保一定缓存access_token和jsapi_ticket。

    6.确保你获取用来签名的url是动态获取的,动态页面可参见实例代码中php的实现方式。如果是html的静态页面在前端通过ajax将url传到后台签名,前端需要用js获取当前页面除去'#'hash部分的链接(可用location.href.split('#')[0]获取,而且需要encodeURIComponent),因为页面一旦分享,微信客户端会在你的链接末尾加入其它参数,如果不是动态获取当前链接,将导致分享后的页面签名失败。

    3.the permission value is offline verifying这个错误是因为config没有正确执行,或者是调用的JSAPI没有传入config的jsApiList参数中。建议按如下顺序检查:

    1.确认config正确通过。

    2.如果是在页面加载好时就调用了JSAPI,则必须写在wx.ready的回调中。

    3.确认config的jsApiList参数包含了这个JSAPI。

    4.permission denied该公众号没有权限使用这个JSAPI,或者是调用的JSAPI没有传入config的jsApiList参数中(部分接口需要认证之后才能使用)。

    5.function not exist当前客户端版本不支持该接口,请升级到新版体验。

     

     

    检查了这些之后,发现有时分享可以显示自定义的图片和描述,有时不可以。

    1、在网上搜索说是1.4.0的版本的分享到朋友圈和发送给朋友的api(1.4.0新版本:updateTimelineShareData和updateAppMessageShareData)要用旧版本(旧版本:onMenuShareTimeline和onMenuShareAppMessage)的,但是我线上替换成旧版本的还是不行。但是看后台打印的日志是获取不到jsapi_ticket了,发现是后台的原因,只能后台人员去解决了。

    2、用的是前台发送url给后台接口,这个url需要encodeURIComponent,后台再decodeURIComponent,然后后台接口返回timestamp  、nonceStr和signature,代码如下:

    $(function () {
      var winUrl = window.location.href.split("#")[0];
      /* if(winUrl.indexOf('from=singlemessage')>0 || winUrl.indexOf('isappinstalled')>0){
        winUrl = winUrl.split('?from=singlemessage')[0]
      } */
      var meta = document.getElementsByTagName('meta');
      var share_desc = '';
      for (i in meta) {
        if (typeof meta[i].name != "undefined" && meta[i].name.toLowerCase() == "description") {
          share_desc = meta[i].content;
        }
      }
      $.ajax({
        type: "post",
        url: "/post/getShareSignature",
        crossDomain: true,
        dataType: "json",
        contentType: "application/json; charset=utf-8",
        data: JSON.stringify({
          "articleUrl": encodeURIComponent(winUrl)
        }),
        success: function (msg) {
          //console.log(" timestamp:" + msg.data.timestamp + " ; noncestr:" + msg.data.noncestr + ";  signature:" + msg.data.signature);
    
          wx.config({
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
            appId: "wx91f855a7c7f4187b", // 必填,公众号的唯一标识
            timestamp: msg.data.timestamp, // 必填,生成签名的时间戳
            nonceStr: msg.data.noncestr, // 必填,生成签名的随机串
            signature: msg.data.signature, // 必填,签名,见附录1
            jsApiList: ['onMenuShareTimeline',
              'onMenuShareAppMessage'
            ] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
          });
          wx.ready(function () {
            var title, img_url;
            if (winUrl.indexOf('post') != -1) {
              //IOS系统分享时读取图片路径会出现问题 用 encodeURI 来处理下
              title = $("#articleTitle").val();
              img_url = encodeURI($("#coverImg").val());
    
    
            } else if (winUrl.indexOf('school') != -1) {
              title = document.title;
              img_url = encodeURI($("#schoolBadge").attr("src"));
            } else if (winUrl.indexOf('seventy') != -1) {
              title = document.title;
              img_url = encodeURI('https://xsn.com.cn/fileDir/cnypaData/seventy.jpg');
            } else {
              title = document.title;
              img_url = encodeURI(location.href.split('.cn/')[0] + '.cn/img/Group.png')
            }
            //分享到朋友圈
            wx.onMenuShareTimeline({
              title: title, // 分享标题
              link: winUrl, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
              imgUrl: img_url, // 分享图标
    
              success: function () {
                console.log('已分享');
              },
              cancel: function () {
                console.log('已取消');
              },
              fail:function(res){
                alert(JSON.stringify(res))
              }
            }); //分享给微信好友
            wx.onMenuShareAppMessage({
              title: title, // 分享标题
              desc: share_desc,
              link: winUrl, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
              imgUrl: img_url, // 分享图标
              type: '', // 分享类型,music、video或link,不填默认为link
    
              success: function () {
                console.log('已分享');
              },
              cancel: function () {
                console.log('已取消');
              },
              fail:function(res){
                alert(JSON.stringify(res))
              }
            });
    
    
            wx.error(function (res) {
              console.log("res:", res)
            })
          });
    
    
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
          console.log("error" + errorThrown);
        }
      });
    
    
    
    
    
    })
    
    //  微信js - sdk分享 end

    3、另一个原因是后台只缓存了acess_token,没有缓存jsapi_ticket。这就又把问题抛到后台了(大笑,来回踢皮球,哈哈哈)。然后只能后台去找原因了。从后台打印出的日志来看,凡是分享不显示图片和描述的,都是jsapi_ticket没获取到为null,分析有可能是没有缓存jsapi_ticket导致的,微信这边做了限制,必须缓存jsapi_ticket和access_token。

    参考链接:

    https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115   附录5-常见错误及解决方法  这里微信有说明。官网帮你找问题。哈哈哈

    https://segmentfault.com/q/1010000002520634

    展开全文
  • 微信分享功能终于实现,但是分享到朋友圈的图片可以显示,分享给朋友的图片显示不出来,在网上查了一些资料,导致像这种现象的原因大致有下面几种 1、图片大小和尺寸太大出不来 2、图片路径有{-}中划线 3、...
  • 目前越来越多的网站做了图片防盗链,对我们实际开发造成了不小的影响 。特别是微信的素材库,一直得不到图片内容。 前前后后用了很多方案,包括使用搜狗图片加载,传送门图片加载,QQ浏览器加载,但是终究不是自己...
  • 其实小程序里边想要显示图片,也是有两种途径,方法和php中大同小异,不过需要注意的是,在wxss样式文件里边是不识别本地的图片url的,但是它是认可网络路径图片。让我们先来看一下开发者文档中关于image的介绍第一...
  • 微信开发 — 调用微信上传图片接口,并保存到自己的服务器 整体思路是这样的: 1.先把手机上的图片上传到微信服务器,然后返回一个图片ID 2.在通过后台根据ID从微信后台拿到流,保存到服务器 前几个步骤在之前的博客上有...
  • 为了方便以及风格统一在最近做到的项目...测试之后发现在安卓中可以正常显示而IOS中图片无法正常显示。通过搜集资料后发现问题出在微信的文档上。 微信的文档是1.0.0的版本,而在这个版本IOS要想通过localid去实现预览
  • 通过使用微信JS-SDK,网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力,同时可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力,为微信用户提供更优质的网页体验。 此文档面向网页...
  • java 微信开发 被动回复图片消息中,已经获得在微信服务器上该图片的mediaId了(因为 根据该mediaId可以从微信服务器上下载下来),但是被动回复该图片就是不能显示出来, 而是提示:"该公众号暂时无法提供服务,请...
  • 最近要在微信上做个问卷调查,有个上传图片功能,折腾找了半天资料,都不好弄,最终打算调用微信提供的上传图片接口,实现上传图片功能!此功能最大的好处是可以在微信服务器上暂存图片,减少本地服务器图片的缓存,...
  • 上一篇《微信开发学习总结(一)——微信开发环境搭建》我们已经完成了微信开发的准备工作,准备工作完成之后,就要开始步入正题了。 一、微信公众平台的基本原理  在开始做之前,先简单介绍了微信公众平台的基本...
  • &lt;div class="weui-flex shenheimg_center"&gt; &lt;div class="weui-flex__item"&gt; &lt;a&gt; &lt;img src="../img/img1.png"...
  • function clickImg(that){ wx.chooseImage({ count: 1, needResult: 1, sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有 sourceType: ['album', 'camera'], // ...
  • 目前已经获取微信公众号发布的图片,但不能正常显示提示:此图片来自微信公众平台未经允许不得引用查看了一下他的地址是这样的:...amp;wx...
  • 微信开发h5图片上传 开发环境 vue.js,原生h5 input file, 微信公众号网页 依赖安装 exif-js:IOS下拍照照片的方向有问题, 需要exif-js来读取照片信息进行旋转处理; axios: 异步请求支持 vuex: 主要用来存储进度...
  • 如何在微信公众号实现图片裁剪
  • 在这粘贴上三篇博文链接,方便大家查阅互相学习: ... 微信公众号开发《二》发送模板...本次讲解微信开发第四篇:调用微信JS-SDK实现上传手机图片到服务器,是非常常见的功能。如我们看到的用户上传头像 下面是本次要...
  • 之前做过一个小程序项目,页面中有背景图片,使用web开发工具调试时候背景图片能正常显示,使用真机调试及发布线上版本的时候图片显示,刚开始以为是图片显示路径问题,后面问啦度娘后才发现微信小程序不支持背景图片...
1 2 3 4 5 ... 20
收藏数 40,661
精华内容 16,264
关键字:

微信开发无法显示图片