uniapp中使用的一些常见的公共js方法

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方法的使用可以使我们的开发工作变得更加高效和便捷。