Web笔记··By/蜜汁炒酸奶

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

原理

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

具体实现

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

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

实践技巧

选图接口内嵌上传

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

通过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

分享接口

[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

[/toggle]

ready接口

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

参考资料

微信JS-SDK说明文档

预览
Loading comments...
2 条评论
  • W

    博主搞微信开发?以后可以跟你交流交流

    • W

      回复 @IT疯狂女: 代码搬运工罢了。还在学习的路上

example
预览