起步软件技术论坛
搜索
 找回密码
 注册

QQ登录

只需一步,快速开始

查看: 27185|回复: 36

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

  [复制链接]

33

主题

213

帖子

1158

积分

金牌会员

Rank: 6Rank: 6

积分
1158
QQ
发表于 2016-3-15 17:35:19 | 显示全部楼层 |阅读模式
本帖最后由 biyaooo 于 2016-3-15 17:49 编辑

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

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

Screenshot_2016-03-15-17-14-36_biyao.test.cn.png Screenshot_2016-03-15-17-14-44_biyao.test.cn.png

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.         Model.prototype.downLoadFile = function(event){
  13.                 var divProgress = $(event.source.domNode.parentElement.parentElement).find("div[xid='progressbar1']"); //获取当前行的进度条XID
  14.                 var downLoadBtn = $(event.source.domNode.parentElement).find("a[xid='button1']")
  15.                 var row = event.bindingContext.$object;  //获取当前行的数据
  16.                 var filePath = 'file:///storage/emulated/0/biyao/'+ row.val('fLocalName'); //下载路径,数据库保存文件名
  17.                 var uri = encodeURI(row.val('fUrl')); //下载地址
  18.       
  19.         var fileTransfer = new FileTransfer();
  20.                 fileTransfer.onprogress = function(progressEvent) { //文件传输插件对象的进度方法调用
  21.                         var percentProgress = parseInt((progressEvent.loaded / progressEvent.total) * 100)+ "%"; //获取已下载和总大小的百分比
  22.                         if (progressEvent.lengthComputable)//获取浏览器返回HEAD信息包含CONTENT-LENGTH为TRUE 则执行下面
  23.                         {        
  24.                                 divProgress.css("width",percentProgress); //设置进度条的样式
  25.                                 divProgress.html(percentProgress);        //设置进度条里面的数字
  26.                         }
  27.                 };
  28.                
  29.         fileTransfer.download( //调用对象的下载方法,开始下载
  30.             uri,
  31.             filePath,
  32.             function(entry) {
  33.                 console.log("download complete: " + entry.fullPath);//下载完成后调用方法
  34.                 //这里下载完成后,将进度条隐藏或者写其他需要的代码
  35.                 downLoadBtn.hide();
  36.             },
  37.             function(error) {  //出错回调函数
  38.                 console.log("download error source " + error.source);
  39.                 console.log("download error target " + error.target);
  40.                 console.log("upload error code" + error.code);
  41.             },
  42.             false,
  43.             {
  44.                 headers: {
  45.                     "Authorization": "Basic dGVzdHVzZXJuYW1lOnRlc3RwYXNzd29yZA=="
  46.                 }
  47.             }
  48.         );        
  49.         };

  50.         Model.prototype.openFile = function(event){
  51.                 var row = event.bindingContext.$object;
  52.                 var localUrl = "file:///storage/emulated/0/biyao/"+ row.val('fLocalName');
  53.                
  54.                 var open = cordova.plugins.disusered.open;
  55.                 function success() {
  56.                         justep.Util.hint('正在打开!!!');
  57.                 }
  58.                 function error(code) {
  59.                         if (code === 1) {
  60.                                 alert('文件未在本地保存,请点击下载!');
  61.                         } else {
  62.                                 justep.Util.hint('未知错误,请联系管理员!');
  63.                         }
  64.                 }
  65.                 open(localUrl, success, error);
  66.         };

  67.         return Model;
  68. });
复制代码

0

主题

2

帖子

10

积分

新手上路

Rank: 1

积分
10
QQ
发表于 2016-3-15 17:51:19 | 显示全部楼层
能做文件上传吗

点评

可以!! www.shubaol.com/book/1/1014/ 媳妇与公公  发表于 2017-3-18 19:10
回复 支持 反对

使用道具 举报

33

主题

213

帖子

1158

积分

金牌会员

Rank: 6Rank: 6

积分
1158
QQ
 楼主| 发表于 2016-3-15 17:53:28 | 显示全部楼层
byrrj 发表于 2016-3-15 17:51
能做文件上传吗

文件上传已经有Masion大神做了,我就不重复了。他有DEMO了,你论坛找找
回复 支持 反对

使用道具 举报

997

主题

4326

帖子

1万

积分

论坛元老

Rank: 8Rank: 8

积分
10694
QQ
发表于 2016-3-15 17:56:33 来自手机 | 显示全部楼层
赞一个
回复

使用道具 举报

79

主题

581

帖子

3464

积分

论坛元老

Rank: 8Rank: 8

积分
3464
QQ
发表于 2016-5-23 15:03:56 | 显示全部楼层
用此案例测试下载,百度云盘上的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

小尾巴~~世间万难,无非一拖二懒三不读书
回复 支持 反对

使用道具 举报

79

主题

581

帖子

3464

积分

论坛元老

Rank: 8Rank: 8

积分
3464
QQ
发表于 2016-5-23 15:05:14 | 显示全部楼层
cc_day 发表于 2016-5-23 15:03
用此案例测试下载,百度云盘上的docx文件时,为什么报未找到文件的错误呢?测试文档下载地址:http://yqall ...

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

小尾巴~~世间万难,无非一拖二懒三不读书
回复 支持 反对

使用道具 举报

19

主题

87

帖子

171

积分

初级会员

Rank: 2

积分
171
QQ
发表于 2016-6-8 15:31:48 | 显示全部楼层
请问w文件有下载没有?
回复 支持 反对

使用道具 举报

45

主题

144

帖子

809

积分

高级会员

Rank: 4

积分
809
QQ
发表于 2016-6-21 20:16:07 | 显示全部楼层
你好  请问你这个下载调用了插件以后  不需要写什么后台java么?  直接js+调用插件就可以实现下载么?
回复 支持 反对

使用道具 举报

45

主题

144

帖子

809

积分

高级会员

Rank: 4

积分
809
QQ
发表于 2016-6-21 20:23:09 | 显示全部楼层
还有,我看了一下这段代码  里面 有个列 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是怎么得到的?还是直接给的呢?
回复 支持 反对

使用道具 举报

33

主题

213

帖子

1158

积分

金牌会员

Rank: 6Rank: 6

积分
1158
QQ
 楼主| 发表于 2016-7-8 11:05:12 | 显示全部楼层
Story 发表于 2016-6-21 20:23
还有,我看了一下这段代码  里面 有个列 name是fUrl
然后接着往下看又发现了三个 fUrl":"http://movie.ks. ...

我是直接放到data本地的数据里面了,你可以从数据库取出来赋值的
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

小黑屋|手机版|X3技术论坛|Justep Inc.    

GMT+8, 2024-3-28 22:51 , Processed in 0.079338 second(s), 27 queries .

Powered by Discuz! X3.4

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表