微信小程序API交互的自定义封装
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
往期文章
个人主页
微信小程序API交互的自定义封装的更多相关文章
- 微信小程序API交互反馈,wx.showToast显示消息提示框
导读:wx.showToast(OBJECT) 显示消息提示框. OBJECT参数说明: 参数 类型 必填 说明 最低版本 title String 是 提示的内容 icon String 否 图标, ...
- .Net Webapi SignalR与微信小程序的交互
.Net Webapi SignalR与微信小程序的交互 一.SignalR与Webapi 1.SignalR的安装: Signalr与跨域仅需要安装两个开源库 Microsoft.Owin.Cors ...
- 微信小程序api拦截器
微信小程序api拦截器 完美兼容原生小程序项目 完美兼用小程序api的原本调用方式,无痛迁移 小程序api全Promise化 和axios一样的请求方式 小程序api自定义拦截调用参数和返回结果 强大 ...
- 微信小程序request(ajax)接口请求封装
微信小程序request(ajax)接口请求封装 最近在进行小程序的编写,需要调用后端接口,经常要用到wx.request方法,所以就自己封装了一下,简化一下代码,如果能给大家提供帮助更好,在封装的时 ...
- 微信小程序 API
微信小程序 API https://developers.weixin.qq.com/miniprogram/dev/component/cover-view.html demo https://de ...
- 微信小程序入坑之自定义组件
前言 最近接触微信小程序,再次之前公司用的前端框架是vue ,然后对比发现,开发小程序是各种限制,对于开发者非常不友好.各种槽点太多,完全吐槽不过来,所以在此不多说,打算下次专门写一篇文章吐槽一下.本 ...
- 微信小程序省市区联动,自定义地区字典
最近在做一个项目的时候遇到了这么一个问题,就是省市区的联动呢,我们需要自定义字典来设置,那么微信小程序自带的省市区选择就不能用了,经过三根烟的催化,终于写出来了.下面献上代码示例. 首先是在utils ...
- 微信小程序 API 基础
其实还有一些组件,没有提,因为那些组件跟 API 的功能差不多,API 可能比他会更好一点: 具体可见官方文档 基础: 判断接口是否可用:wx.canIUse(a) a 代表:接口名字 返回值:布尔 ...
- 微信小程序(18)-- 自定义头部导航栏
最近做的项目涉及相应的页面显示相应的顶部标题,所以就需要自定义头部导航了. 首先新建一个顶部导航公用组件topnav,导航高度怎么计算? 1.wx.getSystemInfo 和 wx.getSyst ...
随机推荐
- 如何写好商用PPT,计算机行业PPT模板
如何写好商用PPT,这个问题如果从0开始写那确实需要花费一番功夫,今天我不是来教你如何做PPT,而是教你如何从一个小白如何快速能套用模板,从而做出一个自己行业相关的模板,比如计算机行业PPT模板,奶茶 ...
- 使用uniapp开发项目来的几点心得体会,供新手参考参考
先说一下提前须要会的技术 要想快速入手uniapp的话,你最好提前学会vue.微信小程序开发,因为它几乎就是这两个东西的结合体,不然,你就只有慢慢研究吧. 为什么要选择uniapp??? 开发多个平台 ...
- ⑥SpringCloud 实战:引入gateway组件,开启网关路由功能
这是SpringCloud实战系列中第4篇文章,了解前面第两篇文章更有助于更好理解本文内容: ①SpringCloud 实战:引入Eureka组件,完善服务治理 ②SpringCloud 实战:引入F ...
- CSS文本溢出效果&滚动条样式设置
一.文本溢出 1.overflow: hidden; 超出文本会被剪裁隐藏不可见 scroll;超出文本会被剪裁, 显示滚动条 auto; 如果文本超出会显示滚动条,没超出不会显示, overflo ...
- ssh远程服务器不通
1.关闭防火墙 service iptables status service iptables stop 2.在/etc/hosts文件添加远程服务器信息(连接的两端都添加) 服务器1(racdb1 ...
- (菜鸟都能看懂的)网络最大流最小割,Ford-Fulkerson及Dinic详解
关于网络流: 1.定义 个人理解网络流的意思便是由一条条水管以及一个源点S一个汇点T和一些节点组成的一张图,现在要从S点流水到T点,问怎么流才能让流到T的流量最大.边权表示的是这条水管的最大流量,假设 ...
- CSS—— div+css
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 用burp爆破tomcat的过程
首先burp抓包,将抓到的包放到intruder中 通过burp中自带的解码得知账号密码中有个":"号 所以我们选择的数据类型为Custom iterator 第二条输入" ...
- 一劳永逸,解决基于 keep-alive 的后台多级路由缓存问题
用过 vue-element-admin 的同学一定很清楚,路由的配置直接关系侧边栏导航菜单的展示,也得益于这种设计思路,几乎大部分后台框架都采用这个方案,当然也包括了我写的 Fantastic-ad ...
- Java学习_Java核心类
字符串和编码 字符串在String内部是通过一个char[]数组表示的,因此,可以按下面的写法: String s2 = new String(new char[] {'H', 'e', 'l', ' ...