5月14日项目小结-微信中图片选择与上传

5月14日项目小结-微信中图片选择与上传

原理

直接调用“微信JS-SDK”中的相关方法即可

具体实现

拍照或从手机相册中选图接口

wx.chooseImage({
success: function (res) {
var localIds = res.localIds; // 返回选定照片的本地ID列表,localId可以作为img标签的src属性显示图片
}
});

上传图片接口

wx.uploadImage({
localId: '', // 需要上传的图片的本地ID,由chooseImage接口获得
isShowProgressTips: 1, // 默认为1,显示进度提示
success: function (res) {
var serverId = res.serverId; // 返回图片的服务器端ID
}
});

实践技巧

选图接口内嵌上传

wx.chooseImage({
success: function (res) {
var localIds = res.localIds[0]; // 返回选定照片的本地ID列表,localId可以作为img标签的src属性显示图片
//上传
wx.uploadImage({
localId:localIds, // 需要上传的图片的本地ID,由chooseImage接口获得
isShowProgressTips: 1, // 默认为1,显示进度提示
success: function (res) {
var serverId = res.serverId; // 返回图片的服务器端ID
}
});
}
});

 通过config接口注入权限验证配置

微信开发必备接口,正式项目中“debug: false,”

var _appid = '<%=WeiXinRead.getAppId()%>';
var _ticket = '<%=WeiXinRead.getTicket()%>';
wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: '', // 必填,公众号的唯一标识
timestamp: , // 必填,生成签名的时间戳
nonceStr: '', // 必填,生成签名的随机串
signature: '',// 必填,签名,见附录1
jsApiList: [] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
});

分享接口

[toggle hide=“yes” title=“分享接口” color=""]

//通过ready接口处理成功验证
wx.ready(function () {
//获取“分享给朋友”按钮点击状态及自定义分享内容接口
wx.onMenuShareAppMessage({
title: ' ',// 分享标题
desc: '',// 分享描述
link: '',// 分享链接
imgUrl: '' // 分享图标// 分享图标
});
//获取“分享到朋友圈”按钮点击状态及自定义分享内容接口
wx.onMenuShareTimeline({
title: ' ',// 分享标题
desc: '',// 分享描述
link: '',// 分享链接
imgUrl: '' // 分享图标
});
});

[/toggle]

ready接口

wx.ready(function(){
// config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。
});

 参考资料

微信JS-SDK说明文档

本文采用 CC BY-NC-SA 4.0 许可,转载请注明出处与作者。

支持一下

如果这篇文章对你有帮助,欢迎打赏或分享。

打赏支持

评论