Commit 3cf20708df1cf817e86583cfadaf59588dfa764e
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重新编译
Showing
6 changed files
with
25 additions
and
4 deletions
front-end/h5/.browserslistrc
front-end/h5/babel.config.js
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
front-end/h5/vue.config.js