通知公告类页面的图片点击下载

carbinechun

        误打误撞，结果发现一点有趣的东西，分享出来如有需要的可以参考一下。
        通知公告明细页，把html格式的内容通过bind-html加载到一个div里面，这样内容就会按html样式正常展示了。最近需求有变化，想在内容里有图片的时候可以下载图片，此为背景。
        好久没搞这一块了，又翻了好久的源码和贴子，但找到的和实际需求还是有出入的，正常的都是图片的选取处理，其他处理的少之又少。但在翻帖子过程中还是看到有个关于图片下载的有效信息。忘具体哪一个了，这里就不再发链接了，实际用的就是引用system/api/native/image.js，然后通过image.httpToAlbum方法来进行网络图片的下载，需求做到这里，已经完成一半了，但上面说了，这些内容是放在div里面的，如果内容里有多图片的话，又要怎么做到点哪一个图片就能下载哪一个图片呢？点图片之外的地方不需要任何提示呢？
        这么思考是因为div里面的处理，肯定是针对本div的相关事件，内容是整体的，想做到在内容里再单独处理那应该也能实现，但很繁琐，直接点的思路就是把div对应的bind-html的内容找到图片块源码然后进行替换，加上点击处理事件，每个图片加一个，想想挺麻烦，当然，个人水平有限，可能猿友有其他好的思路，也可以分享出来供大家参阅，反正我一直以wex5菜鸟自居，懒得多学，凑合着用。废话不多说，刚才我个人的解决办法一看就很繁琐。但因为我也是水平有限的原因，只能在div的单击事件里自行尝试，结果就有了这次的分享内容。具体处理如下：

1. 
   
2.         Model.prototype.infoDivDblclick = function(event){
   
3.                  var self = this;
   
4.                  var url = event.target.src;
   
5.                  if(url){
   
6.                  ...
   
7.                  }
   
8.         };
   
9.         

复制代码

重点就在url获取，通过event.target.src，能获取到点击时的url，这里的url,就是内容里面点击到的网络图片的地址，如果不是点击的图片，那么url就没有值，通过此项判断，便可以完全解决上面提到的两个问题。具体原理我懒得去探寻了，这个target还是有待深入了解的。问题解决了，而且很简便，所以高兴之余分享出来，如还有坚持用wex5的简单参考一下，节省部分时间。
    另附上下载图片的源码吧，想做图片处理的建议看下上面提到的那个js文件，几个函数都很有用，说不得哪个就是你需要的。

1. 
   
2.         Model.prototype.downLoadImg = function(url){
   
3.                  var self = this;
   
4.                  console.log("enter downLoadImg...");
   
5.                  debugger;
   
6.                  image.httpToAlbum({
   
7.             serverId : url,
   
8.             success : function(res) {
   
9.                      debugger;
   
10.                      console.log('图片下载成功~');
    
11.                      justep.Util.hint("图片已成功保存至本机相册...", {type:'info',position:'bottom'});
    
12. //                     self.comp("messageDialog2").show({callback : function(param){
    
13. //                                                 debugger;
    
14. //                                                 if(param.button == "yes"){
    
15. //                                                         var filename = url.substring(serverId.lastIndexOf("/") + 1);
    
16. //                                                         var fullName = Utils.getCacheDirectoryPath(filename);
    
17. ////                                                         $(self.getElementByXid('inputImage')).click();
    
18. //                                                 }
    
19. //                                         }});
    
20.             },
    
21.             fail : function(res) {
    
22.                      debugger;
    
23.                      console.log('图片下载失败~');
    
24.             }
    
25.         });
    
26.         };
    
27.         

复制代码

其他源码没啥难度，不多显示了。。。下载图片里面注释掉的是我个人想着下载完成后弹出对话框，立即查看的话进行图片查看的，后来确认了下没这需求我也就不多写了，到这里需求算是圆满完成，二次开发没太多的周折，收工准备过年吧