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

思路一：使用<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. jdbc(2)

    create table account ( id int primary key auto_increment, name varchar(20), money double);insert int ...

  2. spring-boot整合dubbo:Spring-boot-dubbo-starter

    为什么要写这个小工具 如果你用过Spring-boot来提供dubbo服务,相信使用中有很多"不爽"的地方.既然使用spring boot,那么能用注解的地方绝不用xml配置,这才 ...

  3. nginx+gridfs+mongodb 配置访问png图片显示无法加载问题

    上传文件后,浏览器中请求:http://<nginx server ip>:<port>/gfs/<my file> 浏览器出现"无法打开页面" ...

  4. git编译安装与常见问题解决

    1. 先去官网下载一个安装包 ,假设目录/APP/ido   2. cd /APP/ido   3. tar -zxvf git-2.7.2.tar.gz   4. 安装依赖 yum -y insta ...

  5. GO的初始简书（一）简介安装

    已经玩了很长一段时间的golang了,做个gopher,下面我将逐步展示各种go语言的开发,从入门开始哦,完全是凭着自己学习和实践的结果展示,如果有说的不对的,请指正. 简介 go语言是由Google ...

  6. 对JVM运行时常量池的一些理解

    1.JVM运行时常量池在内存的方法区中(在jdk8中,移除了方法区) 2.JVM运行时常量池中的内容主要是从各个类型的class文件的常量池中获取,对于字符串常量,可以调用intern方法人为添加,而 ...

  7. ASP.NET Gridview数据库绑定支持增删改，记得要完整实现

    1.错误情况 /WebSite3"应用程序中的服务器错误. 指定的参数已超出有效值的范围. 参数名: index 说明: 执行当前 Web 请求期间,出现未经处理的异常.请检查堆栈跟踪信息, ...

  8. Node.js入门第一天

    一.Node.js简介 1.1 简介 V8引擎本身就是用于Chrome浏览器的JS解释部分,但是Ryan Dahl这哥们,鬼才般的,把这个V8搬到了服务器上,用于做服务器的软件. Node.js是一个 ...

  9. python 计算两个日期相差多少个月

    近期,由于业务需要计算两个日期之前相差多少个月.我在网上找了很久,结果发现万能的python,居然没有一个模块计算两个日期的月数,像Java.C#之类的高级语言,都会有(date1-date2).mo ...

  10. Java编程之反射中的注解详解

    "注解"这个词,可谓是在Java编程中出镜率比较高,而且也是一个老生常谈的话题.我们之前在聊Spring相关的东西时,注解是无处不在,之前我们简单的聊过一些"注解&quo ...