最近再做微信公众号开发,涉及到手机上传图片和拍照的功能。

思路一:使用<input type="file" name="pic" id="pic" accept="image/gif, image/jpeg"multiple="multiple" />进行多张图片选择上传

      <!DOCTYPE html>
      <head>
      <meta charset="UTF-8">
      <title>多图预览</title>
      </head>
      <script>
      var result=document.getElementById("result");
      var file=document.getElementById("file");

      function readAsDataURL(){

      var file = document.getElementById("file").files;
      var result=document.getElementById("result");

      for(i = 0; i< file.length; i ++) {
      var reader = new FileReader();
      reader.readAsDataURL(file[i]);
      reader.onload=function(e){
      //多图预览
      result.innerHTML = result.innerHTML + '<img src="' + this.result +'" alt="" />';
      }

      }

      }

      </script>
      <p>
      <label>请选择一个文件:</label>
      <input type="file" id="file" multiple="multiple" />
      <input type="button" value="读取图像" onclick="readAsDataURL()" />
      </p>
      <div id="result" name="result"></div>

在pc端是没有任何问题的,但在手机端,虽然可以多张上传,但是要一次一选多次显示多张,并不能一次多选多显,所以放弃。

思路二:调用微信接口,观看了网上的demo感觉比较实用,所以开始研究。

1.登陆微信公众号平台,注册账号,绑定自己的公众号,主要是对公众号开发有所了解。在微信公众号中找到js安全域接口配置,一定要绑定自己开发的网站域名,这样才能使用接口,且不能是本地,只能是测试服或者正式服。

2.js安全域名绑定成功后,需要下载微信js文件,然后再开发的页面上引入,还需做接口权限配置:

              wx.config({
               debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
               appId: '', // 必填,公众号的唯一标识,这个可以在公众号开发平台上取到。
               timestamp: , // 必填,生成签名的时间戳,生成签名时的时间。
              nonceStr: '', // 必填,生成签名的随机串,利用方法随机生成一段字符串
              signature: '',// 必填,签名,见微信文档获取。 http://www.360doc.com/content/15/0111/21/19291760_439977810.shtml 附录五必看,不然签名永远不成功
              jsApiList: [] // 必填,使用什么接口,就放入什么接口名。
                })

有坑:后台不能直接对域名进行生成签名,而是前台通过请求加密传给后台,不然后台在加密过程中url会发生变化。前台工作;url = location.href.split('#')[0];url = encodeURIComponent(url);通过post请求传给后台。

                    3.通过微信选择接口获取相册照片的本地地址,可作为img src 进行显示,

              wx.chooseImage({
             success: function (res) { //success选择了图片才会执行的方法,compolete选择了和未选择都会执行的方法
          var localIds = res.localIds; // 返回选定照片的本地ID列表,localId可以作为img标签的src属性显示图片
               }
              });
angular坑来了,ng-show不能解析微信本地地址链接,导致无法显示图片。无奈只能通过js赋值来实现,刚开始是动态创建导致标签并添加angular指令,由于angular的安全机制,这样创建已经无法监听到变量的变化,所以angular指令失效。
所以将angularJS中的ng-chang、ng-click都改成js原生的onclick、onchange。如此乱串总感觉有隐患。因此使用angular的另一种方法,利用服务directive创建标签
            

            appofproduct.directive('wxImg', function() {
              return {
                restrict: 'E',
                replace: true,
                template: '<div class="maxsize background-add"></div>',
                link: function(scope, elem, attr) {
                scope.$watch('pic', function(nowVal) {
                elem.css('backgroundImage','url("'+nowVal+'")');   //这里可以使用jquery的方法进行添加,是不是最开始可以利用angu.element(elem).css('backgroundImage','url("'+nowVal+'")')来一个循环赋值,就不用这么麻烦了。
                });
               }
              };
            });

这里解决了图片展示的问题,微信可没这么简单,谁知道ios并不能展示,坑!!!解决方案

              wx.getLocalImgData({
                localId: result.localIds[i], // 图片的localID  而且不能以数组的形式,只能一张一张的解析展示。
                success: function (res) {
                var localData = res.localData; // localData是图片的base64数据,可以用img标签显示
                $scope.localids.push(localData);
                  }
                });

            接下来调用sdk uplod上传接口,坑又来了,没有想象的那么简单。ios上传的图片无法展示。解决方案:

      

                uploadImages(uploadString);                //uploadString为wx.getLocalImgData解析后的ios地址组成的数组,这里如果使用微信原生没解析的地址进行上传会不会出现问题呢,当时项目代码太多,没有多想,以后用到在尝试吧。
                function uploadImages(localImagesIds) {
                if (localImagesIds.length === 0) {
                  return ;
                 }
                var localId = localImagesIds[0];       
                  //解决IOS无法上传的坑
                if (localId.indexOf("wxlocalresource") != -1) {
                localId = localId.replace("wxlocalresource", "wxLocalResource");
                  }
                wx.uploadImage({
                isShowProgressTips:0,
                localId: localId, // 需要上传的图片的本地ID,由chooseImage接口获得。 参数只能为字符串,不能为数组
                success: function (res) {
                  $http.get(api_EndPoint + "/wechat/imgToOss?token=" + $cookieStore.get("token") + "&mediaId=" + res.serverId).then(function(result) {
                if(result.data.code == 0) {
                $scope.order.orderSkuWarpList[index].aliSrc.push(result.data.data);
                  } else {
                mAlert("error", result.data.msg);
                  };
                 });
                uploadString.shift();
                 uploadImages(uploadString);
                  },
                fail: function (res) {
                mAlert('info','上传失败,请重新上传!');
                 }
                });
                }

