近来在研究微信小程用户是否在使用小程序或者查看用户在小程序停留的时间，无意中在git上找到了相关的解决问题方法，希望正在开发这个功能的的你，能帮助你解决！

但是好像有

收到一个需求，要统计一个用户在我们小程序的每个页面的停留时间。

看了下现成的API，除了这个好像也没有别的可以用：https://mp.weixin.qq.com/debug/wxadoc/dev/api/analysis-visit.html#访问趋势，

这个里面貌似有页面停留时间的数据，

参数说明ref_date时间，如：”20170306-20170312″session_cnt打开次数（自然周内汇总）visit_pv访问次数（自然周内汇总）visit_uv访问人数（自然周内去重）visit_uv_new新用户数（自然周内去重）stay_time_uv人均停留时长 (浮点型，单位：秒)stay_time_session次均停留时长 (浮点型，单位：秒)visit_depth平均访问深度 (浮点型)

但是好像有查询时间限制，只能查询一天的数据。毕竟小程序数据很大，估计也是怕数据量太大查询慢吧。

算了，自己写一个吧，

初步想法，在页面的onShow事件里面，打一个开始的时间戳，然后在onHide里面再弄一个时间戳，两个一减，然后把得出来的数据，一提交，齐活。

BUT~，尼玛，onShow和onHide不仅在页面切换的时候会触发，小程序切换到后台和回到前台，也会触发，这就有干扰了。

但是在app.js里面的onShow和onHide事件只在小程序前后台切换的时候才会触发，不会在页面切换的时候触发，利用这点，把前后台切换排除掉，只在页面切换的时候，上报页面停留时间就好了

在app.js里面，初始化以下三个状态，

globalData: { 
    firstIn:1,
    onShow: 0, 
    onHide: 0
}

onShow和onHide的值默认为0，当小程序进入后台或者返回前台的时候，给这两个值变为1，用来告诉页面，刚才的切换是前后台切换，不是页面切换，不用上报页面停留时间。代码如下：

依旧是在app.js里面

onShow(){ 
    if(this.globalData.firstIn){
        this.globalData.firstIn = 0; 
    } else{ 
        this.globalData.onShow = 1; 
    } 
}, 
onHide(){ 
    this.globalData.onHide = 1; 
}

里面的firstIn表示是不是第一次进入小程，因为第一次进入的时候也会触发onShow（相当于从后台切换到前台了），要把这个也排除在外。默认是第一次进入，进入之后就把这个值置为0

OK，app.js准备好了，然后看下具体页面的，

在页面里面，先声明两个变量，一个startTime,一个endTime分别来存储用户进入页面的时间和离开的时间

var startTime,
      endTime,
      app = getApp();
Page({
    onShow(){
        setTimeout(function () {
            if (app.globalData.onShow) {
                app.globalData.onShow = 0;
                console.log("demo前后台切换之切到前台")
            }
            else {
                console.log("demo页面被切换显示")
                startTime = +new Date();
            }
        }, 100)
    },
    onHide(){
        setTimeout(function () {
            if (app.globalData.onHide) {
                app.globalData.onHide = 0;
                console.log("还在当前页面活动")
            }
            else {
                endTime = +new Date();
                console.log("demo页面停留时间：" + (endTime - startTime))
                var stayTime = endTime - startTime;
               //这里获取到页面停留时间stayTime，然后了可以上报了
            }
        }, 100)
    }
})

有几个页面要统计的，就把这几个页面都加一下。

嫌麻烦的话，可以修改一下Page方法，默认自带onShow和onHide，然后如果外面有传入的话，可以合并。页面在使用的时候，直接用这个心的Page，就不用每个页面都onHide、onShow了，这里就不上具体的代码了。

关于setTimeout的说明：

页面的onShow和onHide会在app.js的onShow和onHide之前执行，加个延迟，放到后面执行，这样每次都可以先检测是页面切换还是前后台切换，然后再去做对应的逻辑，不然就反了。

原文：https://developers.weixin.qq.com/community/develop/article/doc/000ac4169107e8e1a12b4ff6256813

参考地址：https://github.com/ireeoome/reeoome/issues/3

catch:touchmove="touchmove"

touchmove() {},

可以在弹窗层加 catch:touchmove=“touchmove” 就可以禁止滚动了

禁止页面滚动可以在
json 文件中 加

"disableScroll":true

以前只知道小程序有一个UI组件库，

不知道小程序还有一个官方示例Demo，今天用了一下大大的提高了我的编程速度，界面截图如下：

具体的你们自己打开吧，我给你们整好了拦截，微信小程序官方示例Demo代码
在自己的电脑上随便找个位置自己下载解压就行了。

原文：https://blog.csdn.net/qq_44078389/article/details/104316738

//目前小程序没有fadeIn()，fadeOut()方法所以还是本方法手写

<!--wxml-->
<!--蒙版（渐出淡去效果）-->
<view class="aa" style='height: {{winH}}rpx;opacity: {{opacity}};'></view>

<!--正式内容（渐入加深效果）-->
 <view class="container log-list" style='opacity: {{1-opacity}};'>
   <block wx:for="{{logs}}" wx:for-item="log">
     <text class="log-item">{{index + 1}}. {{log}}</text>
   </block>
 </view>

<!--wxss-->

.log-list {
  display: flex;
  flex-direction: column;
  padding: 40rpx;
}
.log-item {
  margin: 10rpx;
}
.aa{
  background-color: darkcyan;
}

//xx.js
const util = require('../../utils/util.js')
//把winHeight设为常量，不要放在data里（一般来说不用于渲染的数据都不能放在data里）
const winHeight = wx.getSystemInfoSync().windowHeight

Page({
  data: {
    logs: []
  },
  onLoad: function () {
    this.setData({
      winH: wx.getSystemInfoSync().windowHeight,
      opacity: 1,
      //这个是微信官方给的获取logs的方法 看了收益匪浅
      logs: (wx.getStorageSync('logs') || []).map(log => {
        return util.formatTime(new Date(log))
      })
    })
  },
  onShow: function () {
    this.hide()
  },
  //核心方法，线程与setData
  hide: function () {
    var vm = this
    var interval = setInterval(function () {
      if (vm.data.winH > 0) {
        //清除interval 如果不清除interval会一直往上加
        clearInterval(interval)
        vm.setData({ winH: vm.data.winH - 5, opacity: vm.data.winH / winHeight })
        vm.hide()
      }
    }, 10);
  }
})

对image的父元素使用border-radius，并添加overflow:hidden属性