专栏首页WindCoder5月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
});

分享接口

分享接口

//通过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说明文档

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Java代理3:二刷代理

    在使用动态代理时,需要定义一个位于代理类与委托类之间的中介类,也叫动态代理类,该类被要求实现InvocationHandler接口。

    汐楓
  • Java基础小结(二)

    继承可以使用 extends 和 implements 这两个关键字来实现继承, 而且所有的类都是继承于 java.lang.Object,当一个类没有继承的两...

    汐楓
  • Java设计模式学习笔记—适配器模式

    文章最后“Java设计模式笔记示例代码整合”为本系列代码整合,所有代码均为个人手打并运行测试,不定期更新。本节内容位于其Adapter包(package)中。

    汐楓
  • Comparable 与 Comparator 浅析

    精讲java
  • Comparable 与 Comparator 浅析

    来源:朱小厮, blog.csdn.net/u013256816/article/details/50899416 今天博主在翻阅TreeMap的源码,发现其键...

    用户1257393
  • PHP 面向对象 接口

    使用接口 interface,可以指定某个类必须实现哪些方法,但不需要定义这些方法的具体内容。 要实现一个接口,使用 implements 操作符。 接口中定义...

    康怀帅
  • AI 应用于垂直领域,如何改善这八大行业?

    近期,普华永道发布了一份 AI 产业报告,内容涉及 AI 将改变全球的 GDP,哪些国家或地区影响最大,受益最深,AI 能与哪些行业结合,从短期、中期、长期的角...

    钱塘数据
  • Java 面向对象设计的六大原则

    这是设计模式系列开篇的第一篇文章。也是我学习设计模式过程中的总结。这篇文章主要讲的是面向对象设计中,我们应该遵循的六大原则。只有掌握了这些原则,我们才能更好的理...

    芋道源码
  • Java 不支持多重继承的原因

    假设类 B 和类 C 继承自类 A,且都重写了类 A 中的同一个方法,而类 D 同时继承了类 B 和类 C,那么此时类 D 会继承 B、C 的方法,那对于 B、...

    奕仁
  • 薅鹅毛 | 云点播有奖评测 万元豪礼等你来赢

    ? 云点播有奖评测活动开始啦 7月8日 - 8月8日 丰厚奖品等你来赢! ? ? ? ? ?

    腾讯云视频

扫码关注云+社区

领取腾讯云代金券