精华内容
下载资源
问答
  • 如何识别并监听微信小程序的onHide()函数 新人初来乍到,大二学生。在做小程序的过程中,遇到了关于onHide()函数状态识别(是否退出程序或者微信,还是仅仅息屏)的需求,百度一圈发现有这种需求的还不在少数,无奈...

    如何识别并监听微信小程序的息屏操作

    新人初来乍到,大二学生。在做小程序的过程中,遇到了关于onHide()函数状态识别(是否退出程序或者微信,还是仅仅息屏)的需求,百度一圈发现有这种需求的还不在少数,无奈问的多,做到的少,微信官方也没有提供onHide()。一筹莫展的时候,我决定另辟蹊径,成功地通过鸡贼的操作做到了关于息屏和离开页面的监听需求,希望能够帮到大家。

    —————————————咸鱼的分割线———————————————
    以上全是废话,不看也罢,直接上代码!
    !!!!!(注意,以下代码目前只适用于iOS系统,安卓还不能实现)!!!!

    如何判断是否离开小程序页面(包括退出微信)

    众所周知,小程序官方提供了onHide函数,此函数用法如下:
    在这里插入图片描述
    代码很简单但是缺点也很明显,微信官方给的onHide()的执行条件是“小程序从前台进入后台时触发”,解释一下,就是只要用户看不见这个页面,包括离开小程序,离开此页面,离开微信,熄灭屏幕……都会被调用。

    所以onHide()其实在某些时候会变得很鸡肋,那该如何使onHide()变得灵活呢?

    一个鸡贼的可行解以识别用户息屏操作

    在最开始的时候,我也一筹莫展,但想要监听onHide()函数其实也不是非常难的事情。
    还记不记得微信官方提供的wx.getScreenBrightness()函数?对,有人应该已经猜到我下一步要干什么了。
    先放一段官方文档:
    https://developers.weixin.qq.com/miniprogram/dev/api/device/screen/wx.getScreenBrightness.html
    在这里插入图片描述

    ——————————————————重点——————————————————
    息屏其实是一个状态,它其实可以被理解成屏幕亮度逐渐熄灭至零。而亮屏其实可被理解成屏幕亮度从零逐渐变大到默认亮度。
    之前很火的iOS睁眼壁纸其实就是这个原理,有兴趣的可以去试试。
    所以之后的事情就变得非常简单了,只要将对屏幕亮度的监听函数写在onHide()函数里,就可以实现对监听事件的监听了。
    (!!!再次提醒,安卓平台暂不支持该种操作,因为安卓系统息屏的时候屏幕亮度并不会至零,还是息屏前的值!!!)

    息屏监听代码

    /**
       * 生命周期函数--监听页面隐藏
       */
      // 当检测到系统为iOS时,开启离开提示功能
      onHide: function() {
        var that = this;
        wx.getSystemInfo({
          success: function(res) {
            that.setData({
              systemInfo: res,
            })
            if (res.platform == "ios") {
              wx.getScreenBrightness({
                success: function(res) {
                  console.log("当前屏幕亮度:" + res.value)
                  if (res.value !== 0) {
                    $wuxDialog().alert({
                      resetOnClose: true,
                      maskClosable: false,
                      closable: false,
                      title: '失败',
                      content: "因为您在任务期间退出了该页面,此次任务失败",
                      onConfirm(e) {
                        wx.switchTab({
                          url: "../today/today"
                        })
                      },
                    })
                  }
                }
              });
            } else if (res.platform == "android") {            
             
            }
          }
        })
      },
    
    

    总结

    这是我第一次在CSDN发帖,还不是很熟练,语言上的小纰漏也请各位大爷们担待。希望我这个小透明能帮助到大家( ̄▽ ̄)~

    展开全文
  • uniapp简介uniapp是近两年来比较火的号称开发者编写一套代码,可发布到iOS、Android、Web(响应式)、以及各种小程序的一个平台,它提供了各种丰富的API文档让开发者快速的完成各种功能。但是由于uniapp是一个新兴...

    e2b190307484cab03a1f0473598dffc3.png

    uniapp简介

    uniapp是近两年来比较火的号称开发者编写一套代码,可发布到iOS、Android、Web(响应式)、以及各种小程序的一个平台,它提供了各种丰富的API文档让开发者快速的完成各种功能。

    但是由于uniapp是一个新兴平台,生态还不够完整,难免会出现一些bug。今天我们就来讲讲uniapp官方上传文件API的坑以及如何使用原生app写法代替uniapp的上传接口。

    uniapp官方上传文件接口uni.uploadFile(OBJECT)

    将本地资源上传到开发者服务器,客户端发起一个 POST 请求,其中 content-type 为 multipart/form-data。

    接口参数:

    2c48d0bd788e313dd9d53f9559165e91.png

    如果你只需要上传文件而不需要监控实时上传进度,则使用uni.uploadFile接口即可。

    为何需要使用app原生上传代替 uniapp官网的uploadFile接口

    原因有两点:

    1、如果希望监控上传进度,则需要返回一个 uploadTask 对象,用这个对象的 onProgressUpdate方法进行监听上传进度,使用abort方法取消上传任务。而这个uploadTask对象如果定义为页面全局对象则onProgressUpdate方法和abort方法有时候会不执行,导致无法监听上传进度和取消任务。

    2、onProgressUpdate监听的上传进度与实际进度不相符。仅表现在安卓端,IOS端无这种情况。具体原因是我上传一个30多M的文件,刚开始进度是0,突然一下子嗖的就变成了100,导致页面的进度条也是一下子从0变到100,然后就在100 这里卡住。其实是远没有上传完的。等了好几秒才显示完成。

    如何使用app原生上传文件

    对原生接口文档感兴趣的小伙伴可以从这里进去。下面我直接贴上我的代码并通过注释进行代码讲解。

    // 发送文件方法
    sendFile(e) {
        //filePath是文件的本地路径,调用plus.io.convertAbsoluteFileSystem方法可以将平台绝对路径转换成本地URL路径
        const filePath = plus.io.convertAbsoluteFileSystem(e.filePath)
        // 这是后端服务器的文件上传地址
        const url = this.$urlConfig.mattermost + '/plugins/plugin_ruixin_base/file/post'
        // 这是创建上传任务时所需要到的配置参数
        const uploadOptions = {
            // 分块上传的大小单位kb,Android平台需设置分块上传才能准确触发statechanged返回上传进度,ios自动忽略
            chunkSize: 100,
            method: 'POST'
        }
        // 创建上传任务
        this.uploadTask = plus.uploader.createUpload(url,uploadOptions)
        // 往上传任务里添加文件,第二个参数的字段有默认值,可以传空对象{}即可,但是不能不传
        this.uploadTask.addFile(filePath, {})
        // 这里可以将添加文件的返回值打印出来,true表示添加文件成功,false表示添加失败
        // console.log('添加文件', this.uploadTask.addFile(filePath, {}))
        // 往接口里添加其他额外的请求参数,第一个参数是key,第二个参数是value
        this.uploadTask.addData('string_key1', 'string_value1')
        // 这里可以将添加额外请求参数的返回值打印出来,true表示添加成功,false表示添加失败
        // console.log('添加额外请求参数', this.uploadTask.addData('string_key1', 'string_value1'))
        this.uploadTask.addData('string_key2', 'string_value2')
        // 设置请求头信息,根据后端接口的要求设置
        this.uploadTask.setRequestHeader('headerName1', 'headerValue1')
        this.uploadTask.setRequestHeader('headerName2', 'headerValue2')
    
        // 注意:上面addFile、addData中但凡有一个返回false,都不能上传成功。请检查是否设置错了
    
        // 添加事件监听器用于监听实时进度和完成情况,第一个参数为“statechanged”,第二个参数是回调方法
        this.uploadTask.addEventListener( "statechanged", (upload, status) =>{
            switch (upload.state) {
                    case 1: // 上传任务开始请求
                        break
                    case 2: // 上传任务请求已经建立
                        break
                    case 3: // 上传任务提交数据,监听 statechanged 事件时可多次触发此状态。(重点)
                        // uploadedSize表示当前已经上传了的数据大小,totalSize表示文件总大小,单位是字节b
                        console.log('上传进度',parseInt(100 * upload.uploadedSize/upload.totalSize) )
                        break
                    case 4: // 上传任务已完成, 无论成功或失败都会执行到 4 这里
                        if (status === 200) {
                            // 上传成功
                        } else {
                            // 上传失败
                        }
            }
        })
        // 开始执行上传任务
        this.uploadTask.start()
    }

    运行代码之后打印出比较精确的实时上传进度

    总结

    uniapp上传文件的接口uploadfile主要的坑在于如果你想监控实时上传进度,在安卓端它无法提供一个实时准确的上传进度。如果不需要监控实时上传进度,使用uploadfile接口还是很不错的,使用简单便捷。原生上传文件接口虽然比较复杂,但是好在安卓和苹果都能支持,保证了兼容性。

    睿江云官网:www.eflycloud.com

    展开全文
  • 小编推荐:Fundebug提供JS错误监控、微信小程序错误监控、微信小游戏错误监控,Node.j错误监控和Java错误监控。真的是一个很好用的错误监控费服务,众多大佬公司都在使用。 有时候我们需要在用户离开页面的时候,...

    小编推荐:Fundebug提供JS错误监控、微信小程序错误监控、微信小游戏错误监控,Node.j错误监控和Java错误监控。真的是一个很好用的错误监控费服务,众多大佬公司都在使用。

    有时候我们需要在用户离开页面的时候,做一些上报来记录用户行为。又或者是发送服务器ajax请求,通知服务器用户已经离开,比如直播间内的退房操作。

    本文主要分两部分来讲解怎么完成退出行为的上报。

    1.事件监听

    浏览器有两个事件可以用来监听页面关闭,beforeunloadunloadbeforeunload是在文档和资源将要关闭的时候调用的, 这时候文档还是可见的,并且在这个关闭的事件还是可以取消的。比如下面这种写法就会让用户导致在刷新或者关闭页面时候,有个弹窗提醒用户是否关闭。

    window.addEventListener("beforeunload", function (event) {
      // Cancel the event as stated by the standard.
      event.preventDefault();
      // Chrome requires returnValue to be set.
      event.returnValue = '';
    });
    
    

    unload则是在页面已经正在被卸载时发生,此时文档所处的状态是:1.所有资源仍存在(图片,iframe等);2.对于用户所有资源不可见;3.界面交互无效(window.open, alert, confirm等);4.错误不会停止卸载文档的过程。

    基于以上两个方法就可以实现对页面关闭的事件监听了,为了稳妥,可以两个事件都监听。然后对监听函数做处理,让关闭事件只调用一次。

    2.请求发送

    有了上面的监听,事情只完成了一半,如果我们在监听中直接发送ajax请求,就会发现请求被浏览器abort了,无法发送出去。在页面卸载的时候,浏览器并不能保证异步的请求能够成功发出去。

    我们有几种方式可以解决这个问题:

    方案1: 发送同步的ajax请求

    var oAjax = new XMLHttpRequest();
    
    oAjax.open('POST', url + '/user/register', false);//false表示同步请求
    
    oAjax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    
    oAjax.onreadystatechange = function() {
        if (oAjax.readyState == 4 && oAjax.status == 200) {
            var data = JSON.parse(oAjax.responseText);
        } else {
            console.log(oAjax);
        }
    };
    
    oAjax.send('a=1&b=2');
    
    

    这种方式虽然有效,但是用户需要等待请求结束才可以关闭页面。对用户的体验不好。

    方案2:发送异步请求,并且在服务端忽略ajax的abort

    虽然异步请求会被浏览器abort,但是如果服务端可以忽略abort,仍然正常执行,也是可以的。比如PHP有ignore_user_abort函数可以忽略abort。这样需要改造后台,一般不太可行..

    方案3:使用navigator.sendBeacon发送异步请求

    根据MDN的介绍:

    这个方法主要用于满足 统计和诊断代码 的需要,这些代码通常尝试在卸载(unload)文档之前向web服务器发送数据。过早的发送数据可能导致错过收集数据的机会。然而, 对于开发者来说保证在文档卸载期间发送数据一直是一个困难。因为用户代理通常会忽略在卸载事件处理器中产生的异步 XMLHttpRequest 。

    从介绍上可以看出,这个方法就是用来在用户离开时发请求的。非常适合这种场景。 使用方式是这样的:

    navigator.sendBeacon(url [, data]);
    
    

    sendBeacon支持发送的data可以是ArrayBufferView, Blob, DOMString, 或者 FormData 类型的数据。

    下面是几种使用sendBeacon发送请求的方式,可以修改header和内容的格式,因为一般和服务器的通信方式都是固定的,如果修改了header或者内容,服务器就无法正常识别出来了。

    (1)使用Blob来发送 使用blob发送的好处是可以自己定义内容的格式和header。比如下面这种设置方式,就是可以设置content-type为application/x-www-form-urlencoded。

    blob = new Blob([`room_id=123`], {type : 'application/x-www-form-urlencoded'});
    navigator.sendBeacon("/cgi-bin/leave_room", blob);
    
    

    (2)使用FormData对象,但是这时content-type会被设置成"multipart/form-data"。

    var fd = new FormData();
    fd.append('room_id', 123);
    navigator.sendBeacon("/cgi-bin/leave_room", fd);
    
    

    (3)数据也可以使用URLSearchParams 对象,content-type会被设置成"text/plain;charset=UTF-8" 。

    var params = new URLSearchParams({ room_id: 123 })
    navigator.sendBeacon("/cgi-bin/leave_room", params);
    
    

    通过尝试,可以发现使用blob发送比较方便,内容的设置也比较灵活,如果发送的消息抓包后发现后台没有识别出来,可以尝试修改内容的string或者header,来找到合适的方式发送请求。

     



    作者:撩课学院
    链接:https://www.jianshu.com/p/3350a4dfd0f3

    展开全文
  • Java聊天室程序源码(毕业设计)

    热门讨论 2009-03-01 16:33:58
    Clock.java 为客户端程序的一个小程序,实现的一个石英钟功能。 3. 2 系统实现原理 当用户聊天时,将当前用户名、聊天对象、聊天内容、聊天语气和是否私聊进行封装,然后与服务器建立Socket连接,再用对象输出流...
  • Java范例开发大全 (源程序

    热门讨论 2011-04-27 07:47:22
     实例202 程序退出 352  实例203 获取程序运行环境的信息 353  第4篇 Java高级开发技术  第12章 集合(教学视频:45分钟) 358  12.1 Set 358  实例204 利用HashSet删除学生 358  实例205 不重复的...
  • Java范例开发大全(全书源程序

    热门讨论 2013-04-05 11:50:26
    实例202 程序退出 352 实例203 获取程序运行环境的信息 353 第4篇 Java高级开发技术 第12章 集合(教学视频:45分钟) 358 12.1 Set 358 实例204 利用HashSet删除学生 358 实例205 不重复的随机数序列 360 ...
  • //开始按钮 **感觉这地方有问题,如何修改?????** jbArray[0].addActionListener(new ActionListener(){ public void actionPerformed(ActionEvent e) { jbArray[0]....
  • 所以这个“中间”换成程序语言,就是指深度优先遍历时,位于首尾两节点之间的所有文本节点。DFS 的方法有很多,可以递归,也可以用栈+循环,这里就不赘述了。 需要提一下的是&#...
  • Visual C++编程技巧精选500例.pdf

    热门讨论 2012-09-01 15:01:50
    185 如何获取线程退出码? 186 如何使用线程优先级? 187 如何使用用户界面线程? 188 如何实现多线程多任务? 189 如何使用临界区同步线程? 190 如何调用帮助文件(.chm)? 第10章 字符串 191 如何对字符串进行连接? 192...
  • 7.3.10 程序退出 170 7.3.11 窗口例程 170 7.3.12 CClient类 171 7.3.13 管理客户端套接字的链表 171 7.3.14 网络事件消息处理函数 172 7.4 调用WSAAsyncSelect()函数注意问题 173 7.4.1 接收不到网络...
  • 7.3.10 程序退出 170 7.3.11 窗口例程 170 7.3.12 CClient类 171 7.3.13 管理客户端套接字的链表 171 7.3.14 网络事件消息处理函数 172 7.4 调用WSAAsyncSelect()函数注意问题 173 7.4.1 接收不到网络...
  • java源码包---java 源码 大量 实例

    千次下载 热门讨论 2013-04-18 23:15:26
     基于JAVA的UDP服务器模型源代码,内含UDP服务器端模型和UDP客户端模型两个小程序,向JAVA初学者演示UDP C/S结构的原理。 简单聊天软件CS模式 2个目标文件 一个简单的CS模式的聊天软件,用socket实现,比较简单。 ...
  • 1.4一个简单的Java小程序16 1.5本章小结18 第2章Java语言基础19 2.1Java语言的特点19 2.2Java程序的构成21 2.3数据类 型23 2.3.1基本数据类型23 2.3.2常量25 2.3.3变量26 2.3.4整型数据27 .2.3.5浮点型...
  • JSTL详细标签库介绍

    2010-11-01 16:37:44
    target=_blank>如何程序异常或正常退出JVM时执行特定代码</A> <LI><A title=构建更好的异常处理框架 href="http://www.jspcn.net/htmlnews/11453827062501758.html" target=_blank>构建更好的异常处理框架...
  • java源码包2

    千次下载 热门讨论 2013-04-20 11:28:17
     基于JAVA的UDP服务器模型源代码,内含UDP服务器端模型和UDP客户端模型两个小程序,向JAVA初学者演示UDP C/S结构的原理。 简单聊天软件CS模式 2个目标文件 一个简单的CS模式的聊天软件,用socket实现,比较简单。 ...
  • java源码包3

    千次下载 热门讨论 2013-04-20 11:30:13
     基于JAVA的UDP服务器模型源代码,内含UDP服务器端模型和UDP客户端模型两个小程序,向JAVA初学者演示UDP C/S结构的原理。 简单聊天软件CS模式 2个目标文件 一个简单的CS模式的聊天软件,用socket实现,比较简单。 ...
  • java源码包4

    千次下载 热门讨论 2013-04-20 11:31:44
     基于JAVA的UDP服务器模型源代码,内含UDP服务器端模型和UDP客户端模型两个小程序,向JAVA初学者演示UDP C/S结构的原理。 简单聊天软件CS模式 2个目标文件 一个简单的CS模式的聊天软件,用socket实现,比较简单。 ...
  • 2个目标文件 摘要:Java源码,网络相关,UDP 基于JAVA的UDP服务器模型源代码,内含UDP服务器端模型和UDP客户端模型两个小程序,向JAVA初学者演示UDP C/S结构的原理。 简单聊天软件CS模式 2个目标文件 一个简单的CS模式...
  • 2个目标文件 摘要:Java源码,网络相关,UDP 基于JAVA的UDP服务器模型源代码,内含UDP服务器端模型和UDP客户端模型两个小程序,向JAVA初学者演示UDP C/S结构的原理。 简单聊天软件CS模式 2个目标文件 一个简单的CS模式...
  • 6.2 如何执行gawk程序 6.3 文件、记录和字段 6.4 模式和动作 6.5 比较运算和数值运算 6.6 内部函数 6.6.1 随机数和数学函数 6.6.2 字符串的内部函数 6.6.3 输入输出的内部函数 6.7 字符串和数字 6.8 格式化输出 6.9 ...
  • 2个目标文件 摘要:Java源码,网络相关,UDP 基于JAVA的UDP服务器模型源代码,内含UDP服务器端模型和UDP客户端模型两个小程序,向JAVA初学者演示UDP C/S结构的原理。 简单聊天软件CS模式 2个目标文件 一个简单的CS模式...
  • JAVA上百实例源码以及开源项目

    千次下载 热门讨论 2016-01-03 17:37:40
     基于JAVA的UDP服务器模型源代码,内含UDP服务器端模型和UDP客户端模型两个小程序,向JAVA初学者演示UDP C/S结构的原理。 简单聊天软件CS模式 2个目标文件 一个简单的CS模式的聊天软件,用socket实现,比较简单。 ...
  • java范例开发大全(pdf&源码)

    热门讨论 2013-07-04 13:04:40
    实例202 程序退出 352 实例203 获取程序运行环境的信息 353 第4篇 Java高级开发技术 第12章 集合(教学视频:45分钟) 358 12.1 Set 358 实例204 利用HashSet删除学生 358 实例205 不重复的随机数序列 360 实例206...
  • 6.2 如何执行gawk程序 48 6.3 文件、记录和字段 48 6.4 模式和动作 49 6.5 比较运算和数值运算 50 6.6 内部函数 50 6.6.1 随机数和数学函数 51 6.6.2 字符串的内部函数 51 6.6.3 输入输出的内部函数 52 6.7 字符串和...

空空如也

空空如也

1 2 3 4
收藏数 61
精华内容 24
关键字:

如何监听小程序退出