1,起因


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

写着写着就发现不对劲了, 这里面wx.showToastwx.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.showModalwx.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

往期文章

个人主页

微信小程序API交互的自定义封装的更多相关文章

  1. 微信小程序API交互反馈,wx.showToast显示消息提示框

    导读:wx.showToast(OBJECT) 显示消息提示框. OBJECT参数说明: 参数 类型 必填 说明 最低版本 title String 是 提示的内容 icon String 否 图标, ...

  2. .Net Webapi SignalR与微信小程序的交互

    .Net Webapi SignalR与微信小程序的交互 一.SignalR与Webapi 1.SignalR的安装: Signalr与跨域仅需要安装两个开源库 Microsoft.Owin.Cors ...

  3. 微信小程序api拦截器

    微信小程序api拦截器 完美兼容原生小程序项目 完美兼用小程序api的原本调用方式,无痛迁移 小程序api全Promise化 和axios一样的请求方式 小程序api自定义拦截调用参数和返回结果 强大 ...

  4. 微信小程序request(ajax)接口请求封装

    微信小程序request(ajax)接口请求封装 最近在进行小程序的编写,需要调用后端接口,经常要用到wx.request方法,所以就自己封装了一下,简化一下代码,如果能给大家提供帮助更好,在封装的时 ...

  5. 微信小程序 API

    微信小程序 API https://developers.weixin.qq.com/miniprogram/dev/component/cover-view.html demo https://de ...

  6. 微信小程序入坑之自定义组件

    前言 最近接触微信小程序,再次之前公司用的前端框架是vue ,然后对比发现,开发小程序是各种限制,对于开发者非常不友好.各种槽点太多,完全吐槽不过来,所以在此不多说,打算下次专门写一篇文章吐槽一下.本 ...

  7. 微信小程序省市区联动,自定义地区字典

    最近在做一个项目的时候遇到了这么一个问题,就是省市区的联动呢,我们需要自定义字典来设置,那么微信小程序自带的省市区选择就不能用了,经过三根烟的催化,终于写出来了.下面献上代码示例. 首先是在utils ...

  8. 微信小程序 API 基础

    其实还有一些组件,没有提,因为那些组件跟 API 的功能差不多,API 可能比他会更好一点: 具体可见官方文档 基础: 判断接口是否可用:wx.canIUse(a) a 代表:接口名字 返回值:布尔 ...

  9. 微信小程序(18)-- 自定义头部导航栏

    最近做的项目涉及相应的页面显示相应的顶部标题,所以就需要自定义头部导航了. 首先新建一个顶部导航公用组件topnav,导航高度怎么计算? 1.wx.getSystemInfo 和 wx.getSyst ...

随机推荐

  1. 如何写好商用PPT,计算机行业PPT模板

    如何写好商用PPT,这个问题如果从0开始写那确实需要花费一番功夫,今天我不是来教你如何做PPT,而是教你如何从一个小白如何快速能套用模板,从而做出一个自己行业相关的模板,比如计算机行业PPT模板,奶茶 ...

  2. 使用uniapp开发项目来的几点心得体会,供新手参考参考

    先说一下提前须要会的技术 要想快速入手uniapp的话,你最好提前学会vue.微信小程序开发,因为它几乎就是这两个东西的结合体,不然,你就只有慢慢研究吧. 为什么要选择uniapp??? 开发多个平台 ...

  3. ⑥SpringCloud 实战:引入gateway组件,开启网关路由功能

    这是SpringCloud实战系列中第4篇文章,了解前面第两篇文章更有助于更好理解本文内容: ①SpringCloud 实战:引入Eureka组件,完善服务治理 ②SpringCloud 实战:引入F ...

  4. CSS文本溢出效果&滚动条样式设置

    一.文本溢出 1.overflow: hidden;  超出文本会被剪裁隐藏不可见 scroll;超出文本会被剪裁, 显示滚动条 auto; 如果文本超出会显示滚动条,没超出不会显示, overflo ...

  5. ssh远程服务器不通

    1.关闭防火墙 service iptables status service iptables stop 2.在/etc/hosts文件添加远程服务器信息(连接的两端都添加) 服务器1(racdb1 ...

  6. (菜鸟都能看懂的)网络最大流最小割,Ford-Fulkerson及Dinic详解

    关于网络流: 1.定义 个人理解网络流的意思便是由一条条水管以及一个源点S一个汇点T和一些节点组成的一张图,现在要从S点流水到T点,问怎么流才能让流到T的流量最大.边权表示的是这条水管的最大流量,假设 ...

  7. CSS—— div+css

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  8. 用burp爆破tomcat的过程

    首先burp抓包,将抓到的包放到intruder中 通过burp中自带的解码得知账号密码中有个":"号 所以我们选择的数据类型为Custom iterator 第二条输入" ...

  9. 一劳永逸,解决基于 keep-alive 的后台多级路由缓存问题

    用过 vue-element-admin 的同学一定很清楚,路由的配置直接关系侧边栏导航菜单的展示,也得益于这种设计思路,几乎大部分后台框架都采用这个方案,当然也包括了我写的 Fantastic-ad ...

  10. Java学习_Java核心类

    字符串和编码 字符串在String内部是通过一个char[]数组表示的,因此,可以按下面的写法: String s2 = new String(new char[] {'H', 'e', 'l', ' ...