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

哪天,正在蚂蚁森林疯狂偷能量的我被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');

USB Microphone https://www.soft-voice.com/

Wooden Speakers  https://www.zeshuiplatform.com/

亚马逊测评 www.yisuping.cn

深圳网站建设www.sz886.com

你可能感兴趣的:(微信小程序API交互的自定义封装)