微信小程序遇到的一些问题（mpvue）

关于scroll-view的用法

1.下拉刷新的实现方法（@scrolltoupper只能在向下滑动一段距离再触顶才能生效）

实现方法：（注意：下拉执行完毕后，不要使下拉动画直接消失，因为在ios中会出现闪动，所以最好加一个延时器）

    // touch三个方法确定下拉刷新
    touchStart (e) {
      this.startY = e.pageY
    },
    touchMove (e) {
      if (e.pageY > this.startY && this.startScroll <= 10) { // 下拉刷新的条件是手指向下移动且scrolltop<=10(通过bindscroll事件去获取)
        this.isTopLoading = true
      }
    },
    async touchEnd (e) {
      if (this.isTopLoading && this.startScroll <= 10) {
        await this.getHomeData()
        //加延时器避免页面出现闪动
        setTimeout(() => {
          this.isTopLoading = false
        }, 700)
      }
    }
    // 记录滚动时候的scrolltop的值
    scroll (e) {
      this.startScroll = e.target.scrollTop
    }
复制代码

2.scroll-view的bindscroll在快速滑动时获取的scrolltop不准确

解决办法：给scroll-view加一个属性:throttle="false"

3.回到顶部的实现方法

1.template部分
    <scroll-view :scroll-top="scrollTop">----简写
   <div class="toTop"
        v-if='topBtn'
        @click="toTopHandler">回到顶部</div>
2.script部分
    computed: {
        // 回到顶部的按钮，控制回顶按钮是否出现
        topBtn () {
          if (this.pageShow && this.startScroll > 500) {
            return true
          } else {
            return false
          }
        }
    }
    methods:{
        // 回到顶部
        toTopHandler () {
          let topHeight = this.scrollTop
          if (topHeight === 1) {
            topHeight = 0
          } else {
            topHeight = 1
          }
          this.scrollTop = topHeight
        }
    }
复制代码

另外的干货

1.判断网络状况

      mpvue.getNetworkType({
        async success (res) {
          const networkType = res.networkType
          if (networkType !== 'none') {
            const url = `/pages/videoPlay/Index?video=${videoSrc}&cover=${imageUrl}`
            mpvue.navigateTo({ url })
            mpvue.hideLoading()
          } else {
            mpvue.showToast({
              icon: 'none',
              title: '抱歉，网络好像开小差了'
            })
          }
        }
      })
复制代码

2.小程序中将视频保存到本地以及将文本复制到剪切板

    // 视频一键保存
    saveHandler: utils.debounce(function (filePath, title) {
    //检查授权状态
      wx.getSetting({
        success: (res) => {
          if (res.authSetting['scope.writePhotosAlbum'] === true) {
            this.startSave(filePath, title)
          } else {
            // 未授权进行授权
            mpvue.authorize({
              scope: 'scope.writePhotosAlbum',
              success: () => {
                this.startSave(filePath, title)
              },
              fail: () => {
                this.showModal(filePath, title)
              }
            })
          }
        },
        fail: () => {
          this.showModal(filePath, title)
        }
      })
    }, 300)
    //视频保存
    startSave (filePath, title) {
      mpvue.showLoading({
        title: '保存中'
      })
      mpvue.downloadFile({
        url: filePath, // 下载资源的地址网络
        success: function (res) {
          // console.log(res)
          // 只要服务器有响应数据，就会把响应内容写入文件并进入 success 回调
          if (res.statusCode === 200) {
            mpvue.saveVideoToPhotosAlbum({
              filePath: res.tempFilePath,
              success (res) {
                mpvue.hideLoading()
                mpvue.showToast({
                  icon: 'success',
                  title: '已保存到相册',
                  duration: 1000
                })
                if (title) {
                  setTimeout(() => {
                    // 复制内容到剪贴板的内容
                    mpvue.setClipboardData({
                      data: title,
                      success (res) {
                        mpvue.showToast({
                          icon: 'success',
                          title: '文案已复制',
                          duration: 1500
                        })
                      }
                    })
                  }, 1200)
                }
              },
              fail () {
                mpvue.hideLoading()
                mpvue.showToast({
                  icon: 'none',
                  title: '保存失败',
                  duration: 1500
                })
              }
            })
          }
        },
        fail: function () {
          mpvue.showToast({
            icon: 'none',
            title: '下载失败',
            duration: 1500
          })
        }
      })
    },
    // 获取授权提示
    showModal (filePath, title) {
      mpvue.showModal({
        title: '操作提示',
        content: '打开授权，允xx使用您的相册功能。',
        success: (res) => {
          if (res.confirm) {
            wx.openSetting()
          }
        }
      })
    }
复制代码

一些另外的经验

1.onshow钩子是在每次进入页面都会执行，无论是tarbar的切换还是页面跳转，热启动小程序都会执行，mounted事件是只在冷启动小程序的时候才会去执行

2.小程序中删除或隐藏头部导航栏，实现全屏的方法：在app.json中的window中设置navigationstyle为custom---自定义

转载于:https://juejin.im/post/5ce75534f265da1b76387af8