本文介紹如何在微信小程式開發(fā)中使用 npm 中套件的功能，大幅提高微信小程式的開發(fā)效率，同時(shí)也是微信小程式系列教學(xué)的影片版更新。 【相關(guān)學(xué)習(xí)推薦：小程式開發(fā)教學(xué)】
微信小程式在發(fā)布之初沒有對npm 的支援功能，這也是目前很多前端開發(fā)人員在熟悉了npm 生態(tài)環(huán)境後，對微信小程式詬病的地方。
微信小程式在 2.2.1 版本後增加了對 npm 套件載入的支持，使得小程式支援使用 npm 安裝第三方套件。
微信小程式的功能更新最近更新的也非常給力，如之前給大家介紹的 微信小程式開發(fā)平臺新功能「雲(yún)端開發(fā)」快速上手體驗(yàn) 。
在小程式中載入npm 套件
微信小程式關(guān)於npm 套件的載入使用官方文件在這裡，此實(shí)戰(zhàn)部分我們透過載入一個(gè)npm 的第三方庫miniprogram-datepicker ，此類函式庫用於實(shí)現(xiàn)公曆與農(nóng)曆的日期選擇功能，而微信小程式官方的元件只能簡單地選擇一個(gè)公曆時(shí)間。
載入npm套件？方法介紹 "162277564179948微信小程式怎麼開發(fā)載入npm套件？方法介紹")
在終端機(jī)中定位到微信小程式的專案資料夾，透過 npm 的安裝指令安裝。
載入npm套件？方法介紹 "162277565838304微信小程式怎麼開發(fā)載入npm套件？方法介紹")
這裡請務(wù)必使用 –production 選項(xiàng)，可以減少安裝一些業(yè)務(wù)無關(guān)的 npm 包，從而減少整個(gè)小程式包的大小。
構(gòu)建npm 套件
在微信小程式開發(fā)工具的「工具」選單下點(diǎn)擊「構(gòu)建npm」命令，進(jìn)行npm 套件的構(gòu)建，此構(gòu)建可以將npm 套件建構(gòu)成在小程式中可載入使用的套件。
為了幫助大家更好的理解發(fā)布npm 套件中提到的各種要求，這裡簡單介紹一下原理：
首先node_modules 目錄不會(huì)參與編譯、上傳和打包中，所以小程式想要使用npm 套件必須走一遍「建構(gòu)npm」的過程，在最外層的node_modules 的同級目錄下會(huì)產(chǎn)生一個(gè)miniprogram_npm 目錄，裡面會(huì)存放建置打包後的npm 包，也就是小程式真正使用的npm 包。
建置打包分為兩種：小程式npm 套件會(huì)直接拷貝建置檔案產(chǎn)生目錄下的所有檔案到miniprogram_npm 中；其他npm 套件會(huì)從入口js 檔案開始走一遍依賴分析和打包流程（類似webpack）。
尋找 npm 套件的過程和 npm 的實(shí)作類似，從依賴 npm 套件的檔案所在目錄開始逐層往外找，直到找到可用的 npm 套件或是小程式根目錄為止。
建置完成後也需要確認(rèn)專案已勾選了「使用 npm 模組」。
在專案中使用第三方模組
#在我們之前實(shí)戰(zhàn)專案中，在首頁測試下此npm 模組的載入.
在頁面中佈局完 datepicker 後，儲(chǔ)存並完成專案的編譯後，點(diǎn)擊按鈕即可看到元件的載入情況。
載入npm套件？方法介紹 "162277574542432微信小程式怎麼開發(fā)載入npm套件？方法介紹")
更多程式相關(guān)知識，請?jiān)煸L：程式設(shè)計(jì)入門！ ！
以上是微信小程式怎麼開發(fā)載入npm套件？方法介紹的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！
熱AI工具
Undress AI Tool
免費(fèi)脫衣圖片
Undresser.AI Undress
人工智慧驅(qū)動(dòng)的應(yīng)用程序，用於創(chuàng)建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費(fèi)的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費(fèi)的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強(qiáng)大的PHP整合開發(fā)環(huán)境
Dreamweaver CS6
視覺化網(wǎng)頁開發(fā)工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
使用Python開發(fā)微信小程式
Jun 17, 2023 pm 06:34 PM
隨著行動(dòng)互聯(lián)網(wǎng)技術(shù)和智慧型手機(jī)的普及，微信成為了人們生活中不可或缺的一個(gè)應(yīng)用。而微信小程式則讓人們可以在不需要下載安裝應(yīng)用程式的情況下，直接使用小程式來解決一些簡單的需求。本文將介紹如何使用Python來開發(fā)微信小程式。一、準(zhǔn)備工作在使用Python開發(fā)微信小程式之前，需要先安裝相關(guān)的Python函式庫。這裡推薦使用wxpy和itchat這兩個(gè)函式庫。 wxpy是一個(gè)微信機(jī)器
實(shí)作微信小程式中的卡片翻轉(zhuǎn)特效
Nov 21, 2023 am 10:55 AM
實(shí)作微信小程式中的卡片翻轉(zhuǎn)特效在微信小程式中，實(shí)現(xiàn)卡片翻轉(zhuǎn)特效是一種常見的動(dòng)畫效果，可以提升使用者體驗(yàn)和介面互動(dòng)的吸引力。以下將具體介紹如何在微信小程式中實(shí)現(xiàn)卡片翻轉(zhuǎn)的特效，並提供相關(guān)程式碼範(fàn)例。首先，需要在小程式的頁面佈局檔案中定義兩個(gè)卡片元素，一個(gè)用於顯示正面內(nèi)容，一個(gè)用於顯示背面內(nèi)容，具體範(fàn)例程式碼如下：<!--index.wxml-->&l
支付寶上線「漢字拾光-生僻字」小程序，用於徵集、補(bǔ)充生僻字庫
Oct 31, 2023 pm 09:25 PM
本站10月31日消息，今年5月27日，螞蟻集團(tuán)宣布啟動(dòng)“漢字拾光計(jì)劃”，最近又迎來新進(jìn)展：支付寶上線“漢字拾光-生僻字”小程序，用於向社會(huì)徵集生僻字，補(bǔ)充生僻字庫，同時(shí)提供不同的生僻字輸入體驗(yàn)，以幫助完善支付寶內(nèi)的生僻字輸入方法。目前，用戶搜尋「漢字拾光」、「生僻字」等關(guān)鍵字就可以進(jìn)入「生僻字」小程式。在小程式裡，使用者可以提交尚未被系統(tǒng)辨識輸入的生僻字圖片，支付寶工程師確認(rèn)後，將會(huì)對字庫進(jìn)行補(bǔ)錄入。本站注意到，使用者也可以在小程式體驗(yàn)最新的拆字輸入法，這項(xiàng)輸入法針對讀音不明確的生僻字設(shè)計(jì)。用戶拆
小程式能用react嗎
Dec 29, 2022 am 11:06 AM
小程式能用react，其使用方法：1、基於「react-reconciler」實(shí)作一個(gè)渲染器，產(chǎn)生一個(gè)DSL；2、建立一個(gè)小程式元件，去解析和渲染DSL；3、安裝npm，並執(zhí)行開發(fā)者工具中的建構(gòu)npm；4、在自己的頁面中引入包，再利用api即可完成開發(fā)。
uniapp如何實(shí)現(xiàn)小程式和H5的快速轉(zhuǎn)換
Oct 20, 2023 pm 02:12 PM
uniapp如何實(shí)現(xiàn)小程式和H5的快速轉(zhuǎn)換，需要具體程式碼範(fàn)例近年來，隨著行動(dòng)網(wǎng)路的發(fā)展和智慧型手機(jī)的普及，小程式和H5成為了不可或缺的應(yīng)用形式。而uniapp作為一個(gè)跨平臺的開發(fā)框架，可以在一套程式碼的基礎(chǔ)上，快速實(shí)現(xiàn)小程式和H5的轉(zhuǎn)換，大大提高了開發(fā)效率。本文將介紹uniapp如何實(shí)現(xiàn)小程式和H5的快速轉(zhuǎn)換，並給出具體的程式碼範(fàn)例。一、uniapp簡介unia
教你如何在小程式中用公眾號範(fàn)本訊息（附詳細(xì)想法）
Nov 04, 2022 pm 04:53 PM
這篇文章給大家?guī)砹岁P(guān)於微信小程式的相關(guān)問題，其中主要介紹瞭如何在小程式中用公眾號範(fàn)本訊息，下面一起來看一下，希望對大家有幫助。
用Python編寫簡單的聊天程式教程
May 08, 2023 pm 06:37 PM
實(shí)現(xiàn)思路x01服務(wù)端的建立首先,在服務(wù)端,使用socket進(jìn)行訊息的接受,每接受一個(gè)socket的請求,就開啟一個(gè)新的線程來管理訊息的分發(fā)與接受,同時(shí),又存在一個(gè)handler來管理所有的線程,從而實(shí)現(xiàn)對聊天室的各種功能的處理x02客戶端的建立客戶端的建立就要比服務(wù)端簡單多了,客戶端的作用只是對消息的發(fā)送以及接受,以及按照特定的規(guī)則去輸入特定的字符從而實(shí)現(xiàn)不同的功能的使用,因此,在客戶端這裡,只需要去使用兩個(gè)線程,一個(gè)是專門用於接受消息,一個(gè)是專門用於發(fā)送消息的至於為什麼不用一個(gè)呢,那是因?yàn)?只
PHP與小程式的地理位置定位與地圖顯示
Jul 04, 2023 pm 04:01 PM
PHP與小程式的地理位置定位與地圖顯示地理位置定位與地圖顯示在現(xiàn)代科技中已經(jīng)成為了必備的功能之一。隨著行動(dòng)裝置的普及，人們對於定位和地圖顯示的需求也越來越高。在開發(fā)過程中，PHP和小程式是常見的兩種技術(shù)選擇。本文將為大家介紹PHP與小程式中的地理位置定位與地圖顯示的實(shí)作方法，並附上對應(yīng)的程式碼範(fàn)例。一、PHP中的地理位置定位在PHP中，我們可以使用第三方地理位
