微信js sdk 授权上传头像下载代码片段和注意事项

/*
* 描述：当前页授权
* @param url 例：index.html / 如果有参数，需加密index.html?id=1
*/

1、对需要运用js sdk的页面授权

getSignature("文件名.html");

/*这里的getSignature为调用后台接口获取微信js sdk需要传的参数，不可直接复制！！！*/

function getSignature(url) {
ajaxpubilc('/weChatUtil/getSignature', {pageUrl:url}, $ajaxPOST, setSignature);
}

/* 注入权限，验证配置 */
function setSignature(data) {
wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: data.data.appId, // 必填，公众号的唯一标识
timestamp: data.data.timestamp, // 必填，生成签名的时间戳
nonceStr: data.data.noncestr, // 必填，生成签名的随机串
signature: data.data.signature,// 必填，签名，见附录1
jsApiList: ['scanQRCode','chooseImage','uploadImage'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
});
wx.ready(function(){
// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
//checkJsApi();
//getScanQRCode();
});
wx.error(function(res){
// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
alert("微信授权失败");
});
}

/* 判断当前客户端版本是否支持指定JS接口 */
function checkJsApi() {
wx.checkJsApi({
jsApiList: ['scanQRCode'], // 需要检测的JS接口列表，所有JS接口列表见附录2,
success: function(res) {
/*alert(res.errMsg);*/
// 以键值对的形式返回，可用的api值true，不可用为false
// 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
}
});
}

2、在页面某个需要触发的点加事件触发微信接口，代码片段如下

/* 调用微信扫一扫 */
function getScanQRCode() {
wx.scanQRCode({
needResult: 0, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
scanType: ["qrCode","barCode"], // 可以指定扫二维码还是一维码，默认二者都有
success: function (res) {
var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
}
});
}
/*下载多媒体文件*/
function mediaget(serverId){
ajaxpubilc('/weChatUtil/downloadByMediaId', {media_id:serverId}, $ajaxPOST, function(res) {
if (res.success) {
$('.onIdcard').hide();
alert(res.data);
tssucc(res.data);
}
});
}
/*调用微信摄像头*/
function getcameraImage() {
wx.chooseImage({
count: 1, // 默认9
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
success: function (res) {
var localIds = res.localIds.toString(); // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
upload(localIds);
}
});
}
/*上传*/
function upload(localIds){
wx.uploadImage({
localId: localIds, // 需要上传的图片的本地ID，由chooseImage接口获得
isShowProgressTips: 1, // 默认为1，显示进度提示
success: function (res) {
var serverId = res.serverId.toString(); // 返回图片的服务器端ID
mediaget(serverId);
}
});
}

注意事项：上传接口需要localIds转为字符串 res.localIds.toString();，上传后只有三天有效期，长时间使用需下载到自己服务器上，下载多媒体接口结果为文件需要后台处理下载，所以前端只要把media_id传个后台处理下载到服务器就好

以上为原创，有错误的地方请评论或者私信，会后续更正，感谢查看！

微信js sdk 授权上传头像下载代码片段和注意事项相关推荐

微信小程序上传接口php,微信小程序API 上传、下载
微信小程序API 上传.下载 wx.uploadFile(OBJECT) 将本地资源上传到开发者服务器.如页面通过 wx.chooseImage 等接口获取到一个本地资源的临时文件路径后,可通过此接口 ...
H5使用企业微信jssdk录音、上传、下载、播放
企业微信上使用js-sdk语音发布任务企业微信官方API:音频接口地址 step1:登录企业微信新建应用程序并记录你的Secret step2:在我的企业最下面找出你的企业ID也就是你的appId ...
php上传头像的代码,php头像上传预览实例代码
说道上传图片,大家并不陌生,不过,在以后开发的项目中,可能并不会让你使用提交刷新页面式的上传图片,比如上传头像,按照常理,肯定是在相册选择照片之后,确认上传,而肯定不会通过form表单,点击submi ...
SAP GOS附件上传与下载[代码直接可用]
在采购订单屏幕的左上角有个特殊的按钮,可以通过它创建.查看或删除采购订单的附件.这个按钮是使用GOS(Generic Object Service)工具实现的,可以把GOS理解为一个连接文档和SAP内 ...
解决本地从 github上传或下载代码时每次都需要输入用户名和密码
第一步,在本地执行如下命令 git config --global credential.helper store 第二步,在执行上传或下载时,输入用户名和密码即可,以后就不用输了
php上传头像的代码,针对多用户实现头像上传功能PHP代码适用于登陆页面制作...
一个网站,其实说白了就是某几个特定功能的组合,而更换用户头像就在这些功能之中.今天就来做个测试,针对不同的用户,实现头像上传功能. ---------------------------------- ...
php上传头像的代码,php视频拍照上传头像功能实现代码分享
如果要在php中实现视频拍照我们需要借助于flash插件了,由flash拍出的确照片我们再通过php的$GLOBALS ['HTTP_RAW_POST_DATA']接受数据,然后保存成图片就可以了,下 ...
php上传头像的代码,php实现文件上传及头像预览功能
php文件上传原理是通过form表单的enctype="multipart/form-data"属性将文件临时放到wamp文件夹中的tmp目录下,再通过后台php程序将文件保存在体 ...
微信开发之录音上传、下载、转码
原文是在我自己博客中,小伙伴也可以点阅读原文进行跳转查看,还有好听的背景音乐噢~ 一年的时间里,前前后后都在搞微信开发的相关模块,这不前一阵子,公司又开了个新项目,其中有一个就是类似于微信朋友圈的功 ...

微信js sdk 授权上传头像下载代码片段和注意事项

微信js sdk 授权上传头像下载代码片段和注意事项相关推荐

最新文章

热门文章