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
filterMoney(value) {
var count = 0;
var baseList = ["元", "万元", "亿元", "万亿元"];
function filter(value) {
let moneyLen = String(Math.abs(Number(value))).split(".")[0].length;
let money = Number(value);

if (moneyLen < 5) {
return { num: money, base: 1, unit: baseList[count] };
} else {
count++;
var num = (money / 10000).toFixed(2);
if (num >= 10000) {
return filter(num);
} else {
return {
num: num,
base: Math.pow(10, 4 * count),
unit: baseList[count]
};
}
}
}
return filter(value);
}

图示

组件使用

1
2
3
4
5
6
7
<el-form ref="form" :model="conditionForm" label-width="80px">
<condition-date-quarter
popper-class="condition-picker"
v-model="conditionForm.analysisDate"
placeholder="选择日期季度"
></condition-date-quarter>
</el-form>
1
2
3
4
5
6
7
8
9
10
11
12
import ConditionDateQuarter from "@/components/ConditionForm/ConditionDateQuarter";

export default {
data() {
return {
conditionForm: {
analysisDate: ""
}
};
},
components: { ConditionDateQuarter }
};
阅读全文 »

图示

组件使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<el-form ref="form" :model="conditionForm" label-width="80px">
<condition-select
:max="5"
type="text"
autocomplete="on"
:disabled="loading"
v-model="conditionForm.type"
placeholder="请选择***类型"
@selectSure="selectSure"
>
<condition-option
v-for="item in list"
:key="item.id"
:label="item.value"
:value="item.id"
></condition-option>
</condition-select>
</el-form>
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
import ConditionSelect from "@/components/ConditionForm/ConditionSelect";
import ConditionOption from "@/components/ConditionForm/ConditionOption";

export default {
data() {
return {
list: [
{ id: 1, value: "a" },
{ id: 2, value: "b" },
{ id: 3, value: "c" },
{ id: 4, value: "d" },
{ id: 5, value: "e" },
{ id: 6, value: "f" },
{ id: 7, value: "g" }
],
loading: false,
conditionForm: {
type: []
}
};
},
components: {
ConditionSelect,
ConditionOption
},
methods: {
selectSure() {}
}
};
阅读全文 »

图示

组件使用

1
2
3
4
5
6
7
8
<el-form ref="form" :model="conditionForm" label-width="80px">
<condition-date-week
popper-class="condition-picker"
:picker-options="pickerOptions"
v-model="conditionForm.analysisDate"
placeholder="选择日期星期"
></condition-date-week>
</el-form>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import ConditionDateWeek from "@/components/ConditionForm/ConditionDateWeek";

export default {
data() {
return {
conditionForm: {
analysisDate: ""
},
pickerOptions: {
disabledDate(date) {
return date > new Date() || date < new Date("1999-12-31");
}
}
};
},
components: { ConditionDateWeek }
};
阅读全文 »

什么是 Cordova

  • 一个移动应用开发框架
  • 本质是在 html,css,js 外面包装个原生的壳
  • 出自于 Adobe 11 年收购的 PhoneGap,是驱动 PhoneGap 的核心引擎
  • 是 apache 的顶级开源项目

Cordova 提供了一系列设备相关的 API, 通过这组 API,移动应用能够以 JavaScript 访问原生的设备功能, 如摄像麦克风等。

常见的移动端开发的三大分类

  1. 原生 App
  2. web App
  3. 混合 App (Hybrid App)
阅读全文 »

缩小文件的搜索范围

优化 Loader 配置

由于 Loader 对文件的转换操作很耗时,所以需要让尽可能少的文件被 Loader 处理。我们可以通过以下 3 方面优化 Loader 配置:

  • 优化正则匹配
  • 通过 cacheDirectory 选项开启缓存
  • 通过 include、exclude 来减少被处理的文件。实践如下:

项目原配置:

阅读全文 »

用字符串的方法来取代深度监听 deep:true,深度监听底层一个一个得遍历,很浪费性能

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
34
35
<template>
<div>
<input type="text" v-model="value" />
<p>{{ pValue }}</p>
<input type="text" v-model="userName.name" />
</div>
</template>

