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],
    })


複製代碼

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。