微信小程序引入外部js的完整使用指南

微信小程序是一种基于微信平台的开发模式，其开发框架采用的是类似于MVVM的架构，开发语言是类似于JavaScript的WXML语言和WXSS样式语言。虽然小程序开发框架对于前端开发者来说是一种全新的挑战，但是在开发过程中，我们通常需要用到外部js库来满足不同的需求。本篇文章将会从以下几个方面介绍如何在微信小程序中引入外部js库。

一、小程序中引入外部js库的一般方式

在微信小程序中引入外部js库的方式有两种：一种是直接在小程序根目录下创建一个libs目录，把外部js库放在libs目录中，在需要使用该js库的小程序页面中使用require方法进行引入；另一种就是使用npm来安装引入外部js库。下面是第一种方法的代码示例：

//在小程序页面中引入js库（以引入jquery为例）
var $ = require('../../libs/jquery/jquery.js');

第二种方法的简单示例如下： 1. 创建一个文件夹（如：util） 2. 打开终端进入该文件夹，执行npm init命令生成package.json文件 3. 在终端中输入npm install jquery --save命令安装jquery库 4. 在小程序页面中使用require方法进行引入

//在小程序页面中引入js库（以引入jquery为例）
var $ = require('../../util/node_modules/jquery/dist/jquery.js');

二、常用的外部js库

除了jquery库，我们在小程序开发中还会用到很多其他的外部js库，这里对常用的一些进行介绍。 1. axios axios是一个基于Promise的HTTP客户端，可以用在浏览器和node.js中，支持浏览器中断请求、拦截请求和响应等。在微信小程序中使用axios时，需要先使用npm安装axios库（npm i axios）使用axios发送GET请求的代码示例：

var axios = require('../../util/node_modules/axios/index');
axios.get('https://jsonplaceholder.typicode.com/posts')
  .then(function (response) {
    console.log(response.data);
  })
  .catch(function (error) {
    console.log(error);
  });

2. moment moment是一个JavaScript日期处理库，使用它可以轻松地解析、验证、操作和显示日期。使用moment获取当前时间的代码示例：

var moment = require('../../util/node_modules/moment/moment.js');
console.log('现在是：',moment().format('YYYY年MM月DD日 HH:mm:ss'));

3. wx-charts wx-charts是一款微信小程序可视化图表组件库，支持线图、饼图、柱状图、雷达图、仪表盘、散点图、K线图、热力图等多种图表类型。使用wx-charts绘制一个折线图的代码示例：

//引入wx-charts库文件
var wxCharts = require('../../util/node_modules/wx-charts/dist/wxcharts.js');
//在页面的onLoad函数中初始化wxCharts
new wxCharts({
  canvasId: 'lineCanvas',
  type: 'line',
  categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],//X轴数据
  animation: true,//是否开启动画
  series: [{//Y轴数据
    name: '成交量1',
    data: [15, 20, 45, 37, 55, 33, 34],
    format: function (val) {
      return val.toFixed(2) + '万';
    }
  }, {
    name: '成交量2',
    data: [25, 10, 25, 27, 45, 23, 24],
    format: function (val) {
      return val.toFixed(2) + '万';
    }
  }],
  yAxis: {
    title: '成交金额 (万元)',
    format: function (val) {
      return val.toFixed(2);
    },
    min: 0
  },
  xAxis: {
    disableGrid: true
  },
  legend: false,
  width: 320,//图表宽度
  height: 200,//图表高度
  dataLabel: false,
  dataPointShape: true,
  extra: {
    lineStyle: 'curve'
  }
});

三、使用外部js库过程中的注意事项

1. 引入外部库后需要进行路径设置：必须注意到引用外部js库文件的路径设置，如果路径设置不正确，会导致js文件无法引用成功。 2. 在小程序界面中不能使用DOM：在小程序中，只能使用能够被所有浏览器所支持的HTML标签，而不能出现浏览器特定的标签，比如：window、document、location、navigator等。 3. 不能使用ES6及JQuery的全部功能：在小程序中，不能使用ES6及JQuery的全部功能，需要根据小程序的需求进行逐一引用。 4. 外部js库的版本问题：有些库的不同版本，在小程序中可能会有不同的表现，使用时需特别注意。 5. 不能频繁使用外部js库：在一个小程序中，使用了过多的库文件，可能会导致整个小程序的加载速度变慢，影响用户的体验，因此，在使用外部js库时，应尽量减少加载外部js库的次数和数量。以上就是小程序中引入外部js库的相关知识点，希望本篇文章对您有所帮助。完整代码示例：

//引入外部库（jquery）
var $ = require('../../util/libs/jquery/jquery.js');

Page({
  data: {},
  
  onLoad: function () {
    //使用外部库
    $('body').css('background-color','red');
  }
});