函数封装,一节省编写代码的时间,二不容易出现错误,三节省代码,简洁,便于后期维护。
希望对于新手的你能够有帮助!一起加油啊!
1.wx.navigateTo()
保留当前页面,跳转到应用内的某个页面。但是不能跳到 tabbar 页面。
可封装函数为:
//跳转新页面页面,保留当前页面。
function navigateTo(url) {
wx.navigateTo({
url: url
})
}
2.wx.redirectTo()
关闭当前页面,跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。
可封装函数为:
//跳转新页面页面,关闭当前页面。
function redirectTo(url) {
wx.redirectTo({
url: url
})
}
3.wx.switchTab()
跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面
可封装函数为:
//关闭其他所有非 tabBar 页面,跳转到 tabBar 页面
function reLaunch(url) { //url必须为tabbar页面的路径,否则没有效果
wx.switchTab({
url: url
})
}
4.wx.navigateBack()
关闭当前页面,返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈,决定需要返回几层。
可封装函数为:
//返回页面
function navigateBack(delta) { //注意:此处的delta为number(数字)
wx.navigateBack({
delta: delta
})
}
另接getCurrentPages的函数封装方法
//获取当前页url
function getCurrentPageUrl() {
var pages = getCurrentPages() //获取加载的页面
var currentPage = pages[pages.length - 1] //获取当前页面的对象
var url = currentPage.route //当前页面url
return url
}
5.wx.reLaunch()
关闭所有页面,打开到应用内的某个页面
可封装函数为:
//关闭所有页面,打开到应用某个页面
function reLaunch(url) {
wx.reLaunch({
url: url
})
}
6.wx.request()
发起 HTTPS 网络请求。
可封装函数为:
function ajaxRequest(meth, url, data) {
//添加通过用的参数,如api_key api_token,待完善
var promise = new Promise((resolve, reject) => {
//init
var that = this;
//增加公共参数
data.api_key = api_key;
data.api_token = api_token;
var postData = data;
/*
//自动添加签名字段到postData,makeSign(obj)是一个自定义的生成签名字符串的函数
postData.signature = that.makeSign(postData);
*/
// 网络请求
wx.request({
url: url,
data: postData,
method: meth,
header: {
'content-type': 'application/x-www-form-urlencoded'
},
success: function (res) { //服务器返回数据
if (res.statusCode != 200) {
form.errorMsg('请求出错statusCode' + res.statusCode)
wx.hideLoading();
} else if (res.data.err_code != 0) { //返回失败,显示错误提示
form.errorMsg(res.data.err_msg)
wx.hideLoading();
} else { //返回成功
resolve(res.data.data);
wx.hideLoading();
}
},
error: function (e) {
form.errorMsg('网络出错')
if (reject) reject(e);
wx.hideLoading();
}
})
});
return promise;
}
//调用如下,仅供参考:
//发起post请求,使用方式如下:
// ajaxPost('http://接口网址', data).then((res) => {
// console.log(res);//成功处理
// wx.hideLoading();
// }).catch((errMsg) => {
// console.log(errMsg);//错误处理
// wx.hideLoading();
// });
//封装post请求
function ajaxPost(url, data) {
return ajaxRequest('POST', url, data)
}
//封装get请求
function ajaxGet(url, data) {
return ajaxRequest('GET', url, data)
}
7.wx.showLoading()
显示 loading 提示框。需主动调用 wx.hideLoading 才能关闭提示框
可封装函数为:
//加载等待提示,title提示,mask是否透明层bool
function showLoading(title, mask) {
wx.showLoading({
title: title,
mask: mask
})
}
7.1隐藏loading提示框
可封装函数为:
function hideLoading() {
wx.hideLoading()
}
8.wx.showToast()
显示消息提示框
可封装函数为:
//加载模态框,title 提示的内容, icon 图标(success,loading,none), duration 提示的延迟时间 mask是否显示透明层, image 自定义图标的本地路径,image 的优先级高于 icon
function showToast(title, icon, duration){
wx.showToast({
title: title,
icon: icon,
image: image,
duration: duration,
mask: mask
})
}
8.1隐藏消息提示框
可封装函数为:
function showToast() {
wx.showToast()
}
9. wx.pageScrollTo()
将页面滚动到目标位置
可封装函数为:
//滚动页面到某一个位置 scrollTop 滚动到页面的目标位置,单位 px,duration 滚动动画的时长,单位 ms
function pageScrollTo(scrollTop, duration){
wx.pageScrollTo({
scrollTop: scrollTop,
duration: duration
})
}
10.wx.showModal()
显示模态对话框(俗称模态框)
可封装函数为:
//title 提示的标题,content 提示的内容,showCancel 是否显示取消按钮,cancelText 取消按钮的文字,最多 4 个字符,confirmText 确认按钮的文字,最多 4 个字符
function showModal(title, content, showCancel, cancelText, confirmText){
wx.showModal({
title: title,
content: content,
showCancel: showCancel, //可设置可不设置
cancelText: cancelText, //可设置可不设置
confirmText: confirmText, //可设置可不设置
})
}
11.wx.previewImage()
全屏预览图片。预览的过程中用户可以进行保存图片、发送给朋友等操作。
//current(string) 当前显示图片的http链接,urls(array) 需要预览的图片http链接列表
function previewImage(current, urls){
wx.previewImage({
current: current,
urls: urls
})
}
另加两个不常用的跳转到其他小程序和返回到之前的小程序的方法
12.wx.navigateToMiniProgram()
打开另一个小程序
可封装函数为:
//appId 要打开的小程序appId, path 打开的页面路径,如果为空则打开首页(path 中 ? 后面的数据可以再小程序的 App.onLaunch、App.onShow 和 Page.onLoad 的回调函数当中获取到), extraData(object) 需要传递给目标小程序的数据(目标小程序可在 App.onLaunch,App.onShow 中获取到传过来的数据), envVersion 要打开的小程序版本。仅在当前小程序为开发版或体验版时此参数有效。如果当前小程序是正式版,则打开的小程序必定是正式版。
function navigateToMiniProgram(appId, path, extraData, envVersion){
wx.navigateToMiniProgram({
appId: appId,
path: path,
extraData: extraData,
envVersion: envVersion
})
}
13.wx.navigateBackMiniProgram()
返回到上一个小程序。只有在当前小程序是被其他小程序打开时可以调用成功
注意:微信客户端 iOS 6.5.9,Android 6.5.10 及以上版本支持
可封装函数为:
//extraData(object) 需要返回给上一个小程序的数据,上一个小程序可在 App.onShow 中获取到这份数据。
function navigateBackMiniProgram(extraData){
wx.navigateBackMiniProgram({
extraData: extraData,
})
}
14.手机号验证封装
可封装的函数为:
//验证手机号
function checkPhone(phone) {
var reg = /^1[34578]\d{9}$/;
if (reg.test(phone)) {
return true
} else {
return false
}
}
15.邮箱验证封装
可封装的函数为:
//验证邮箱
function checkMail(mail) {
var reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/;
if (reg.test(mail)) {
return true
} else {
return false
}
}
16.随机数封装
可封装的函数为:
//产生随机数函数
function RandNum(n) {
var rnd = "";
for (var i = 0; i < n; i++)
rnd += Math.floor(Math.random() * 10);
return rnd;
}
17.转义特殊字符
可封装的函数为:
//转义特殊字符
function replaceSpecialChar(url) {
url = url.replace(/"/g, '"');
url = url.replace(/&/g, '&');
url = url.replace(/</g, '<');
url = url.replace(/>/g, '>');
url = url.replace(/ /g, ' ');
console.log("转义字符", url);
return url;
}
以上可整合为一下redirect.js里,具体如下:五例为准其他的按照这五例可以比飘画葫芦(懒得加了,嘿嘿嘿!)
//跳转新页面页面,保留当前页面。
function navigateTo(url) {
wx.navigateTo({
url: url
})
}
//返回页面
function navigateBack(delta) {
wx.navigateBack({
delta: delta
})
}
//跳转新页面页面,关闭当前页面。
function redirectTo(url) {
wx.redirectTo({
url: url
})
}
//关闭所有页面,打开到应用某个页面
function reLaunch(url) {
wx.reLaunch({
url: url
})
}
//获取当前页url
function getCurrentPageUrl() {
var pages = getCurrentPages() //获取加载的页面
var currentPage = pages[pages.length - 1] //获取当前页面的对象
var url = currentPage.route //当前页面url
return url
}
module.exports = { //抛出封装好的函数方法,以便在其他需要的页面进行引入调用。
navigateTo: navigateTo,
navigateBack: navigateBack,
redirectTo: redirectTo,
reLaunch: reLaunch,
getCurrentPageUrl: getCurrentPageUrl,
}