微信小程序是一种基于微信平台的开发模式，其开发框架采用的是类似于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');
}
});
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/243923.html
微信扫一扫 
支付宝扫一扫 