微信小程序API交互的自定义封装
source link: http://www.cnblogs.com/-pdd/p/14289071.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
目录
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
往期文章
个人主页
Recommend
-
44
iu 背景 由于项目原因，经常需要封装自定义弹窗。 最开始我封装自定义弹窗的思路是在[UIApplication sharedApplic...
-
54
背景 在做快狗打车小程序时，关于默认导航栏，我们遇到了以下的问题： Android、IOS手机对于页面title的展示不一致，安卓title的显示不居中 页面的title只支持纯文本级别的样式控制，不能够做更丰富的title效果 左上角的事件无法监听、定制
-
38
自定义转场这个技术相信大家都用过或者听说过，不过如果你经常使用自定义转场或者自定义转场动画做得比较复杂或许会发现AnimatedTransitioning与目标控制器的交互并没有那么友好。本文旨在提供一个新思路，减少AnimatedTransitioning与目...
-
22
本文为作者行舟客投稿， 原文地址： https://yunxiaomeng.blog.csdn.net/article/deta...
-
7
微信小程序：自定义滚动弹窗 微信小程序虽然有三种自带的弹窗，但是毕竟功能有限，有时候难以满足我们的需求，所以我们可以自己尝试制作自定义弹窗，话不多说，直接上图：
-
4
golang封装的微信小程序服务端SDK漂洋过海来看你IT俱乐部-码出人生golang封装的微信小程序服务端SDK置顶Apr 23, 2021
-
10
微信官方文档对自定义 tabBar 的阐述较为潦草，在开发自定义 tabBar 过程中我踩了很多坑，因此在此处做...
-
12
【开源】这可能是封装微信 API 最全的 .NET SDK 了 今年公司某个项目需要全面接入微信支...
-
9
想了解更多内容，请访问：
-
8
作者：凌小凤 鸿蒙已经提供了全局UI方法自定义弹窗，本文是基于基础的自定义弹窗来实现提示消息弹窗、确认弹窗、输入弹窗的UI组件封装。 一、消息确认弹窗 首先看下效果：
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK