supOS高代码开发引用外部拓展库的3种方式-EW帮帮网

一、引用本地js进行加载（highcharts为例）

1、获取线上资源

（1）我们可以在highcharts的官方文档中找到CDN方式引入，获取到我们所需要的线上资源地址，然后在浏览器中获取它的源代码。

ps：本文章展示的是3d的图表，所以多引入了一个3d图表的功能模块

官网cdn引用讲解传送门

highcharts.js传送门

3d.js传送门

（2）我们也可以在预览实例的时候直接粘贴所使用到的js文件

2、在本地项目中创建js文件

我们将平台的可编程组件拉到本地进行开发，拉取下来的项目是没有out文件夹的。我们需要按照图片上的层级在本地项目中创建文件夹（out > libs）。然后在libs里面创建我们所需要的js文件，文件的内容粘贴我们线上地址获取的资源代码。

3、文件中引用js资源

我们在头部引入资源文件。需要注意的是，我们平台引用libs的路径通通为 ./ 加上文件名。引入完成之后我们可以去案例中心粘贴一个简单的案例先来测试一下是否引入成功。

import React, { Component } from 'react';
import Highcharts from './highcharts'
import Highcharts3d from './chart3D';

Highcharts3d(Highcharts);
class CustomComp extends Component {
    componentDidMount() {
        this.getChats()
    }
    getChats = () => {
        var chart = Highcharts.chart('container', {
            chart: {
                type: 'pie',
                options3d: {
                    enabled: true,
                    alpha: 45
                }
            },
            title: {
                text: '简数科技每周水果消耗量'
            },
            subtitle: {
                text: 'Highcharts 中的3D环形图'
            },
            plotOptions: {
                pie: {
                    innerSize: 100,
                    depth: 45
                }
            },
            series: [{
                name: '货物金额',
                data: [
                    ['香蕉', 8],
                    ['猕猴桃', 3],
                    ['桃子', 1],
                    ['橘子', 6],
                    ['苹果', 8],
                    ['梨', 4],
                    ['柑橘', 4],
                    ['橙子', 1],
                    ['葡萄 (串)', 1]
                ]
            }]
        });
    }
    render() {
        return (
            <div id="container" style={{ width: '100%', height: '100%' }}></div>
        );
    }
}

export default CustomComp;

4、将代码推送至平台进行预览

完成上述步骤之后将代码推送至平台，然后进行预览。

二、npm方式引用第三方拓展库（echarts为例）

1、下载本地依赖

将项目同步到本地之后，在终端上输入下载echarts的命令，输入命令时注意文件层级是否正确。

npm install echarts --save

下载完成之后检查package.json中是否有该依赖包

2、使用官网的简单示例，测试依赖是否能正常使用

import React, { Component } from 'react';
import * as echarts from 'echarts';

class CustomComp extends Component {
    componentDidMount() {
        this.getChart()
    }
    getChart = () => {
        var myChart = echarts.init(document.getElementById('main'));
        // 绘制图表
        myChart.setOption({
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            xAxis: {
                data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
            },
            yAxis: {},
            series: [
                {
                    name: '销量',
                    type: 'bar',
                    data: [5, 20, 36, 10, 10, 20]
                }
            ]
        });
    }
    render() {
        return (
            <div id='main' style={{width:'100%',height:'100%'}}></div>
        );
    }
}

export default CustomComp;

3、打包依赖

对于npm下载下来的依赖，我们上传推送到平台预览前需要打包资源。

平台默认的打包语句是 npm run build:libs，可在package.json中找到。

4、预览

打包成功后将文件推送到平台进行预览

三、CDN方式引入外部拓展库（百度地图为例）

1、创建标签和加载内容

我们在js代码中直接创建引入标签，在回调函数中创建需要加载的内容。在创建标签前，我们需要明确标签的引用地址，引用地址可在外部资源库的官方文档中查看。

import React, { Component } from 'react';

class CustomComp extends Component {
    componentDidMount() {
        this.loadMap()
    }
    loadMap = () => {
        const AK = '自己申请的密钥';
        const BMap_URL = "https://api.map.baidu.com/api?v=2.0&ak=" + AK + "&s=1&callback=onBMapCallback";
        return new Promise((resolve, reject) => {
            // 如果已加载直接返回
            if (typeof BMap !== "undefined") {
                resolve(BMap);
                return true;
            }
            // 百度地图异步加载回调处理
            window.onBMapCallback = function () {
                var map = new BMap.Map("map-box");
                var point = new BMap.Point(116.404, 39.915);
                map.centerAndZoom(point, 17);
            };
            // 插入script脚本
            let scriptNode = document.createElement("script");
            scriptNode.setAttribute("type", "text/javascript");
            scriptNode.setAttribute("src", BMap_URL);
            document.body.appendChild(scriptNode);
        });
    }
    render() {
        return (
            <div id='map-box' style={{width:'100%',height:'100%'}}></div>
        );
    }
}

export default CustomComp;

2、保存预览

四、小结

除了平台已经封装好的antd、lodash和moment，其他的外部组件库使用前需要先引入。文章总结了3种比较常见的引用方式，开发者可根据自己的实际需求选取最适合方式进行使用。不管使用什么外部组件库，都要注意结合外部组件库自己的开发文档来完成。

本文含有隐藏内容，请开通VIP 后查看

supOS高代码开发引用外部拓展库的3种方式