next.js探索之圖表使用、相容處理、跨域方案

藤蔓繞竹發表於2019-09-10
JS跨域
搭建文字推薦：
www.jianshu.com/p/8d070e2b3…

1.使用bizcharts圖表報錯 document is not defined

報錯原因：由於next.js是服務端渲染，服務端渲染沒有window、document、、、，bizcharts在渲染時需要獲取document元素獲取寬度等資訊
解決方案：採用process.browser判斷bizcharts渲染
舉個?

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的配置

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方法

IE11報錯

  • 解決方案
    引入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],
    })


複製程式碼


相關文章