微信小程序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 ...
随机推荐
- centos7 mysql 自动补全
1 yum -y install epel-release #配置erel源 2 yum -y install python-pip 3 pip install mycli #用pip安装 可能会出现 ...
- vue2实现路由懒加载
一.什么是懒加载 顾名思义,懒加载就是随用随加载,什么时候需要就什么时候加载. 二.为什么需要懒加载 在单页应用中,如果没有使用懒加载,webpack打包后的文件会很大,这时进入首页时的加载时间会很长 ...
- sqoop进行将Hive 词频统计的结果数据传输到Mysql中
使用sqoop进行将Hive 词频统计的结果数据传输到Mysql中. mysql准备接受数据的数据库与表 hive准备待传输的数据 sqoop进行数据传输 mysql查看传输结果 二:电子书 ...
- 八、TestNG忽略测试
一个TestNG 测试类中如果有的方法不想测试可以使用 enabled 属性 enabled = false 该方法不参与测试 enabled = true 该方法参与测试 @Test 不写en ...
- DG修改SYS用户密码(ORA-16810,ORA-01017)
修改主库PROD1密码后,查看configuration状态看到以下报错: [oracle@edgzrip1-PROD1 ~]$ dgmgrl sys/oracleDGMGRL for Linux: ...
- SpringBoot整合Swagger2详细教程
1. 简介 随着前后端分离开发模式越来越流行,编写接口文档变成了开发人员非常头疼的事.而Swagger是一个规范且完整的web框架,用于生成.描述.调用可视化的RESTful风格的在线接口文档,并 ...
- 带宽、延时、吞吐率、PPS 这些都是啥?
Linux 网络协议栈是根据 TCP/IP 模型来实现的,TCP/IP 模型由应用层.传输层.网络层和网络接口层,共四层组成,每一层都有各自的职责. 应用程序要发送数据包时,通常是通过 socket ...
- JDK下载与安装
Java有很多个版本,最新的版本会兼容之前的. 先附上下载地址:https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downlo ...
- Hibernate实现对数据的CRUD
今天主要去看公司的老框架, CRUD用的较多,所以总结一下步骤,以免忘记的时候温习 回顾 JDBC 工作过程: 加载驱动 建立连接 定义sql,发生sql语句 执行sql语句获得执行结果 处理返回结果 ...
- webform中ajax.ajaxMethod使用方法
前言 dll文件 如果还没有ajax.dll文件,就先下载一个来 引用 将ajax.dll添加到项目引用中:在VS的解决方案资源管理器中右键点击项目名称--"添加项目引用"--浏览 ...