在小程序開發中使用 npm

banana_pi 發布于2019-08-23 12:23 / 3079人閱讀

摘要：但是不可以在小程序根目錄外。構建包在微信小程序開發工具的工具菜單下點擊構建命令，進行包的構建，此構建可以將包構建成在小程序中可加載使用的包。使用包中引入包使用包中的自定義組件組件運行效果其他微信小程序支持文檔小程序推薦百科知識詞典

微信小程序在 2.2.1 版本后增加了對 npm 包加載的支持，使得小程序支持使用 npm 安裝第三方包。

1、在小程序中加載 npm 包

npm install miniprogram-datepicker --production

node_modules可以在小程序根目錄下，也可以存在于小程序根目錄下的各個子目錄中。但是不可以在小程序根目錄外。使用--production選項，可以減少安裝一些業務無關的 npm 包，從而減少整個小程序包的大小。

2、構建 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 模塊」。

3、使用npm包

js 中引入 npm 包：

const package = require("packageName")

使用 npm 包中的自定義組件：

{
    "usingComponents": {
      "datepicker": "miniprogram-datepicker"
    }
}

miniprogram-datepicker組件運行效果

其他

微信小程序npm支持文檔：https://developers.weixin.qq....

【小程序推薦】百科知識詞典

GPU云服務器云服務器小程序開發開發小程序開發小程序開發開發制作福州小程序開發

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/98417.html

Taro：使用taro完成小程序開發

摘要：前言是一個可以很好實現一次開發，多端統一的框架，本文只介紹它小程序端開發的一些內容。前言：taro是一個可以很好實現一次開發，多端統一的框架，本文只介紹它小程序端開發的一些內容。小程序項目搭建gitup已經有很清楚的說明：https://github.com/NervJS/taro 一.主要操作步驟及命令： 1.cnpm install -g @tarojs/cli 全局安裝taro...

Me_Kun 2019-08-02 11:49 評論0 收藏0
Taro：使用taro完成小程序開發

摘要：前言是一個可以很好實現一次開發，多端統一的框架，本文只介紹它小程序端開發的一些內容。前言：taro是一個可以很好實現一次開發，多端統一的框架，本文只介紹它小程序端開發的一些內容。小程序項目搭建gitup已經有很清楚的說明：https://github.com/NervJS/taro 一.主要操作步驟及命令： 1.cnpm install -g @tarojs/cli 全局安裝taro...

lavor 2019-08-23 12:31 評論0 收藏0
小程序開發第二篇：使用微信小程序開發者工具、wepy框架初始化項目

摘要：上一篇小程序開發第一篇注冊獲取同步企業項目數據微信小程序開發者工具下載小程序開發者工具使用小程序原生開發直接使用小程序開發者工具打開項目即可小程序框架開發首選官方提供類開發框架，備選。上一篇：小程序開發第一篇：注冊、獲取unionid同步企業項目數據 1.微信小程序開發者工具下載：小程序開發者工具使用：小程序原生開發：直接使用小程序開發者工具打開項目即可小程序框架開發：...

HitenDev 2019-08-22 18:08 評論0 收藏0