[分享]利用WEX5做的一个下载文件功能的实例

biyaooo

感谢sxl   南京-木予  梅州--流给予的帮助。 此实例只是简单的实现功能，和新手一起学习进步，后面更多的功能还需要大家多多完善。

JS加入了cordova插件引入，新手需要注意，测试的时候需要真机测试。



index.w文件

1. <?xml version="1.0" encoding="utf-8"?>
   
2. <div xmlns="http://www.w3.org/1999/xhtml" component="$UI/system/components/justep/window/window" design="device:m;" xid="window" class="window">  
   
3.   <div component="$UI/system/components/justep/model/model" xid="model" style="height:auto;left:30px;top:242px;">
   
4.   <div component="$UI/system/components/justep/data/data" autoLoad="true" xid="data1" idColumn="fID"><column label="fID" name="fID" type="String" xid="xid1"></column>
   
5.   <column label="列表标题" name="fTitle" type="String" xid="xid2"></column>
   
6.   <column label="发布人" name="fAuthor" type="String" xid="xid3"></column>
   
7.   <column label="下载地址" name="fUrl" type="String" xid="xid4"></column>
   
8.   <column label="本地文件名称" name="fLocalName" type="String" xid="xid5"></column>
   
9.   <data xid="default1">[{"fID":"1","fTitle":"文件下载测试1","fAuthor":"biyao","fUrl":"http://movie.ks.js.cn/flv/other/1_0.mp4","fLocalName":"1.mp4"},{"fID":"2","fTitle":"文件下载测试2","fAuthor":"biyao","fUrl":"http://sd.downxia.com/down/pptview2003.rar","fLocalName":"pptview2003.rar"},{"fID":"3","fTitle":"文本下载测试3","fAuthor":"biyao","fUrl":"http://filelx.liqucn.com/didi_psngr_v4.2.5_50010.apk","fLocalName":"didi_psngr_v4.2.5_50010.apk"}]</data></div></div>  
   
10.   <div component="$UI/system/components/justep/panel/panel"
    
11.     class="x-panel x-full" xid="panel1">
    
12.       <div class="x-panel-top" xid="top1">
    
13.         <div component="$UI/system/components/justep/titleBar/titleBar" title="文件下载例子"
    
14.           class="x-titlebar">
    
15.           <div class="x-titlebar-left">
    
16.             <a component="$UI/system/components/justep/button/button"
    
17.               label="" class="btn btn-link btn-only-icon" icon="icon-chevron-left"
    
18.               onClick="{operation:'window.close'}" xid="backBtn">
    
19.               <i class="icon-chevron-left"/>  
    
20.               <span></span>
    
21.             </a>
    
22.           </div>  
    
23.           <div class="x-titlebar-title">文件下载例子</div>  
    
24.           <div class="x-titlebar-right reverse">
    
25.           </div>
    
26.         </div>
    
27.       </div>  
    
28.     <div class="x-panel-content  x-scroll-view" xid="content1" _xid="C6F7F7DA4B0000019BF4121064101880" style="bottom: 0px;"><div class="x-scroll" component="$UI/system/components/justep/scrollView/scrollView" xid="scrollView1">
    
29.    <div class="x-content-center x-pull-down container" xid="div1">
    
30.     <i class="x-pull-down-img glyphicon x-icon-pull-down" xid="i1"></i>
    
31.     <span class="x-pull-down-label" xid="span1">下拉刷新...</span></div>
    
32.    <div class="x-scroll-content" xid="div2"><div component="$UI/system/components/justep/list/list" class="x-list" xid="list1" data="data1">
    
33.    <ul class="x-list-template" xid="listTemplateUl1">
    
34.     <li xid="li1"><div component="$UI/system/components/justep/row/row" class="x-row" xid="row1">
    
35.    <div class="x-col x-col-50 x-col-center" xid="col1"><div component="$UI/system/components/justep/output/output" class="x-output" xid="output1" bind-ref="ref('fTitle')"></div></div>
    
36.    <div class="x-col x-col-20 x-col-center" xid="col2">
    
37.            <div class="progress" style="margin-bottom:0px;" xid="div5">
    
38.    <div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" xid="progressbar1"></div></div></div><div class="x-col x-col-fixed x-col-center" xid="col3"><a component="$UI/system/components/justep/button/button" class="btn btn-default" label="下载" xid="button1" onClick="downLoadFile">
    
39.    <i xid="i2"></i>
    
40.    <span xid="span3">下载</span></a>
    
41.   <a component="$UI/system/components/justep/button/button" class="btn btn-default" label="打开" xid="button2" onClick="openFile">
    
42.    <i xid="i3"></i>
    
43.    <span xid="span4">打开</span></a>
    
44.   </div></div></li></ul> </div></div>
    
45.    <div class="x-content-center x-pull-up" xid="div3">
    
46.     <span class="x-pull-up-label" xid="span2">加载更多...</span></div> </div></div>
    
47.   </div>
    
48. </div>

复制代码

index.js文件

