next.js探索之图表使用、兼容处理、跨域方案

时间 2019-11-17

标签 next.js 探索图表使用兼容处理方案栏目 JavaScript 繁體版

原文原文链接

搭建文字推荐：
www.jianshu.com/p/8d070e2b3…

1.使用bizcharts图表报错 document is not defined

报错缘由：因为next.js是服务端渲染，服务端渲染没有window、document、、、，bizcharts在渲染时须要获取document元素获取宽度等信息
解决方案：采用process.browser判断bizcharts渲染
举个🌰node

import React from "react";

let bizcharts;
if (process.browser) {
    bizcharts = require('bizcharts');
}
const defaultData = [
    {
        month: "0903-0912",
        city: "美拍",
        temperature: 3.56
    },
    {
        month: "0903-0918",
        city: "美拍",
        temperature: 11.9
    }, {
        month: "0903-0912",
        city: "小红书",
        temperature: 8.5
    },
    {
        month: "0903-0918",
        city: "小红书",
        temperature: 11.6
    },
];
class CurveLine extends React.Component {
    render() {
        const { data = defaultData, height, width, padding = [60, 50] } = this.props
        const cols = {
            month: {
                range: [0, 1]
            }
        };
        return (
            process.browser && <div>
                <bizcharts.Chart height={height || 400} width={width || 300} data={data} scale={cols} padding={padding}>
                    <bizcharts.Legend position='top'
                        offsetY={-20}
                        marker='circle'
                        textStyle={{
                            textAlign: 'start', // 文本对齐方向，可取值为： start middle end
                            fill: '#404040', // 文本的颜色
                            fontSize: '12', // 文本大小
                            //fontWeight: 'bold', // 文本粗细
                            //rotate: 30, // 文本旋转角度，以角度为单位，仅当 autoRotate 为 false 时生效
                            //textBaseline: 'top' // 文本基准线，可取 top middle bottom，默认为middle
                        }} />
                    <bizcharts.Axis name="month" />
                    <bizcharts.Axis name="temperature" />
                    <bizcharts.Tooltip
                        crosshairs={{
                            type: "y"
                        }}
                    />
                    <bizcharts.Geom
                        type="line"
                        position="month*temperature"
                        size={2}
                        color={"city"}
                        shape={"smooth"}
                    />
                </bizcharts.Chart>
            </div>
        );
    }
}

export default CurveLine


复制代码

2.苹果兼容问题

问题描述：输入input时页面总体放大，输入完成后，页面只显示中间放大区域，其余位置要手动缩小才能显示原始页面
解决方案：在公共区域引入，控制meta的配置react

import Head from 'next/head'
		//在公共区域引入，例如布局header 中
	   <Head>
                {/* 关闭苹果的自动放大 */}
                <meta content="yes" name="apple-mobile-web-app-capable" />
                <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
            </Head>


复制代码

3.访问公共接口，跨域问题

安装相关依赖

yarn add dotenv //能够使得Node.js从文件中加载环境变量的库
   yarn add express //重定向
   yarn add http-proxy-middleware//代理中间件

复制代码

新建proxy.js

module.exports = {
  '/api': {
    target: '运行环境地址',
    // pathRewrite: { '^/api': '/' },
    changeOrigin: true
  }
}


复制代码

新建.env配置环境变量（此文件根据发布环境不一样，修改不一样的接口转发地址）

ENV_API_HOST='转发接口地址'复制代码

新建server.js

require('dotenv').config()
const express = require('express')
const next = require('next')
const fs = require('fs')

const port = parseInt(process.env.PORT, 10) || 3000
const env = process.env.NODE_ENV
const dev = env !== 'production'
const app = next({ dir: '.', dev })

const handle = app.getRequestHandler()

let server;
app.prepare().then(() => {
  server = express()

  // 设置转发
  if (fs.existsSync('./proxy.js')) {
    const proxyConf = require('./proxy')
    const proxyMiddleware = require('http-proxy-middleware')
    Object.keys(proxyConf).forEach(function (context) {
      server.use(proxyMiddleware(context, proxyConf[context]))
    })
  }

  server.all('*', (req, res) => handle(req, res))

  server.listen(port, err => {
    if (err) {
      throw err
    }
    console.log(`> Ready on port ${port} [${env}]`)
  })
})
  .catch(err => {
    console.log('An error occurred, unable to start the server')
    console.log(err)
  })


复制代码

修改packjson.json启动方式

"scripts": {
    "dev": "node server.js",
    "build": "next build",
    "start": "NODE_ENV=production node server.js"
  }


复制代码

4.使用Ant-Motion测试IE11兼容性(2019-09-18)

问题描述
使用Ant-Motion的页面滚动动画时，IE报错对象不支持findIndex方法

解决方案
引入polyfill.js

<script src="https://polyfill.io/v3/polyfill.js?features=es5,es6,es7&flags=gated"/>复制代码

5.使用Iphone6P时测试调用document方法报错(2019-09-18)

问题描述
因为next.js是服务端渲染致使初始化时使用document的方法会出现undefined的错误
解决方案
判断document及document的方法是否存在

function changeScoll(number) {
        document.getElementById('js-moblie-marketing-overflow-id').scroll(number, 100)
         let dom = document.getElementById('js-moblie-marketing-overflow-id')
        dom && dom.scroll && dom.scroll(number, 100)
    }复制代码

6.在部分低版本手机中使用swiper会有部分函数的JS报错

解决方案：在 next.config.js 配置loader

config.module.rules.push({
      exclude: [/node_modules\/(?!(swiper|dom7|next|chalk|ansi-styles)\/).*/, /\.test\.js(x)?$/],
      test: /\.js(x)?$/,
      use: [options.defaultLoaders.babel],
    })


复制代码