前端小册

Appearance

On this page

微信小程序常见处理 ​

挂载函数 ​

在开发微信小程序时，需要封装一些公用的函数，但是又不想每个页面引用，我们可以利用小程序 Page 初始化时挂载到其 App 上

javascript
App({
  onLaunch: function () {
    this.expendPage();
  },
  expendPage() {
    const originalPage = Page;
    Page = function (config) {
      config.$config = apiConfig; // 页面直接引用 this.$config 访问接口参数
      config.$http = Http; // 页面直接引用 this.$http 请求接口
      if (!config.onShareAppMessage) {
        config.onShareAppMessage = function (res) {
          const page = getCurrentPages();
          return {
            title:"分享",
            path: "/" + page[page.length - 1].route,
          };
        };
      }
      return originalPage(config);
    };
  },
  // 提示框
  show: function (content, icon) {
    wx.showToast({
      title: content,
      icon: icon,
      duration: 2000,
    });

    setTimeout(function () {
      wx.hideToast();
    }, 2000);
  }
});

左右滑动 ​

tabs 常见的左右滑动效果，这个需要判断手势操作

javascript
// touch.js

const MIN_DISTANCE = 10;
const MIN_DEVIATION = 30;

function getDirection(x, y) {
    if (x > y && x > MIN_DISTANCE) {
        return 'horizontal';
    }
    if (y > x && y > MIN_DISTANCE) {
        return 'vertical';
    }
    return '';
}

/***
 * 判断用户滑动
 * 左滑还是右滑
 */
function getTouchData(endX, endY, startX, startY) {
    let turn = "";
    if (endX - startX > MIN_DEVIATION && Math.abs(endY - startY) < MIN_DEVIATION) {
        turn = "right";
    } else if (endX - startX < -MIN_DEVIATION && Math.abs(endY - startY) < MIN_DEVIATION) {
        turn = "left";
    }
    return turn;
}

const touch = {
    touchStart(e) {
        const touches = e.changedTouches[0];
        this.startX = touches.clientX;
        this.startY = touches.clientY;
    },

    touchMove(e) {
        const touch = e.changedTouches[0];
        const deltaX = touch.clientX - this.startX;
        const deltaY = touch.clientY - this.startY;
        const offsetX = Math.abs(deltaX);
        const offsetY = Math.abs(deltaY);
        this.direction = getDirection(offsetX, offsetY);
    },

    touchEnd(e) {
        const touch = e.changedTouches[0];
        let x = touch.clientX;
        let y = touch.clientY;
        const direction = getTouchData(x, y, this.startX, this.startY);
        
        if (this.direction === 'horizontal') {
            return direction;
        }

    }
}

module.exports = touch


page 页面绑定函数

html
<view
  class="live-content"
  bind:touchstart="touchStart"
  bind:touchmove="touchMove"
  bind:touchend="touchEnd"
  bind:touchcancel="touchEnd"
>
tabs 内容
</view>


需要在 page 页面引用 touch.js

javascript
Page({

  touchStart(e) {
    touch.touchStart(e);
  },

  touchMove(e) {
    touch.touchMove(e);
  },

  touchEnd(e) {
    const direction = touch.touchEnd(e);
    if (direction === "left") {
      console.log('left')
    } else if (direction === "right") {
      console.log('right')
    }
  },

})

拒绝授权 ​


小程序的一些功能需要先确认用户是否授权，才能操作；但是用户拒绝授权后，我们怎么再次调用授权操作了

这里已保存相册为例

javascript
Page({
  // 用户点击保存图片
  shareNoop() {
    const _this = this;
    wx.getSetting({
      success(res) {
        // 确认是否拥有保存图册权限
        if (!res.authSetting['scope.writePhotosAlbum']) {
          wx.authorize({
            scope: 'scope.writePhotosAlbum',
            success () {
              // 同意授权
              _this.saveShareImage();
            },
            fail() {
              // 授权失败则提示 因为官方调整有按钮才能调起 openSetting 这个方法
              wx.showModal({
                title: '提示',
                content: '若点击不授权，将无法使用保存图片功能',
                cancelText:'不授权',
                cancelColor:'#999',
                confirmText:'授权',
                confirmColor:'#f94218',
                success(res) {
                  if (res.confirm) {
                    wx.openSetting();                              
                  } else if (res.cancel) {
                    console.log('用户点击取消')
                  }
                }
              })
            }
          })
        } else {
          _this.saveShareImage();
        }
      }
    })
  },

  saveShareImage() {
    wx.saveImageToPhotosAlbum({
      filePath: this.data.posterDetail,
      success(res) {
        wx.showModal({
          title: '温馨提示',
          content: '图片成功保存至相册，赶快去分享吧~',
          showCancel: false,
          confirmText: '我知道了'
        })
      },
      fail() {
        wx.showToast({
          title: '图片保存失败！',
          icon: 'none'
        })
      }
    })
  }
})