微信小程序API交互的自定义封装

目录

• 1，起因
• 2，优化成果
• 3，实现思路
• 4，完整代码

1，起因

---

哪天，正在蚂蚁森林疯狂偷能量的我被boss叫过去，告知我司要做一个线上直播公开课功能的微信小程序，博主第一次写小程序，复习了下文档，看了看腾讯云直播sdk，开工了。

写着写着就发现不对劲了， 这里面wx.showToast，wx.showModal，这一类的调用太多了，每次都写一遍太特么麻烦了，就拿wx.showToast做例子，产品要求是duration为2000ms，默认值是1500ms，且有时候不需要icon图标，有时候又需要，所以每次都要如下调用

wx.showToast({
  title: '创建成功',
  icon: 'none',
  duration: 2000
})

不但麻烦，而且代码看着很糟糕，所以博主决定二次封装一下。

2，优化成果

---

经过博主封装后，代码如下

// wx.showToast优化前调用
wx.showToast({
  title: '创建成功',
  icon: 'none',
  duration: 2000
});

// wx.showToast优化后调用
FN.Toast("创建成功");

// wx.showModal优化前调用
wx.showModal({
  title: '温馨提示',
  content: '确认更换账号吗？',
  success (res) {
    if (res.confirm) {
      console.log('用户点击确定')
    } else if (res.cancel) {
      console.log('用户点击取消')
    }
  }
});

// wx.showModal优化后调用
FN.Confirm("确认更换账号吗？")
.then(res => {
   	console.log('用户点击确定')
 })
.catch(error => {
	console.log('用户点击取消')
});

3，实现思路

---

定义一个公共的public.js，在里面写上常用的方法，用一个常量承载，然后通过module.exports暴露出去，在需要的地方接收，而其中比如wx.showModal，wx.login，这些需要回调来处理的方法，使用了Promise实现了链式调用。

4，完整代码

---

文件名：public.js

const publicFn = {
  /**
  * Loading转圈圈
  * @param {nunber} mask - 不传默认不显示透明蒙层
  * @param {string} msg - 提示语 默认值：加载中
  */
  Loading (mask, msg){
    let Mask = mask ? true : false;
    let Msg = msg ? msg : "加载中"
    wx.showLoading({
      title: Msg,
      mask: Mask
    })
  },
  /**
  * Loading取消转圈圈
  */
  LoadingOff (){
    wx.hideLoading();
  },
  /**
  * Toast提示
  * @param {string} msg - 提示内容
  * @param {string} icon - icon图标 成功success 加载中loading 无样式none
  * @param {number} time - 提示存在时长
  */
  Toast (msg, icon, time){
    let Icon = icon === 1 ? "success" : "none";
    wx.showToast({
      title: msg,
      icon: Icon,
      duration: time || 2000
    })
  },
  /**
  * 带确认的提示框
  * @param {string} msg - 提示内容
  */
  Alert (msg){
    return new Promise((resolve, reject) => {
      wx.showModal({
        title: '温馨提示',
        content: msg,
        showCancel:false,
        confirmColor:"#007AFF",
        success (res) {
         // 此弹窗只有确认键，没有取消键，所以只写了resolve没有reject
          resolve(res);
        }
      })
    })
  },
  /**
  * 带确认和取消的提示框
  * @param {string} msg - 提示内容
  */
  Confirm (msg){
    return new Promise((resolve, reject) => {
      wx.showModal({
        title: '温馨提示',
        content: msg,
        cancelColor:"#000000",
        confirmColor:"#007AFF",
        success (res) {
          if (res.confirm) {
            resolve(res);
          }else if (res.cancel) {
            reject(res)
          }
        }
      })
    })
  },
  /**
  * 微信登陆 wx.login
  */
  wxLogin () {
    return new Promise((resolve, reject) => {
      wx.login({
        success (res) {
          if (res.code) {
            resolve(res.code)
          } else {
            reject(res.errMsg);
          }
        }
      })
    });
  }
}

module.exports = publicFn;

使用方法：在你需要调用的地方的js文件顶部引入

//路径根据自己项目文件位置改变
const FN = require('../publicFn/public');

调用语法参考目录2

---

如果看了觉得有帮助的，我是@鹏多多，欢迎 点赞 关注 评论；

END

往期文章

• 微信小程序实现上传多张本地图片到服务器和图片预览
• 简单的JS+CSS实现网页自定义换肤

个人主页

• CSDN
• GitHub
• 简书
• 博客园
• 掘金