<script>
export default {
data() {
return {
value: "111111111",
pValue: "12",
userName: {
name: "Mir.Wang"
}
};
},
watch: {
value(a, b) {
//监听input值,发生变化就会触发
this.pValue = a;
},
pValue(a, b) {
//监听p标签得值,当input值发生变化时,设置了p标签的值,该函数就会触发
//console.log(a,b)
},
"userName.name"(a, b) {
// 用字符串的方法来取代深度监听deep:true,//深度监听底层一个一个得遍历,很浪费性能
console.log(a, b);
}
}
};
</script>

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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
import 'package:flutter/material.dart';
import 'package:dio/dio.dart';

class HttpDio extends StatefulWidget {
HttpDio({Key key}) : super(key: key);

@override
_HttpDioState createState() => _HttpDioState();
}

class _HttpDioState extends State<HttpDio> {
Dio _dio = new Dio();
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: new AppBar(
title: Text('http请求--HttpClient'),
),
body: Container(
alignment: Alignment.center,
child: FutureBuilder(
future: _dio.get("https://api.github.com/orgs/flutterchina/repos"),
builder: (BuildContext context, AsyncSnapshot snapshot) {
//请求完成
if (snapshot.connectionState == ConnectionState.done) {
Response response = snapshot.data;
//发生错误
if (snapshot.hasError) {
return Text(snapshot.error.toString());
}
//请求成功,通过项目信息构建用于显示项目名称的ListView
return ListView(
children: response.data
.map<Widget>((e) => ListTile(title: Text(e["full_name"])))
.toList(),
);
}
//请求未完成时弹出loading
return CircularProgressIndicator();
},
),
),
),
);
}
}

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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
class BaseUrl {
// 配置默认请求地址
static const String url = 'http://127.0.0.1';
}

class HttpUtil {
static void get(String url,
{Map<String, dynamic> data,
Map<String, dynamic> headers,
Function success,
Function error}) async {
// 数据拼接
if (data != null && data.isNotEmpty) {
StringBuffer options = new StringBuffer('?');
data.forEach((key, value) {
options.write('$key=$value&');
});
String optionsStr = options.toString();
optionsStr = optionsStr.substring(0, optionsStr.length - 1);
url += optionsStr;
}

// 发送get请求
await _sendRequest(url, 'get', success, headers: headers, error: error);
}

static void post(String url,
{Map<String, dynamic> data,
Map<String, dynamic> headers,
Function success,
Function error}) async {
// 发送post请求
_sendRequest(url, 'post', success,
data: data, headers: headers, error: error);
}

// 请求处理
static Future _sendRequest(String url, String method, Function success,
{Map<String, dynamic> data,
Map<String, dynamic> headers,
Function error}) async {
int _code;
String _msg;
var _backData;

// 检测请求地址是否是完整地址
if (!url.startsWith('http')) {
url = BaseUrl.url + url;
}

try {
Map<String, dynamic> dataMap = data == null ? new Map() : data;
Map<String, dynamic> headersMap = headers == null ? new Map() : headers;

// 配置dio请求信息
Response response;
Dio dio = new Dio();
dio.options.connectTimeout = 10000; // 服务器链接超时,毫秒
dio.options.receiveTimeout = 3000; // 响应流上前后两次接受到数据的间隔,毫秒
dio.options.headers
.addAll(headersMap); // 添加headers,如需设置统一的headers信息也可在此添加

if (method == 'get') {
response = await dio.get(url);
} else {
response = await dio.post(url, data: dataMap);
}

if (response.statusCode != 200) {
_msg = '网络请求错误,状态码:' + response.statusCode.toString();
_handError(error, _msg);
return;
}

// 返回结果处理
Map<String, dynamic> resCallbackMap = response.data;
_code = resCallbackMap['code'];
_msg = resCallbackMap['msg'];
_backData = resCallbackMap['data'];

if (success != null) {
if (_code == 0) {
success(_backData);
} else {
String errorMsg = _code.toString() + ':' + _msg;
_handError(error, errorMsg);
}
}
} catch (exception) {
_handError(error, '数据请求错误:' + exception.toString());
}
}

// 返回错误信息
static Future _handError(Function errorCallback, String errorMsg) {
if (errorCallback != null) {
errorCallback(errorMsg);
}
return null;
}
}

1
2
3
4
5
6
7
8
9
10
import 'package:flutter/material.dart';
import 'package:flutter_sea/pages/home.dart';
import 'package:flutter_sea/pages/mine.dart';

Map<String, WidgetBuilder> routes() {
return {
"home": (context) => Home(),
"mine": (context) => Mine(),
};
}

调用:

1
Navigator.pushNamed(context, widget._buttonRoute);