微信js-sdk接口的使用及ios深坑的更多相关文章

  1. 微信js SDK接口

    微信JS-SDK说明文档 http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html 一.微信登录功能 在进行微信OAut ...

  2. 关于微信JS SDK接口wx.previewImage预览接口的使用

    然后后之前的项目,突然往微信上迁移了,一些微信的接口没怎么用过,比较陌生,这次的功能是想调用微信的接口,实现图片放大的功能, 就找到官方文档:http://qydev.weixin.qq.com/wi ...

  3. 微信JS SDK接入的几点注意事项

    微信JS SDK接入,主要可以先参考官网说明文档,总结起来有几个步骤: 1.绑定域名:先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”.备注:登录后可在“开发者中心”查看对 ...

  4. 微信js sdk上传多张图片

    微信js sdk上传多张图片,微信上传多张图片 该案例已tp3.2商城为例 直接上代码: php代码: public function ind(){ $appid="111111111111 ...

  5. 实战微信JS SDK开发:贺卡制作与播放(1)

    前段时间忙于CanTK 2.0的开发,所以博客一直没有更新.CanTK 2.0主要增强了游戏和富媒体的开发,现在编码和测试基本完成了,等文档完成了再正式发布,里面有不少激动人心的功能,等发布时再一一细 ...

  6. 微信JS SDK配置授权,实现分享接口

    微信开放的JS-SDK面向网页开发者提供了基于微信内的网页开发工具包,最直接的好处就是我们可以使用微信分享.扫一扫.卡券.支付等微信特有的能力.7月份的时候,因为这个分享的证书获取问题深深的栽了一坑, ...

  7. 微信开发(2):微信js sdk分享朋友圈,朋友,获取config接口注入权限验证(转)

    进行微信开发已经一阵子了,从最初的什么也不懂,到微信授权登录,分享,更改底部菜单,素材管理,等. 今天记录一下微信jssdk 的分享给朋友的功能,获取config接口注入. 官方文档走一下简单说:四步 ...

  8. 调用微信js sdk

    场景:需要调用微信获取当前位置的借口. 途径:查看微信 https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115 .后 ...

  9. 微信JS SDK Demo 官方案例[转]

    摘要: 微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包. 通过使用微信JS-SDK,网页开发者可借助微信高效地使用拍照.选图.语音.位置等手机系统的能力,同时可以直接使用 ...

随机推荐

  1. hadoop配置文件的作用

    core-site.xml <property> //指定hdfs的主端口 namenode要放在哪台机器上 <name>fs.defaultFS</name> & ...

  2. int与string的相互转换

    <1>stringstream 的方式 C++标准库里面有一个stringstream可以用于各种数据类型之间的转换.无论是从int到string,还是从string到int都可以使用这种 ...

  3. [刷题]算法竞赛入门经典(第2版) 5-12/UVa511 - Do You Know the Way to San Jose?

    题意:N张地图,查找某地点在不在某些地图上,若在,使用细节多的地图.使用哪个地图的破要求挺多,细心一点就好. 代码:(Accepted,0.000s) //UVa511 - Do You Know t ...

  4. [刷题]算法竞赛入门经典(第2版) 5-2/UVa1594 - Ducci Sequence

    书上具体所有题目:http://pan.baidu.com/s/1hssH0KO 代码:(Accepted,20 ms) //UVa1594 - Ducci Sequence #include< ...

  5. Java 通过先序后序序列生成二叉树

    题目 二叉树的前序以及后续序列,以空格间隔每个元素,重构二叉树,最后输出二叉树的三种遍历方式的序列以验证. 输入: 1 2 3 4 5 6 7 8 9 10 3 2 5 4 1 7 8 6 10 9 ...

  6. gitlab 取消注册功能

    gitlab 默认安装完成以后是允许用户注册,公司内部使用所以准备禁用了注册功能,只允许管理员从后台开通权限: 1.进入"Admin Area" 2.在左边菜单栏最低下点击&quo ...

  7. cmd批处理延迟代码 结束进程

    choice /t 5 /d y /n >nul taskkill /im chrome.exe /f pause

  8. PHP接口学习

    接口:不同类的共同行为进行定义,然后在不同类中实现不同的功能. 接口的具体语法: 接口是零件可以用多个零件组成一个新东西: 接口本身是抽象的,内部申明的方法也是抽象的: 不用加abstract 一个类 ...

  9. 【JAVAWEB学习笔记】网上商城实战3:购物模块和订单模块

    网上商城实战3 今日任务 完成购物模块的功能 完成订单模块的功能 1.1      购物模块: 1.1.1    功能演示: 商品详情: 购物车模块: 1.1.2    代码实现: 1.在商品详情的页 ...

  10. 网络安全——一图看懂HTTPS建立过程

    关于网络安全加密的介绍可以看之前文章: 1. 网络安全--数据的加密与签名,RSA介绍 2. Base64编码.MD5.SHA1-SHA512.HMAC(SHA1-SHA512) 3. When I ...