微信小程序进度条

<button class=‘down-img‘ bindtap=‘downImg‘ data-scr=‘{{imageUrl}}‘>下载图片{{progress}}</button>
downImg: function (e) {
    var _this = this;

    // 获取图片地址(http://www.playsort.cn/...)
    //var img = e.currentTarget.dataset.src;
    //var img = ‘../pic/U1513P28T52D3414F872DT20081124143718.jpg?id=‘ + Math.floor(Math.random() * 100000);;
    var img = ‘http://i0.sinaimg.cn/ent/y/w/2008-11-24/U1513P28T52D3414F872DT20081124143718.jpg?id=‘ + Math.floor(Math.random() * 100000);
    // 下载监听进度
    const downloadTask = wx.downloadFile({
      url: img,
      success: function (res) {
        // 只要服务器有响应数据,就会把响应内容写入文件并进入 success 回调,业务需要自行判断是否下载到了想要的内容
        console.log(res)
        if (res.statusCode === 200) {
          // wx.saveImageToPhotosAlbum({
          //   filePath: res.tempFilePath,
          //   success: function (res) {
          //     wx.showToast({
          //       title: ‘保存图片成功!~‘,
          //     });
          //   },
          //   fail: function (res) {
          //     wx.showToast({
          //       title: ‘保存图片失败!~‘,
          //     });
          //   }
          // })
          console.log(‘code:‘ + res.statusCode )
        }else{
          console.log(‘code:‘ + res.statusCode )
        }
      }
    });
    downloadTask.onProgressUpdate((res) => {
      if (res.progress === 100) {
        this.setData({
          progress: ‘100%‘
        });
        var st = getApp().globalData.st
        var et = new Date()
        console.log(et-st)
        console.log(410.45 * 1000 / (et - st))
      }else if(res.progress === 1){
        getApp().globalData.st = new Date()
        console.log(getApp().globalData.st);
      }
      else {
        this.setData({
          progress: res.progress + ‘%‘
        });
      }
    });
  }

原文地址:https://www.cnblogs.com/CryOnMyShoulder/p/11524994.html

时间: 2024-11-10 12:03:17

微信小程序进度条的相关文章

微信小程序-进度条-刻度

js var app = getApp()Page({ data: { num:8,//这是当前有几个人 jindutiao: [ //这个是进度条的标准,刻度 { num:3, price:'999' }, { num: 5, price: '799' }, { num: 10, price: '599' } ], }, onLoad:function(){ this.jindutiao(); }, jindutiao: function () { var that = this; var j

微信小程序 -进度条- 物流状态-发货-运输-派件-签收

.sec-wrap { width: 100%; ">; height: 180rpx; margin-bottom: 50rpx; display: flex; align-items: center; padding: 0rpx 70rpx; margin-left: -100rpx; } .sec-wrap .exp_box { position: relative; height: 120rpx; margin-left: 100rpx; } .sec-wrap .exp_box

Linux中的小程序—— 进度条

在说正事之前,首先科普一下在什么是回车什么是换行? 我们通常所说的回车就是从一行的末尾跳到另一行的开头,但事实上这却是由回车和换行两个动作所完成的,也就是键盘上<enter>所完成的工作.但实际上,回车是光标重回开头,换行就仅仅只是光标往下一行.(回车\r,r为return:换行\n,n为newline) 对于一个shell中运行的程序,默认情况下printf()是行缓冲的.意思是printf输出时是先将内容输送到缓冲区,再从缓冲区输送到屏幕上.当写入的字符中含有换行符\n时,缓冲区就会立马把

微信小程序 - 步骤条组件

<!-- 未激活颜色: uncolor:'#ccc' 激活 active:0 数据源 data:[{},{}] 步骤条类型:type basic detail num more --> <steps uncolor="#ccc" type="detail" active="0" data="{{basicsList}}" /> 点击下载:示例 原文地址:https://www.cnblogs.com/c

微信小程序组件解读和分析:六、progress进度条

progress进度条组件说明: 进度条,就是表示事情当前完成到什么地步了,可以让用户视觉上感知事情的执行.progress进度条是微信小程序的组件,和HTML5的进度条progress类似. progress进度条组件示例代码运行效果如下: 下面是WXML代码: [XML] 纯文本查看 复制代码 ? 1 2 3 4 5 <!--index.wxml--> <view class="content">     <text class="con-t

微信小程序家庭记账本开发进度五

我们要做的事一个家庭记账本的微信小程序,首先,先对app.json,进行编译 { "pages": [ "pages/index/index", "pages/item/item" ], "window": { "backgroundTextStyle": "dark", "navigationBarBackgroundColor": "#fff"

微信小程序开发基础知识总结

微信小程序在无论在功能.文档及相关支持方面,都是优于前面几种微信账号类型,它提供了很多原生程序才有的接口,使得我们的小程序在很多方面突破H5页面应用的限制,更加接近原生程序的功能,因此微信小程序具有很大的前景想象力.它提供了自己的视图层描述语言 WXML 和 WXSS,以及基于 JavaScript 的逻辑层框架,并在视图层与逻辑层间提供了数据传输和事件系统,可以让开发者可以方便的聚焦于数据与逻辑上. 1.小程序的目录结构 小程序的目录结构如下所示. 其中项目级别的的文件包括 app.js.ap

微信小程序看上去很美

目前不少关于 微信小程序 的文章主要集中在两各方面:一是开发技术细节:二是怎么靠此赚钱. -- “微信小程序”所处的环境 -- 2016年初,美国号召全民学编程,包括监狱服刑人员.同样,在中国要想掌握 HTML.JavaScript 和 SQL 技术也越来越容易,懂得毛皮的人也越来越多.加上政府近几年鼓励年轻人创业,尤其是“互联网+”概念,让很多人有创业的冲动:找几个朋友谋划个创业点子,找个懂点 HTML+JavaScript+SQL 技术的人合伙,不用营业执照,不用租用场地,未来之星就此诞生.

微信小程序内训笔记

2016年9月22日凌晨微信官方正式宣布“小程序”开始内测,有“微信之父”之称.腾讯集团高级执行副总裁张小龙在2016年末对外宣布“小程序“应用将于2017年1月9日正式推出 这一次微信还是按照惯例,通过机器跑出的数据,首先将“小程序”开放给了200名拥有微信服务号的开发者进行内测,而且目前开发者发布的小程序无法在用户的客户端显示 简单说,微信“小程序”可以为开发者提供基于微信的表单.导航.地图.媒体和位置等开发组件,让他们在微信的网页里构建一个HTML 5应用.同时微信还开放了登录和微信支付等