先安装
yarn add element-china-area-data
然后在 code 中
<el-cascader size="large" :options="options" v-model="selectedOptions" @change="handleChange">
import { regionData , CodeToText } from "element-china-area-data";
handleChange() {
var loc = "";
for (let i = 0; i < this.selectedOptions.length; i++) {
loc += CodeToText[this.selectedOptions[i]];
}
alert(loc);
}
在某些场景下，需要对区域进行首字母排序。不仅要提取出地区的首字母，并且还要对相同首字母的地区也进行排序。
首先，我们有这样的一些数据：
var cityData = [
[
{
"label":"北京市",
"value":1101
}
],
[
{
"label":"天津市",
"value":1201
}
],
[
{
"label":"石家庄",
"value":1301
},
{
"label":"唐山",
"value":1302
},
{
"label":"秦皇岛",
"value":1303
}
]
]
这是一个二维数组，可以先把它弄成一维数组。然后通过 pinyin.js 取出每个 label 的首字母，并且有相同首字母的数据放在同一个数组里。然后进行二次排序。这里在 pinyin.js 中新增加了一个 getFirstChar 方法。
/**
* 获取整个词汇的首字母
* @param {String} str 输入的中文字符串
*/
getFirstChar(str) {
if (typeof(str) != "string")
throw new Error(-1, "函数getCamelChars需要字符串类型参数!");
if (!str) {
throw new Error(-1, "不能是空字符串");
}
str = str.substr(0, 1);
return this._getChar(str);
}
计算如下。
import Pinyin from '../../../static/js/pinyin.js';
let pinyin = new Pinyin();
let temp = {};
let keys = [];
for(let item1 of city) {
for(let item2 of item1) {
if (item2.label == '直辖市') {
continue;
}
let fc = pinyin.getFirstChar(item2.label);
if (temp[fc]) {
temp[fc].push(item2);
} else {
keys.push(fc);
temp[fc] = [item2];
}
}
}
keys = keys.sort();
let list = [{
title: '热门',
letter: 'hot',
value: []
}]
function sortItem(item1, item2) {
return item1['label'].localeCompare(item2['label']);
}
for(let key of keys) {
list.push({
title: key,
letter: key,
value: temp[key].sort(sortItem)
});
}
在 uniapp 中，如果 view 定义了 display:flex ，那么 v-show 就无效了。也就是总是 true，总是会显示出来。
想要在小程序中使用区域聚合很不好搞啊。单纯的聚合，腾讯地图小程序就已经支持。可是区域聚合貌似只有高德有。
高德区划聚合
https://developer.amap.com/demo/amap-ui/demos/amap-ui-districtcluster/top-adcodes
https://developer.amap.com/api/amap-ui/reference-amap-ui/geo/district-cluster
微信聚合
https://developers.weixin.qq.com/miniprogram/dev/api/media/map/MapContext.initMarkerCluster.html
https://developers.weixin.qq.com/miniprogram/dev/component/map.html
高德难言
https://developer.amap.com/faq/other-interface/amap-applets/create-project/66485
既然不支持，又想搞怎么办呢。自己写算法，实现 market 的调整。这个时候，大家就要齐心。放大到一定比例展示省级别，再放大到一定比例显示市级别，再放到一定比列显示县级别，再放到一定比例显示镇级别。就以镇为最小单位，把每个镇里相关的数据放在一个数组里，镇的放在县里依次到省，全国。这样似乎就失去了腾讯地图聚合的初衷了。 地图有 initMarkerCluster 方法和 markerClusterCreate 时间，不用可惜啊。
随着苹果 8 以后的手机等出现，顶部，底部自适应问题是手机应用（app,web,小程序）要解决的问题。对于网页和小程序可以使用 env(safe-area-inset-bottom) 等解决。
env()和constant()，是IOS11新增特性，Webkit的css函数，用于设定安全区域与边界的距离，有4个预定义变量：
而env()和constant()函数有个必要的使用前提，H5网页设置viewport-fit=cover的时候才生效，小程序里的viewport-fit默认是cover。
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
适配底部代码：
height: calc(96rpx+ constant(safe-area-inset-bottom));//兼容 IOS<11.2
height: calc(96rpx + env(safe-area-inset-bottom));//兼容 IOS>11.2
padding-bottom: constant(safe-area-inset-bottom);//兼容 IOS<11.2
padding-bottom: env(safe-area-inset-bottom);//兼容 IOS>11.2
// 先constant再env
文章来源第二个有说到兼容性问题。
console.log(0.1+0.2);
# 输出 0.30000000000000004
对于 js 浮点数计算不正确问题，请参考下边：
app 通常会有启动页，引导页和闪屏这三个前奏页面。启动页必须有，不可跳过。引导页通常是第一次启动有和更新版本后有。闪屏可能有广告的嫌疑，用户可点击跳过，也可以等待倒计时跳过。
像 soul 就是强制有 启动页和闪屏。不过闪屏都是一些比较漂亮的图片。
启动页 splash
引导页 guid
闪屏 flash
launchFlag
vue cli 配置 dev 的 host 和端口号
# vue.config.js 中
module.exports = {
devServer: {
port: 80, // 端口号，如果端口号被占用，会自动加1
host: "sky.cn", //主机名， 127.0.0.1， 真机 0.0.0.0
https: false, //协议
open: true //启动服务时自动打开浏览器访问
},
可是当： npm run dev 的时候，端口号却是 1024。 话说 mac 下启动 1024 以下的端口需要 root 权限。用 sudo 试试。
sudo npm run dev
当然，仅仅上边是不可以的。我们要修改 host，映射一下。
# mac 下
sudo vim /etc/hosts
# 增加
127.0.0.1 sky.cn
# windows 下
win + r -> drivers -> cd etc -> vim hosts
# 增加
127.0.0.1 sky.cn
这样，service 结果
App running at:
- Local: http://sky.cn:80/
- Network: http://sky.cn:80/
Note that the development build is not optimized.
To create a production build, run npm run build.
这个配置硬写在 vue.config.js 中。这样不好看。我们写在环境配置中。在 .env.development 中，新增配置：
# 配置 service 的域名
VUE_APP_HOST = 'sky.cn'
# 配置 service 的端口号
VUE_APP_PORT = '80'
然后，在 vue.config.js 中这样修改：
const host = process.env.host || process.env.VUE_APP_HOST || '127.0.0.1'
const port = process.env.port || process.env.VUE_APP_PORT || process.env.npm_config_port || 80
module.exports = {
devServer: {
host: host, //主机名， 127.0.0.1， 真机 0.0.0.0
port: port, // 端口号，如果端口号被占用，会自动加1
https: false, //协议
open: true, //启动服务时自动打开浏览器访问
overlay: {
warnings: false,
errors: true
},
before: ''
},
…
环境变量一说可以参考这里：https://cli.vuejs.org/zh/guide/mode-and-env.html#%E6%A8%A1%E5%BC%8F
项目中，配置文件的作用是想当美丽的。这样使代码看起来好看，用起来还方便。不至于因为某个条件或场景还跑到逻辑里去修改。vue cli 里边就可以自己定义 .env.production .env.development .env
https://cli.vuejs.org/zh/guide/mode-and-env.html
有下边的概念：
如果不生效，配置不生效，可能是定义对象的时候没以 VUE_APP_ 开头
这里列举几个定义：
# just a flag
ENV = 'production'
# base api
VUE_APP_BASE_API = 'http://117.24.6.252:8002'
# mode
VUE_APP_MODE = 'history'