5月14日项目小结-微信中图片选择与上传
原理
直接调用“微信JS-SDK”中的相关方法即可
具体实现
拍照或从手机相册中选图接口
wx.chooseImage({
success: function (res) {
var localIds = res.localIds; // 返回选定照片的本地ID列表,localId可以作为img标签的src属性显示图片
}
});
1
2
3
4
5
2
3
4
5
上传图片接口
wx.uploadImage({
localId: '', // 需要上传的图片的本地ID,由chooseImage接口获得
isShowProgressTips: 1, // 默认为1,显示进度提示
success: function (res) {
var serverId = res.serverId; // 返回图片的服务器端ID
}
});
1
2
3
4
5
6
7
2
3
4
5
6
7
实践技巧
选图接口内嵌上传
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
}
});
}
});
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
通过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
});
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
分享接口
[toggle hide=“yes” title=“分享接口” color=“”]
//通过ready接口处理成功验证
wx.ready(function () {
//获取“分享给朋友”按钮点击状态及自定义分享内容接口
wx.onMenuShareAppMessage({
title: ' ',// 分享标题
desc: '',// 分享描述
link: '',// 分享链接
imgUrl: '' // 分享图标// 分享图标
});
//获取“分享到朋友圈”按钮点击状态及自定义分享内容接口
wx.onMenuShareTimeline({
title: ' ',// 分享标题
desc: '',// 分享描述
link: '',// 分享链接
imgUrl: '' // 分享图标
});
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
[/toggle]
ready接口
wx.ready(function(){
// config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。
});
1
2
3
2
3
参考资料
预览
除特别注明外,本站所有文章均为 windcoder 原创,转载请注明出处来自: 5-yue-14-ri-xiang-mu-xiao-jie-wei-xin-zhong-tu-pian-xuan-ze-yu-shang-chuan
Loading comments...

预览
博主搞微信开发?以后可以跟你交流交流
回复 @IT疯狂女: 代码搬运工罢了。还在学习的路上