uniapp调用api,uniapp使用rem

　　Uni使用npm第三方库：先下载第三方库，创建【uni-app】项目；然后使用[uni-app]中的第三方库，代码为[import * as e charts from e charts ]。

　　UNI-APP开发(仿饿)开发课程：进入学习

　　本教程运行环境：windows7系统，Uni-App版本2.5.1，Dell G3电脑。

　　推荐（免费）：uni-app开发教程

　　uniapp使用npm第三方库的方法：

　　1. 下载第三方库

　　Uni-app使用了mpvue的部分代码，所以我们的echarts库使用了mpvue-echarts，也使用了mpvue版本，需要引用百度的echarts。

　　下载过程如下：

　　创建一个空文件夹，如test-echarts。

　　进入test-echarts，打开命令行工具，执行npm init并一直按Enter键。

　　下载第三方库：NPM安装e海图mpvue-e海图-保存。

　　进入node_modules目录。里面的三个目录：echarts、mpvue-echats和zrender是我们需要的第三方库。

　　2. 创建uni-app工程

　　在HBuilderX中新建一个uni-app，将刚刚下载的三个文件夹复制到项目的根目录下。项目最终截图如下：

　　3. 在uni-app里面使用第三方库

　　和一般vue项目一样的方式引用第三方库，如下图，这样我们就可以在项目中使用echarts和mpvue-echarts。

　　从“echarts”导入*作为echarts

　　从 mpvue-e charts 导入mpvueecharts这个例子的源代码在附件项目中，下面是部分代码和效果的截图：

　　模板

　　div class=容器

　　MP vue-e charts:e charts= e charts :on init= on init /

　　/div

　　/模板

　　脚本

　　从“echarts”导入*作为echarts

　　从“mpvue-echarts”导入mpvueEcharts

　　函数initChart(canvas，width，height) {

　　.

　　}

　　导出默认值{

　　data() {

　　返回{

　　埃查尔兹，

　　onInit: initChart

　　}

　　},

　　组件：{

　　mpvueEcharts

　　}

　　}

　　/脚本

　　风格。容器{

　　flex:1；

　　}

　　/风格

　　相关免费学习推荐：编程视频

　　以上是uniapp如何使用npm第三方库的细节。更多请关注我们的其他相关文章！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。