1. uniapp介绍
uniapp是一款使用vue语法开发跨平台应用的框架,可以同时开发出H5、小程序和App三个平台的应用。由于uniapp的一次开发可以同时适配多个平台,大大节约了开发者的时间和成本。而在uniapp中,开发者常常需要使用一些公共的js方法。
2. uniapp公共js方法
2.1 获取url中参数:
在uniapp中,我们经常需要获取url中传递的参数。下面是获取url中参数的代码:
/**
* 获取url中的参数
*/
function getQueryString(name) {
let reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i')
let r = window.location.search.substr(1).match(reg)
if (r != null) {
return decodeURIComponent(r[2])
}
return ''
}
代码说明:
1. 正则表达式:由于url可能存在多个参数,我们使用正则表达式,来匹配名字为name的参数。
2. window.location.search:获取url中?号后面的参数。
3. decodeURIComponent:对于可能存在URL编码的参数,我们需要使用decodeURIComponent方法进行解码。
2.2 手机号码格式化
在uniapp的开发中,我们通常需要对输入的手机号进行格式化显示。下面是一个实现手机号格式化的方法:
/**
* 手机号码格式化
*/
function formatMobile(mobile) {
if (mobile) {
return mobile.replace(/(\d{3})(\d{4})(\d{4})/, '$1****$3')
} else {
return ''
}
}
代码说明:
1. replace方法:我们使用手机号的正则表达式,将手机号的4-7位替换为*号。
2.3 金额格式化
在uniapp中,我们通常需要对金额进行格式化显示。下面是一个实现金额格式化的方法:
/**
* 金额格式化
*/
function formatMoney(money) {
if (money) {
return '¥' + parseFloat(money).toFixed(2)
} else {
return ''
}
}
代码说明:
1. toFixed方法:使用toFixed方法将金额保留2位小数。
2.4 时间格式化
在uniapp中,我们通常需要对时间进行格式化显示。下面是一个实现时间格式化的方法:
/**
* 时间格式化
*/
function formatDate(time) {
if (time) {
let date = new Date(time)
let year = date.getFullYear()
let month = (date.getMonth() + 1).toString().padStart(2, '0')
let day = date.getDate().toString().padStart(2, '0')
let hour = date.getHours().toString().padStart(2, '0')
let minute = date.getMinutes().toString().padStart(2, '0')
let second = date.getSeconds().toString().padStart(2, '0')
return year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second
} else {
return ''
}
}
代码说明:
1. padStart方法:使用padStart方法,将时间中的月、日、时、分、秒补齐到2位,例如:9月->09月 9日->09日 1时->01时。
2.5 上传图片到云服务器
在uniapp中,我们通常需要将用户上传的图片存储到云服务器中。下面是一个实现上传图片到云服务器的方法:
/**
* 上传图片到云服务器
*/
function uploadImage(fileUrl, cloudPath) {
return new Promise((resolve, reject) => {
uniCloud.uploadFile({
cloudPath,
filePath: fileUrl,
success: (res) => {
resolve(res.fileID)
},
fail: (err) => {
reject(err)
}
})
})
}
代码说明:
1. uniCloud:uniCloud是uniapp框架为开发者提供的云服务平台,其提供了uploadFile方法用于上传文件。
2. Promise:使用Promise将异步上传操作封装成同步函数。
3. 总结
uniapp是一个非常方便、易用、高效的跨平台应用开发框架。在uniapp的开发中,我们通常需要使用一些公共的js方法,如获取url中的参数、格式化手机号、金额和时间以及上传图片到云服务器等。这些js方法的使用可以使我们的开发工作变得更加高效和便捷。