微信小程序引入外部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');
  }
});