Commit 3cf20708df1cf817e86583cfadaf59588dfa764e

Authored by 徐烜
1 parent 7317eda6

电子站牌项目(修改front-end/h5下的文件,适配 android 5.0 的内置游览器兼容性)

1、修改.browserslistrc文件,添加适配项目
2、修改babel.config.js,添加polyfills(es6.promise,es6.symbol),注对应的core-js是2.6.5版本(对应的polyfills列表在对应的github项目上)
3、修改package.json,添加babel-polyfill,es6-promise,url-search-params-polyfill依赖
4、修改bsth-line-chart.js,低版本游览器的svg某些属性不支持写在css中,需要直接定义成属性,如circle,rect的width,height属性,具体看修正后的注释
5、修改engine-entry.js,手动导入import url-search-params-polyfill,之后core-js升级后,可以定义在babel.config.js中,具体看注释
6、修改vue.config.js,添加transpileDependencies,添加@luban-h5/plugin-common-props,resize-detector的依赖,将依赖按照babel.config.js定义的polyfill重新编译
front-end/h5/.browserslistrc
1 1 > 1%
2   -last 2 versions
  2 +chrome >= 39
  3 +android >= 5.0
... ...
front-end/h5/babel.config.js
1 1 module.exports = {
2 2 presets: [
3   - '@vue/app'
4   - // ['es2015', { 'modules': false }]
  3 + ['@vue/app', {
  4 + polyfills: [
  5 + 'es6.promise',
  6 + 'es6.symbol'
  7 + ]
  8 + }]
5 9 ],
6 10 'plugins': [
7 11 '@babel/plugin-proposal-optional-chaining',
... ...
front-end/h5/package.json
... ... @@ -21,9 +21,11 @@
21 21 "@luban-h5/plugin-common-props": "0.2.8",
22 22 "animate.css": "^3.7.2",
23 23 "ant-design-vue": "^1.3.14",
  24 + "babel-polyfill": "^6.26.0",
24 25 "core-js": "^2.6.5",
25 26 "echarts": "^4.8.0",
26 27 "element-ui": "^2.13.0",
  28 + "es6-promise": "^4.2.8",
27 29 "font-awesome": "4.7.0",
28 30 "hotkeys-js": "^3.7.6",
29 31 "html2canvas": "^1.0.0-rc.3",
... ... @@ -33,6 +35,7 @@
33 35 "register-service-worker": "^1.6.2",
34 36 "resize-detector": "^0.2.2",
35 37 "strapi-sdk-javascript": "^0.3.1",
  38 + "url-search-params-polyfill": "^8.1.1",
36 39 "v-charts": "^1.19.0",
37 40 "v-click-outside": "^3.1.2",
38 41 "vant": "^2.2.12",
... ...
front-end/h5/src/components/core/plugins/bsth/bsth-line-chart.js
... ... @@ -484,6 +484,7 @@ export default {
484 484 }).append('circle')
485 485 .classed('station_circle', true)
486 486 .style('fill', self.chart_up_line_circle_f_color)
  487 + .attr('r', '5.5') // css也设置了,但是有些游览器不支持(如 android5.1的内置游览器),所以直接定义成属性
487 488 .attr('cx', function (d, i) {
488 489 return xScale(i)
489 490 })
... ... @@ -508,6 +509,7 @@ export default {
508 509 .classed('station_circle', true)
509 510 .classed('down', true)
510 511 .style('fill', self.chart_down_line_circle_f_color)
  512 + .attr('r', '5.5') // css也设置了,但是有些游览器不支持(如 android5.1的内置游览器),所以直接定义成属性
511 513 .attr('cx', function (d, i) {
512 514 return xScale(i)
513 515 })
... ... @@ -811,6 +813,9 @@ export default {
811 813 return 'rct_' + d.getKey()
812 814 })
813 815 .transition()
  816 + .attr('width', '30px') // css也设置了,但是有些游览器不支持(如 android5.1的内置游览器),所以直接定义成属性
  817 + .attr('height', '15px') // css也设置了,但是有些游览器不支持(如 android5.1的内置游览器),所以直接定义成属性
  818 + .attr('rx', '2px') // css也设置了,但是有些游览器不支持(如 android5.1的内置游览器),所以直接定义成属性
814 819 .attr('x', gpsRectX)
815 820 .attr('y', gpsRectY)
816 821 .attr('updown', function (d) {
... ... @@ -1001,6 +1006,9 @@ export default {
1001 1006 return self.chart_gps_up_merge_rect_color
1002 1007 }
1003 1008 })
  1009 + .attr('width', '22px') // css也设置了,但是有些游览器不支持(如 android5.1的内置游览器),所以直接定义成属性
  1010 + .attr('height', '22px') // css也设置了,但是有些游览器不支持(如 android5.1的内置游览器),所以直接定义成属性
  1011 + .attr('rx', '15px') // css也设置了,但是有些游览器不支持(如 android5.1的内置游览器),所以直接定义成属性
1004 1012 .attr('x', function (d) {
1005 1013 return d.x - 11
1006 1014 })
... ...
front-end/h5/src/engine-entry.js
... ... @@ -12,6 +12,7 @@
12 12 使用场景:预览弹窗中预览 和 在手机上查看作品使用
13 13 * @Copyright 2018 - 2020 luban-h5. All Rights Reserved
14 14 */
  15 +import 'url-search-params-polyfill'
15 16  
16 17 import Vue from 'vue'
17 18  
... ...
front-end/h5/vue.config.js
... ... @@ -99,5 +99,9 @@ module.exports = {
99 99 maskIcon: 'img/icons/favicon.ico',
100 100 msTileImage: 'img/icons/favicon.ico'
101 101 }
102   - }
  102 + },
  103 + transpileDependencies: [
  104 + '@luban-h5/plugin-common-props',
  105 + 'resize-detector'
  106 + ]
103 107 }
... ...