關於小程序(含uniapp)中使用npm模塊

當我們開發小程序時免不了需要使用npm,對於不想花費過多時間開發組件的人來說是真的方便。

A:小程序常用的npm安裝如vant之類的流程:

1.創建小程序;

2.npm init -y初始化創建配置package.json文件;

3.npm i @vant/weapp -S --production用npm安裝vant組件庫;

4.打開開發工具構建npm,提示構建成功後,該怎麼引怎麼引。

需要注意的是安裝的vant是全部組件,按需加載不過多解釋,多餘的也不解釋了;

B:因爲最近看了一下uniapp(怎麼說呢,這玩意用後感覺怪怪的,說不上好與不好,當然這只是我個人的看法),下面說一下uniapp的npm包使用情況:

正常情況我們用HbuilderX創建一個移動端項目後,想的都是和正常小程序差不多的流程,如安裝配置文件啊、npm加載UI組件庫啊啥的,

但是當正常去運行到小程序模擬器時又會發現提示沒有可構建的npm包。

那可不是嗎,生成的unpackge文件裏找到對應小程序文件也是沒有的,運行起來怎麼可能有,這個地方就顯得uniapp不是那麼舒服了,爲了繼續使用不得不另想他法。

uniapp提供的條件:

因爲uniapp的爲了兼容等的特殊性,下面是最直接的解決方法:

1.在根目錄下創建一個wxcomponents目錄(這玩意的話運行打包時小程序就認得),而且需要與大部隊同級如components、static、pages等。

2.直接通過git或其他操作,獲取碼源:

  a.如果是js文件如animate.css類型的可以把碼源直接放在components裏面,然後在需要的頁面調用,也可放在main.js裏面全局調用,其他步驟喝純VUE引用沒啥區別;

  b.如果是量大的組件庫,如vant組件庫,可以將該碼源dist目錄拷貝到新建的wxcomponents目錄下,並重命名dist爲vant-weapp,然後在pages.json的globalStyle中 引入所需要的組件。

   

  其中有一些特殊的組件(在使用時會報錯的)需要特殊處理一下,如Notify,不僅需要在pages.json的globalStyle中 引入還需要再main.js中添加到vue原型上

  

//main.js

import Notify from './wxcomponents//vant/notify/notify';

Vue.prototype.$notify = Notify  

 然後在需要的頁面上調用如:

<van-notify id="van-notify" />//類似一個組件的標識


 this.$notify({ type: "", message: "" });//調用

  

當然,這裏面肯定也會出現一些其他的如路徑之類的錯誤,在我們用到時可以自己嘗試去調修,實在修不了,手寫吧少年。

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章