在小程式開發中使用 npm教程

2022-09-23 18:03:12 字數 1115 閱讀 9295

本文介紹了如何在微信小程式開發中使用 npm 中包的功能,大大提高微信小程式的開發效率,同時也是微信小程式系列教程的**版更新。

微信小程式在發布之初沒有對 npm 的支援功能,這也是目前很多前端開發人員在熟悉了 npm 生態環境後,對微信小程式詬病的地方。

微信小程式在 2.2.1 版本後增加了對 npm 包載入的支援,使得小程式支援使用 npm 安裝第三方包。

微信小程式的功能更新最近更新的也非常給力,如之前給大家介紹的微信小程式開發平台新功能「雲開發」快速上手體驗。

微信小程式關於 npm 包的載入使用官方文件在這裡,此實戰部分我們通重載入乙個 npm 的第三方庫miniprogram-datepicker,此類庫用於實現公曆與農曆的日期選擇功能,而微信小程式官方的元件只能簡單地選擇乙個公曆時間。

在終端中定位到微信小程式的專案資料夾,通過 npm 的安裝命令安裝。

此處請務必使用 –production 選項,可以減少安裝一些業務無關的 npm 包,從而減少整個小程式包的大小。

在微信小程式開發工具的「工具」選單下點選「構建 npm」命令,進行 npm 包的構建,此構建可以將 npm 包構建成在小程式中可載入使用的包。

為了幫助大家更好的理解發布 npm 包中提到的各種要求,這裡簡單介紹一下原理:

首先 node_modules 目錄不會參與編譯、上傳和打包中,所以小程式想要使用 npm 包必須走一遍「構建 npm」的過程,在最外層的 node_modules 的同級目錄下會生成乙個 miniprogram_npm 目錄,裡面會存放構建打包後的 npm 包,也就是小程式真正使用的 npm 包。

構建打包分為兩種:小程式 npm 包會直接拷貝構建檔案生成目錄下的所有檔案到 miniprogram_npm 中;其他 npm 包則會從入口 js 檔案開始走一遍依賴分析和打包過程(類似 webpack)。

尋找 npm 包的過程和 npm 的實現類似,從依賴 npm 包的檔案所在目錄開始逐層往外找,直到找到可用的 npm 包或是小程式根目錄為止。

構建完成後還需要確認專案已勾選了「使用 npm 模組」。

在我們之前實戰專案中,在首頁中測試下此 npm 模組的載入。

今日精選

/ 在頁面中布局完datepicker後,儲存並完成專案的編譯後,點選按鈕即可看到元件的載入情況。

在Lua程式中使用SQLite的教程

sqlite匯入 我們可以用乙個簡單語句匯入sqlite庫,假設lua中正確實現並已完成。在安裝過程中,資料夾libsql包含資料庫相關的檔案。複製 如下 sqlite3 require luasql.sqlite3 變數sqlite3將提供通過參照主sqlite3表訪問該功能。建立連線 我們成立了...

微信小程式開發 工具 npm 使用

具體步驟如下 1 npm init 這裡會產生 package.json 的配置檔案 2 npm install p s 安裝需要的包,這裡會產生 node modules 5 使用包 引入的元件可以有第三方元件和 js 工具 1 按照步驟安裝庫同時走一遍 工具 構建 npm 產生 miniprog...

在微信小程式中使用 async await

但是,以 的方式來寫程式,真的很傷,如果有乙個過程需要依次幹這些事情 那麼,大概會長這樣 wx.getstorage 在 1.02.1904282 以及之後版本的開發工具中,增加了增強編譯的選項來增強 es6 轉 es5 的能力,啟用後會使用新的編譯邏輯以及提供額外的選項供開發者使用。特性原有邏輯 ...