1. define(function(require){
   
2.         var $ = require("jquery");
   
3.         var justep = require("$UI/system/lib/justep");
   
4.         require("$UI/system/lib/cordova/cordova");
   
5.         require("cordova!org.apache.cordova.open");
   
6.         require("cordova!org.apache.cordova.file");
   
7.         require("cordova!org.apache.cordova.file-transfer");
   
8.         
   
9.         var Model = function(){
   
10.                 this.callParent();
    
11.         };
    
12. 
    
13.         Model.prototype.downLoadFile = function(event){
    
14.                 var divProgress = $(event.source.domNode.parentElement.parentElement).find("div[xid='progressbar1']"); //获取当前行的进度条XID
    
15.                 var downLoadBtn = $(event.source.domNode.parentElement).find("a[xid='button1']")
    
16.                 var row = event.bindingContext.$object;  //获取当前行的数据
    
17.                 var filePath = 'file:///storage/emulated/0/biyao/'+ row.val('fLocalName'); //下载路径,数据库保存文件名
    
18.                 var uri = encodeURI(row.val('fUrl')); //下载地址
    
19.       
    
20.         var fileTransfer = new FileTransfer();
    
21.                 fileTransfer.onprogress = function(progressEvent) { //文件传输插件对象的进度方法调用
    
22.                         var percentProgress = parseInt((progressEvent.loaded / progressEvent.total) * 100)+ "%"; //获取已下载和总大小的百分比
    
23.                         if (progressEvent.lengthComputable)//获取浏览器返回HEAD信息包含CONTENT-LENGTH为TRUE 则执行下面
    
24.                         {        
    
25.                                 divProgress.css("width",percentProgress); //设置进度条的样式
    
26.                                 divProgress.html(percentProgress);        //设置进度条里面的数字
    
27.                         }
    
28.                 };
    
29.                
    
30.         fileTransfer.download( //调用对象的下载方法，开始下载
    
31.             uri,
    
32.             filePath,
    
33.             function(entry) {
    
34.                 console.log("download complete: " + entry.fullPath);//下载完成后调用方法
    
35.                 //这里下载完成后，将进度条隐藏或者写其他需要的代码
    
36.                 downLoadBtn.hide();
    
37.             },
    
38.             function(error) {  //出错回调函数
    
39.                 console.log("download error source " + error.source);
    
40.                 console.log("download error target " + error.target);
    
41.                 console.log("upload error code" + error.code);
    
42.             },
    
43.             false,
    
44.             {
    
45.                 headers: {
    
46.                     "Authorization": "Basic dGVzdHVzZXJuYW1lOnRlc3RwYXNzd29yZA=="
    
47.                 }
    
48.             }
    
49.         );        
    
50.         };
    
51. 
    
52.         Model.prototype.openFile = function(event){
    
53.                 var row = event.bindingContext.$object;
    
54.                 var localUrl = "file:///storage/emulated/0/biyao/"+ row.val('fLocalName');
    
55.                
    
56.                 var open = cordova.plugins.disusered.open;
    
57.                 function success() {
    
58.                         justep.Util.hint('正在打开！！！');
    
59.                 }
    
60.                 function error(code) {
    
61.                         if (code === 1) {
    
62.                                 alert('文件未在本地保存，请点击下载！');
    
63.                         } else {
    
64.                                 justep.Util.hint('未知错误，请联系管理员！');
    
65.                         }
    
66.                 }
    
67.                 open(localUrl, success, error);
    
68.         };
    
69. 
    
70.         return Model;
    
71. });

复制代码

byrrj

能做文件上传吗

biyaooo

byrrj 发表于 2016-3-15 17:51
能做文件上传吗

文件上传已经有Masion大神做了，我就不重复了。他有DEMO了，你论坛找找

ecoolper

赞一个

cc_day

用此案例测试下载，百度云盘上的docx文件时，为什么报未找到文件的错误呢？测试文档下载地址：http://yqall02.baidupcs.com/file ... ;to=qyac&fm=Yan,B,T,t&sta_dx=0&sta_cs=0&sta_ft=docx&sta_ct=0&fm2=Yangquan,B,T,t&newver=1&newfm=1&secfm=1&flow_ver=3&pkey=1400996f693bcfb9d7868d8959f12029d0a198ac4ad1000000002d69&sl=73269326&expires=8h&rt=pr&r=119044794&mlogid=3331057078306105225&vuk=2536671038&vbdid=1370636684&fin=testDown.docx&fn=testDown.docx&slt=pm&uta=0&rtype=1&iv=0&isw=0&dp-logid=3331057078306105225&dp-callid=0.1.1

cc_day

cc_day 发表于 2016-5-23 15:03
用此案例测试下载，百度云盘上的docx文件时，为什么报未找到文件的错误呢？测试文档下载地址：http://yqall ...

http://yqall02.baidupcs.com/file ... amp;dp-callid=0.1.1

rm50655739

请问w文件有下载没有？

Story

你好  请问你这个下载调用了插件以后  不需要写什么后台java么？  直接js+调用插件就可以实现下载么？

Story

还有，我看了一下这段代码  里面 有个列 name是fUrl <column label="下载地址" name="fUrl" type="String" xid="xid4"></column>
然后接着往下看又发现了三个 fUrl":"http://movie.ks.js.cn/flv/other/1_0.mp4"  "fUrl":"http://sd.downxia.com/down/pptview2003.rar", fUrl":"http://filelx.liqucn.com/didi_psngr_v4.2.5_50010.apk  
想问一下楼主  这三个fUrl是怎么得到的？还是直接给的呢？

biyaooo

Story 发表于 2016-6-21 20:23
还有，我看了一下这段代码  里面 有个列 name是fUrl
然后接着往下看又发现了三个 fUrl":"http://movie.ks. ...

我是直接放到data本地的数据里面了，你可以从数据库取出来赋值的