2000字范文,分享全网优秀范文,学习好帮手!
2000字范文 > 微信公众号调用微信接口上传图片

微信公众号调用微信接口上传图片

时间:2020-03-26 07:13:37

相关推荐

微信公众号调用微信接口上传图片

首先利用微信JS-SDK接口,借助微信高效地使用拍照、选图,上传至微信服务器,然后通过微信多媒体接口下载图片到自己的服务器。

1、获取全局的access_token和jsapi_ticket以作备用

使用全局的access_token用来获取jsapi_ticket,并通过微信多媒体接口下载图片到自己的服务器。jsapi_ticket是公众号用于调用微信JS接口的临时票据,用来前端页面调取微信的拍照、选图、上传服务器功能。此过程之前文章已说明,不做详细介绍。

附连接: 微信开发中的access_token和jsapi_ticket

2、使用jsapi_ticket生成SDK权限验证JS-权限签名

参与签名的字段包括

noncestr(随机字符串),

jsapi_ticket

timestamp(时间戳)

url(当前网页的URL,不包含#及其后面部分)

1、对所有待签名参数按照字段名的ASCII 码从小到大排序(字典序)后,使用URL键值对的格式(即key1=value1&key2=value2…)拼接成字符串string1,这里需要注意的是所有参数名均为小写字符。2、对string1作sha1加密,字段名和字段值都采用原始值,不进行URL 转义。

注意事项:

1、签名用的noncestr和timestamp必须与wx.config中的nonceStr和timestamp相同。

2、签名用的url必须是调用JS接口页面的完整URL。

3、出于安全考虑,开发者必须在服务器端实现签名的逻辑

protected function shareConfig(){$time=time();//获取当前页面的连接$localUrl='http://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];//按照字典序拼接字符串$str="jsapi_ticket=".getAccessToken('jsapi_ticket')."&noncestr=".$time."&timestamp=".$time."&url=".$localUrl;//选择前台要调用的js接口列表 //【chooseImage】 【uploadImage】 【previewImage】$this->assign('share_function',json_encode(['onMenuShareTimeline', 'onMenuShareAppMessage','getLocation','chooseImage','uploadImage','downloadImage','previewImage']));//做sha1加密,生成签名$this->assign('share_signature',sha1($str));$this->assign('share_time',$time);$this->assign('share_appid',$this->appid);}

3、通过config接口注入权限验证配置(所有需要使用JS-SDK的页面必须先注入配置信息)

在需要调用JS接口的页面引入如下JS文件,(支持https):http://res./open/js/jweixin-1.6.0.js

当上述资源不可访问时,可改访问:http://res2./open/js/jweixin-1.6.0.js (支持https)。

当debug模式,出现错误时,具体查看【微信调用config 接口,开启debug模式,常见错误及解决方法】

<script src="http://res./open/js/jweixin-1.6.0.js"></script><script>wx.config({debug: true, //false:关闭调试 开启调试模式,调用的所有api的返回值会在客户端alert出来appId: "{$share_appid}", // 必填,公众号的唯一标识timestamp: "{$share_time}",// 必填,生成签名的时间戳nonceStr: "{$share_time}", // 必填,生成签名的随机串signature: "{$share_signature}", // 必填,签名jsApiList:{$share_function}// 必填,需要使用的JS接口列表});//error接口,失败时用来查找具体原因wx.error(function (res) {if (res.errMsg = 'config:invalid signature') {//alert("转发接口失效,请联系管理员");}});</script>

4、选择图片并上传到微信服务器

权限验证配置完成后,通过ready接口处理成功验证。

1、调用【chooseImage】拍照或从手机相册中选图接口,挑选要上传的图片2、调用【uploadImage】上传图片接口,把图片上传到微信服务器。注:【uploadImage】上传图片有效期3天,此处获得的 serverId 即 media_id

wx.ready(function(){// config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。wx.chooseImage({count: 1, // 默认9sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有success: function (res) {var localIds = res.localIds; // 返回选定照片的本地ID列表,localId可以作为img标签的src属性显示图片wx.uploadImage({localId: localIds[0], // 需要上传的图片的本地ID,由chooseImage接口获得isShowProgressTips: 1, // 默认为1,显示进度提示success: function (res) {var serverId = res.serverId; // 返回图片的服务器端ID//此处将取得的图片服务器id写入form表单中,等待提交至后台处理$("input[name='image']").val(serverId);}});}});});

5、后台调用微信多媒体接口,下载并保存图片到自己的服务器

调用微信下载多媒体文件接口下载图片到自己服务器:https://api./cgi-bin/media/get?access_token=ACCESS_TOKEN&media_id=MEDIA_ID

注意:

1、临时素材media_id是可复用的。

2、媒体文件在微信后台保存时间为3天,即3天后media_id失效。

3、上传临时素材的格式、大小限制与公众平台官网一致。

图片(image): 2M,支持PNG\JPEG\JPG\GIF格式

语音(voice):2M,播放长度不超过60s,支持AMR\MP3格式

视频(video):10MB,支持MP4格式

缩略图(thumb):64KB,支持JPG格式

//此处的$image为前台上传的图片的serverId$url = 'https://api./cgi-bin/media/get?access_token=' . $this->access_token . '&media_id=' . $image;//读取微信服务器图片$image = file_get_contents($url);//图片存放的路径$img_url = '/Public/wx/image/';if (!is_dir('.' . $img_url)) {mkdir('.' . $img_url, 0777, true);}$img_url .= date('Y_m_d') . '_' . time() . '.png';//写入图片file_put_contents('.' . $img_url, $image);

参考链接 :

微信:JS-SDK说明文档https://developers./doc/offiaccount/OA_Web_Apps/JS-SDK.html
微信:获取临时素材https://developers./doc/offiaccount/Asset_Management/Get_temporary_materials.html

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。