首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >5月14日项目小结-微信中图片选择与上传

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

作者头像
WindCoder
发布2018-09-20 14:08:38
6390
发布2018-09-20 14:08:38
举报
文章被收录于专栏:WindCoderWindCoder

原理

直接调用“微信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
});

分享接口

分享接口

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

	});

ready接口

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

 参考资料

微信JS-SDK说明文档

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2015-05-14,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 原理
  • 具体实现
    • 拍照或从手机相册中选图接口
      • 上传图片接口
      • 实践技巧
        • 选图接口内嵌上传
          • 通过config接口注入权限验证配置
            • 分享接口
              • ready接口
              •  参考资料
              领券
              问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档