# 内置方法
# Router 路由
使用 uni-app 默认的 uni.navigateTo 等路由跳转方法封装为 Router.js，项目中所有跳转均有router.js管理，方便登录权限判断等其他公共处理及后期维护，源码请查阅 /common/utils/router.js
- 用法如下
# 按钮导航
更多详细用法参考 handleJump 路由跳转
<view @tap="handleJump" data-url="要跳转的路径" :data-type="跳转方式"></view>
<!-- 保留当前页面跳转至目标页面 -->
<view @tap="handleJump" data-url="要跳转的路径"></view>
<!-- 关闭当前页面跳转至目标页面 -->
<view @tap="handleJump" data-url="要跳转的路径" data-type="REDIRECT"></view>
1
2
3
4
5
6
7
2
3
4
5
6
7
# 编程式导航
export default {
data(){
return { }
},
methods: {
handleGoToGoodsDetail(){
// 不携带参数跳转
this.$urouter.navigateTo('/xxx/xxx')
// 携带参数跳转
this.$urouter.navigateTo({
url: 'xxx',
params: {
id: 1
}
})
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# UploadImage 图片上传
封装统一图片上传类
import { UploadImage } from '@/common/utils/index';
export default {
data() {
return {
count: 3,
images: []
}
},
methods: {
// 上传图片
handleUploadImage(){
let self = this
// 从相册中选择图片
uni.chooseImage({
count: this.count - this.images.length, // 默认9
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
success: function(res) {
const tempFilePaths = res.tempFilePaths;
// 开始上传
new UploadImage(tempFilePaths, {
complete: function(res) {
// 上传成功 返回数据格式为数组 [ { id: '', path: '' } ]
self.images.push(...res);
}
})
}
});
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
# UploadFileToQINIU 上传文件至七牛云
封装图片及视频文件直传至七牛云，需要后台提供获取签名接口
- 后台提供签名接口返回数据建议
{
fileName: 'xxxxxxxxxxxx', // 文件名 建议生成唯一的uuid作为文件名 可以不需要后缀名
baseUrl: 'xxx', // 资源前缀路径 路径以/结尾
token: 'xxxxxxxxx', // 请参考七牛云web直传文档
}
1
2
3
4
5
2
3
4
5
- 上传案例
import { UploadFileToQINIU } from '@/common/utils/index';
export default {
data() {
return {
count: 3,
files: []
}
},
methods: {
// 上传图片
handleUploadImage(){
let self = this
// 从相册中选择图片
uni.chooseImage({
count: this.count - this.files.length, // 默认9
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
success: function(res) {
const tempFilePaths = res.tempFilePaths;
// 开始上传
new UploadFileToQINIU(tempFilePaths, {
complete: function(res) {
// 上传成功 返回数据格式为数组 [ { id: '', path: '' } ]
self.files.push(...res);
}
})
}
});
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
- 你可能需要修改的地方
- 七牛云上传域名
// 在upload-file-to-qiniu.js中默认配置的上传区域为华南地区 uni.uploadFile({ url: 'https://up-z2.qiniup.com', // 七牛云资源存储地区 默认华南地区 ... }); // 以下为常用上传地址，具体请查阅七牛云文档 // 华东 z0 http(s)//up.qiniup.com // 华北 z1 http(s)//up-z1.qiniup.com // 华南 z2 http(s)//up-z2.qiniup.com // 北美 na0 http(s)//up-na0.qiniup.com // 新加坡 as0 http(s)//up-as0.qiniu.com1
2
3
4
5
6
7
8
9
10
11
# UploadFileToOSS 上传文件至阿里OSS
封装图片及视频文件直传至七牛云，需要后台提供获取签名接口
- 后台提供签名接口返回数据建议
// 具体参数代表含义请查阅阿里云OSS直传文档
{
host: 'xxxxxxxxxxxx', // 上传路径
key: ossData.key, // 文件名
policy: ossData.policy, // 后台获取超时时间
OSSAccessKeyId: ossData.OSSAccessKeyId, // 后台获取临时ID
success_action_status: ossData.success_action_status, // 让服务端返回200,不然，默认会返回204
signature: ossData.signature // 后台获取签名
}
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
- 上传案例
import { UploadFileToOSS } from '@/common/utils/index';
export default {
data() {
return {
count: 3,
files: []
}
},
methods: {
// 上传图片
handleUploadImage(){
let self = this
// 从相册中选择图片
uni.chooseImage({
count: this.count - this.files.length, // 默认9
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
success: function(res) {
const tempFilePaths = res.tempFilePaths;
// 开始上传
new UploadFileToOSS(tempFilePaths, {
complete: function(res) {
// 上传成功 返回数据格式为数组 [ { id: '', path: '' } ]
self.files.push(...res);
}
})
}
});
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
# message 消息提示
使用 uni-app 默认的 uni.showToast 封装为 message.js，项目中所有提示均有message.js管理，方便后期维护，源码请查阅 /common/utils/message.js
- 用法如下
export default {
data(){
return { }
},
onLoad(){
this.$message.info('弹出普通提示')
this.$message.success('弹出成功提示')
this.$message.error('弹出错误提示')
// 如果需要修改提示停留时长
this.$message.info({
content: '提示内容',
duration: 30000 // 单位毫秒 默认为1500毫秒
})
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# dayjs 日期格式转换
引入 dayjs 方便处理项目中日期转换，更多用法请移步 dayjs
- 用法如下
import { Dayjs } from '@/common/utils/index'
export default {
data(){
return { }
},
onLoad(){
Dayjs(new Date()).format('YYYY-MM-DD hh:mm:ss')
}
}
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
# Validate 验证
抽离项目开发中常用的正则验证进行统一管理，按照约定，项目中需要用到的正则统一放入validate.js来统一维护
# require 必传项
import { validate } from '@/common/utils/index.js'
let userName = ''
if(!validate(userName ,'require')) {
// 如果不存在用户名时做点什么
}
1
2
3
4
5
2
3
4
5
# phone 手机号
import { validate } from '@/common/utils/index.js'
let phone = ''
if(!validate(phone ,'phone')) {
// 如果手机号格式不正确时做点什么
}
1
2
3
4
5
2
3
4
5
# captcha 验证码
import { validate } from '@/common/utils/index.js'
let captcha = ''
if(!validate(captcha ,'captcha')) {
// 如果验证码格式不正确时做点什么
}
1
2
3
4
5
2
3
4
5
# idcard 身份证号
import { validate } from '@/common/utils/index.js'
let idcard = ''
if(!validate(idcard ,'idcard')) {
// 如果身份证号格式不正确时做点什么
}
1
2
3
4
5
2
3
4
5
# password 密码验证
import { validate } from '@/common/utils/index.js'
let password = ''
if(!validate(password ,'password')) {
// 如果密码格式不正确时做点什么
}
1
2
3
4
5
2
3
4
5
# ismoney 金额
import { validate } from '@/common/utils/index.js'
let money = 0.01
if(!validate(money ,'ismoney')) {
// 如果金额格式不正确时做点什么
}
1
2
3
4
5
2
3
4
5
# email 邮箱
import { validate } from '@/common/utils/index.js'
let email = ''
if(!validate(email ,'email')) {
// 如果邮箱格式不正确时做点什么
}
1
2
3
4
5
2
3
4
5
# url 链接
import { validate } from '@/common/utils/index.js'
let url = ''
if(!validate(url ,'url')) {
// 如果url不是个链接时做点什么
}
1
2
3
4
5
2
3
4
5
# card 银行卡
import { validate } from '@/common/utils/index.js'
let card = ''
if(!validate(card ,'card')) {
// 如果银行卡格式不正确时做点什么
}
1
2
3
4
5
2
3
4
5