• 微信开发 — 调用微信上传图片接口,并保存到自己的服务器 整体思路是这样的: 1.先把手机上的图片上传到微信服务器,然后返回一个图片ID 2.在通过后台根据ID从微信后台拿到流,保存到服务器 前几个步骤在之前的博客上有...

    微信开发 — 调用微信上传图片接口,并保存到自己的服务器

    整体思路是这样的:
    1.先把手机上的图片上传到微信服务器,然后返回一个图片ID
    2.在通过后台根据ID从微信后台拿到流,保存到服务器
    前几个步骤在之前的博客上有提到调通wx.config{}
    js

    $.ajax({
    		type : "post",
    		url : "wx/sys.do", //之前的博客上有写到
    		data : {
    			"url" : location.href.split('#')[0]
    		},
    		dataType : "json",
    		success : function(data) {
    			wx.config({
    				debug : false, // 开启调试模式   
    				appId : data.data.appId,
    				timestamp : data.data.timestamp,
    				nonceStr : data.data.nonceStr,
    				signature : data.data.signature,
    				jsApiList : [ 'checkJsApi', 'uploadImage', 'chooseImage' ]
    			// 必填,需要使用的JS接口列表,所有JS接口列表见附录2 
    			});
    			wx.error(function(res) {
    				alert("出错了:" + res.errMsg);//这个地方的好处就是wx.config配置错误,会弹出窗口哪里错误,然后根据微信文档查询即可。
    			});
    
    			wx.ready(function() {
    				wx.checkJsApi({
    					jsApiList : [ 'chooseImage' ],
    					success : function(res) {
    
    					}
    				});
    			});
    			//点击按钮
    			$("#scanQRCode").click(function() {
    				wx.chooseImage({
    					count : 1, // 默认9
    					sizeType : [ 'original', 'compressed' ], // 可以指定是原图还是压缩图,默认二者都有
    					sourceType : [ 'album', 'camera' ], // 可以指定来源是相册还是相机,默认二者都有
    					success : function(res) {
    						var localIds = res.localIds; // 返回选定照片的本地ID列表,localId可以作为img标签的src属性显示图片
    						localIdArr = localIds;
    						uploadImg(localIds);
    					}
    				});
    			});
    
    		}
    	});
    
    	var int = 0;
    	var serverIdArr = new Array();
    	var localIdArr = new Array();
    	function uploadImg(localIds) {//上传成功,微信服务器会返回一个本地ID,可以预览
    		wx.uploadImage({//根据本地ID获得微信服务器ID
    			localId : localIds[int].toString(), // 需要上传的图片的本地ID,由chooseImage接口获得
    			isShowProgressTips : 1, // 默认为1,显示进度提示
    			success : function(res) {
    				var serverId = res.serverId; // 返回图片的服务器端ID
    				var id = $('#id').val();//id
    				$.ajax({
    					type : "post",
    					//这个方法很重要
    					url : "wx/upload.do?mediaId=" + serverId + "&id=" + id,//mediaId这个就是微信返回的id传到后台
    					data : {
    					//data: {"mediaId": serverId},  
    					},
    					dataType : "json",
    					success : function(msg) {
    						if (msg.code == 1) {
    							top.layer.msg("上传成功!", {
    								icon : 6
    							});
    							location.reload();
    						} else {
    							lock = true;
    							top.layer.msg(msg.msg, {
    								icon : 5
    							});
    						}
    					}
    				});
    
    			}
    		});
    	}
    

    jsp
    因为框架不同 样式可能不太一样
    我这个上传成功后刷新页面从服务器取一下上传的图片

    <div class="layui-input-block" style="margin-top: 10px; margin-bottom: 10px; display: block;" id="divy">
    			<img <c:if test="${url.url == null}">src="images/null.jpg" </c:if> src="/${url.url}" width="160px" height="150px" />
    </div>
    <div class="layui-input-block" style="margin-top: 10px; margin-bottom: 10px;">
    			<button class="layui-btn layui-btn-normal" id="scanQRCode" style="text-align: center; background-color: #ff4e00; width: 160px;">上传微信二维码</button>
    </div> 
    

    Controller

    /**
    	 * @Method 微信图片下载到服务器
    	 * @author 
    	 * @throws Exception
    	 * @createTime
    	 */
    	@ResponseBody
    	@RequestMapping("upload")
    	public JsonBean upload(String mediaId, HttpServletRequest servletRequest, HttpServletRequest request, int id) throws Exception {
    		InputStream input = null;
    		FileOutputStream output = null;
    		try {
    		// 从微信获取的流,这个utils就是根据返回mediaId后去流的
    			input = picDownload.getInputStream(mediaId);
    			String path = "qr";
    			File folder = new File(uploadFilePath + path);
    			if (!folder.exists()) {
    				folder.mkdirs();
    			}
    
    			File targetFile = new File(folder, new SimpleDateFormat("yyyyMMddHHmmssSSS").format(new Date()) + ".jpg");
    			output = new FileOutputStream(targetFile);
    			IOUtils.copy(input, output);
                //上边就是把图片保存到服务器里
                //下边是数据库的一些操作
    			// 如果数据库有就删除
    			QrMe qrMe = qrMeService.selectTeacherId(id);
    			if (qrMe != null) {
    				qrMeService.deleteUrl(id);
    				new File(uploadFilePath + qrMe.getUrl()).delete();
    			}
    
    			// 添加数据库
    			QrMe newQrMe = new QrMe();
    			newQrMe.setUrl(path + "/" + targetFile.getName());
    			newQrMe.setTeacherid(id);
    			return qrMeService.insertQR(newQrMe);
    		} finally {
    			IOUtils.closeQuietly(input);
    			IOUtils.closeQuietly(output);
    		}
    	}
    

    utils

    package com.admin.commons.utils;
    
    import java.io.FileOutputStream;
    import java.io.IOException;
    import java.io.InputStream;
    import java.net.HttpURLConnection;
    import java.net.URL;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.stereotype.Component;
    
    @Component
    public class PicDownload {
    
       //微信接口 
    	@Autowired
    	private WeiXinUtils weiXinUtils;
    	
    	/**
    	 * 根据文件id下载文件
    	 * 
    	 * @param mediaId 媒体id
    	 * @throws IOException
    	 * @throws Exception
    	 */
    	public InputStream getInputStream(String mediaId) throws IOException {
    		InputStream is = null;
    		String url = "http://file.api.weixin.qq.com/cgi-bin/media/get?access_token=" + weiXinUtils.getAccessToken() + "&media_id=" + mediaId;  根据AccessToken获取media
    
    		try {
    			URL urlGet = new URL(url);
    			HttpURLConnection http = (HttpURLConnection) urlGet.openConnection();
    			http.setRequestMethod("GET"); // 必须是get方式请求
    			http.setRequestProperty("Content-Type", "application/x-www-form-urlencoded");
    			http.setDoOutput(true);
    			http.setDoInput(true);
    			System.setProperty("sun.net.client.defaultConnectTimeout", "30000");// 连接超时30秒
    			System.setProperty("sun.net.client.defaultReadTimeout", "30000"); // 读取超时30秒
    			http.connect();
    			is = http.getInputStream();
    		} catch (Exception e) {
    			e.printStackTrace();
    		}
    
    		return is;
    	}
    
    	/**
    	 * 获取下载图片信息(jpg)
    	 * 
    	 * @param mediaId 文件的id
    	 * @throws Exception
    	 */
    
    	public void saveImageToDisk(String mediaId) throws Exception {
    		InputStream inputStream = getInputStream(mediaId);
    		byte[] data = new byte[1024];
    		int len = 0;
    		FileOutputStream fileOutputStream = null;
    		try {
    			fileOutputStream = new FileOutputStream("test1.jpg");
    			while ((len = inputStream.read(data)) != -1) {
    				fileOutputStream.write(data, 0, len);
    			}
    		} catch (IOException e) {
    			e.printStackTrace();
    		} finally {
    			if (inputStream != null) {
    				try {
    					inputStream.close();
    				} catch (IOException e) {
    					e.printStackTrace();
    				}
    			}
    
    			if (fileOutputStream != null) {
    				try {
    					fileOutputStream.close();
    				} catch (IOException e) {
    					e.printStackTrace();
    				}
    			}
    		}
    	}
    }
    
    

    刚开始接触这个功能,在网上找了很多资料踩了很多坑,图片不是直接上传到服务器的,而是先上传到微信的服务器,然后再下载到自己的服务器
    前台我用的是layui框架

    展开全文
  • 微信开发者工作是微信官方提供的针对微信小程序的开发工具,集中了开发,调试,预览,上传等功能。下面来介绍下自己的针对小程序和微信开发者工具的使用心得。 下载地址:开发者工具下载地址 1.下载并安装以后打开,...

    微信开发者工作是微信官方提供的针对微信小程序的开发工具,集中了开发,调试,预览,上传等功能。下面来介绍下自己的针对小程序和微信开发者工具的使用心得。

    下载地址:开发者工具下载地址

    1.下载并安装以后打开,需使用微信号扫码登录开发者工具

    登陆新建一个quick start项目


    如果还没有注册,可以填写无AppID,它会显示部分功能受限,实际上并没有太大影响。

    2.添加一个quick start项目


    3.目录结构

    从上图的右侧可以很清晰地看出来一个微信小程序的结构,一个微信小程序的页面包括四个文件:

    a.“.js”后缀的是脚本文件,主要是写一些业务逻辑的代码,基本和JavaScript一样。(在开发过程中发现一些函数JS有而微信没有,毕竟这是微信自己的一套东西)。

    b.“.json”后缀的是配置文件,例如tab的各种属性,实际中每个小页面的使用的并不多,涉及全局配置的app.json使用比较多,app.json中包括定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。

    c.“.wxml”后缀的是前端显示页面文件,你也可以把它理解为html页面,规则也和html5很类似,还是那句话,并不是完全一样,有些H5实现的东西wxml并不能实现。

    d.“wxss”后缀的是样式表文件,类似于css。

    以上是每个微信小程序页面的四种基本构成,微信开发者工具会根据这些,编译生成相应的小程序实例。


    展开全文
  • 微信开发者工具在咱们开发微信小程序和微信公众号时会使用上,之前遇到一个问题就是在微信的授权页面点击不生效,其实不是点击不生效,是点击的位置偏移,最后找到问题所在是因为win10有缩放大小的问题(按照下面的...

    微信开发者工具在咱们开发微信小程序和微信公众号时会使用上,之前遇到一个问题就是在微信的授权页面点击不生效,其实不是点击不生效,是点击的位置偏移,最后找到问题所在是因为win10有缩放大小的问题(按照下面的图片设置就好啦,因为是2k显示器的原因整体显示效果会变动,开发完成之后在修改到你之前的比列就好了)。

     

     

    展开全文
  • 微信开发者工具(一) 一、微信开发者工具基本信息 1.1 微信开发者工具的下载 ​ 直接打开下面网址进行下载: ​ https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html 1.2 下载以后登录 1.3 ...

    微信开发者工具(一)

    一、微信开发者工具基本信息

    1.1 微信开发者工具的下载

    直接打开下面网址进行下载:

    https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

    1.2 下载以后登录

    登录微信开发者工具.png

    1.3 新建项目

    1.4 微信开发者工具详情页

    [外链图片转存失败(img-gmV5PArB-1567256776341)(https://i.loli.net/2019/08/30/yvtRNblSdWjp4K5.png)]

    1. 模拟器:

      • 可以调整对应的机型

      • 可以调整展示页面的大小

      • 模拟网络状态:WIFI、2G、3G、4G和Offline(断网)

      • 模拟操作

        模拟操作.png

    该操作的模拟前后端,前后端的切换操作,

    例如当用户从小程序中回到聊天窗口,会触发一个小程序被设置为后台的回调。

    1. 调试工具:

      • **Wxml:**帮助开发者开发,wxml转发后的界面。可以看到真实的页面结构,和结构对应的wxss属性,同时可以通过更改wxss属性,实时的看到修改的情况

      • Sources panel: 用于显示当前的脚本文件,在Sources panel的脚本是已经编译好的脚本,已经处理之后的脚本文件。在Sources panel运行的时候,运行到断点,会导致整个小程序停止运行。

      • AppData panel: 用于展示目前运行小程序时的具体数据

      • Storage panel: 可以直接对数据进行删除、新增和修改
        用于显示当前项目使用的wx.setStorage或者wx.setStorageSync后的数据储存情况

      • Network Panel: 用于观察和显示 request 和 socket 的请求情况

      • **Console panel:**两大功能:

        1. 开发者可以在此输入和调试代码
        2. 可以再次查看小程序的报错

        在控制台可以输入命令

        build:编辑小程序

        Preview: 预览

        upload:上传代码

        openVendor:打卡基础库所在目录

        openToolsLog:打开工具日志目录

        checkproxy(url):检查指定url的代理使用情况

      • Sensor panel:
        两个功能:

        1. 开发者可以在这里选择模拟地理位置
        2. 开发者可以在这里模拟移动设备表现,用于调试重力感应API

        重力测试.gif

    展开全文
  • 所以要实现APP或者网站的微信登录,必须通过微信开放平台开发者资质认证(一年需要交纳300元)才能获得接口权限。 现在很多企业都已经实现了三证合一,这主要记录下三证合一填写申请时候的一些注意事项。 ...

    微信开放平台网址:https://open.weixin.qq.com

    申请微信开放平台的主要目的:实现APP或者网站的微信登录。

    所以要实现APP或者网站的微信登录,必须通过微信开放平台开发者资质认证(一年需要交纳300元)才能获得接口权限。


    现在很多企业都已经实现了三证合一,这主要记录下三证合一填写申请时候的一些注意事项。


    1、组织机构代码证
    目前仅支持中国大陆企业;
    注: 若由于三证合一原因没有组织机构代码证时可填统一社会信用代码;
    2、企业工商营业执照(副本)
    中国大陆工商局或市场监督管理局颁发的工商营业执照必须在有效期内,且须是当前企业最新的工商营业执照。
    注: 三证合一统一社会信用代码18位,可在营业执照注册号位置上填写“注册号”或“统一社会信用代码”;
    3、申请公函
    请下载申请认证公函(模版参考示例)
    填写认证公函需要提供公众号的原始ID,去我的账户信息查看原始ID。
    上传加盖企业公章的原件照片或扫描件
    4、其他证明材料
    可提交其他证明材料。
    注:上传文件需加盖企业公章的原件照片或扫描件
    支持.jpg .jpeg .bmp .gif .png格式照片,大小不超过2M。

    展开全文
  • 微信开发者工具中 实现微信小程序之相机拍照功能的开发 包括相机拍照文件相册的打开 镜头的反转等
  • 小程序开发助手中,同一个开发者只能显示一个开发版本 测试同事找开发要二维码,效率较低 本地生成的二维码会出现携带本地代码、未及时拉取分支其他改动等问题 为了避免如上问题的发生,采用微信小程序集成 Jenkins...
  • 微信小程序是腾讯于2017年1月9日推出的一种不需要下载安装即可在微信平台上使用的应用。小程序和微信原生功能应用在本质上都是——Web App 小程序优势 微信有海量用户,依赖性很强,微信开发的产品更容易触达用户 ...
  • 微信公众平台开发者文档 微信公众平台开发概述 微信公众平台是运营者通过公众号为微信用户提供资讯和服务的平台,而公众平台开发接口则是提供服务的基础,开发者在公众平台网站中创建公众号、获取接口权限后...
  • 第八节 在微信开发者工具和手机上测试 虽然游戏能在Cocos Creator引擎的模拟器上正常运行,但这不代表移植到小程序上运行时不会有问题。为确保游戏上线后正常运行,我们必须要在微信开发者工具和手机上都进行测试...
  • 微信公众号平台是可以直接把音频素材插入到图文消息里面。但是现在自己开发的微信管理平台无法在上传的图文素材中插入音频。试过audio标签,上传后audio标签就没了,不知道是不是腾讯屏蔽了。 请教一下怎么在开发...
  • 这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、...
  • win7操作系统,具体操作为终止taskhost.exe进程即可。方法很多比如:360加速球–网速–终止taskhost.exe进程。或者开始-注销 也可。
  • 问题:1、从打开开发者工具就一直弹出当前系统代理不是安全代理是否信任,随意点确定或取消或点右上角 X 关闭都可以正常打开工具使用,在使用过程中仍继续不间断弹框当前系统代理不是安全代理是否信任 尝试1:在...
  • 模拟器能正常显示图标,路径,名称都对,为什么?...[图片说明](https://img-ask.csdn.net/upload/201907/02/1562063915_273646.png)![图片说明](https://img-ask.csdn.net/upload/201907/02/1562063924_964851.png)
  • 由于js不能通过远程加载,所有打包出来 的微信包基 本包含boundle.js和libs下的引用库,如果这些大于4M,需 要进行分包操作,但是分包后的总包不能大于8M,后续可能 增加到12M, ...
  • 微信开放平台“开发资源”中网站... 据开发者资质认证处介绍:开发者资质认证通过后,微信开放平台帐号下的应用,将获得微信登录、智能接口、第三方平台开发等高级能力。 所以在微信第三方授权登陆获取用户信息...
  • F 修复 公众号网页调试中,Base64 图片无法通过调试器打开的问题 反馈详情 F 修复 cli 调用自动预览无法使用自定义编辑条件的问题 F 修复 Windows 版无法使用录音功能的问题 F 修复 插件开发模式下,插件页面配置...
  • 微信开发者文档

    2019-01-12 10:54:37
    用户在关注与取消关注公众号时,微信会把这个事件推送到开发者填写的URL。方便开发者给用户下发欢迎消息或者做帐号的解绑。 微信服务器在五秒内收不到响应会断掉连接,并且重新发起请求,总...
  • ![iphone显示](https://img-ask.csdn.net/upload/201705/18/1495110498_352418.jpg)开发的公众号中的一个界面在安卓和微信开发者工具中可以正常显示,在苹果手机中没有数据
1 2 3 4 5 ... 20
收藏数 11,477
精华内容 4,590