关于小程序(含uniapp)中使用npm模块

摘要:
当我们开发小程序时免不了需要使用npm,对于不想花费过多时间开发组件的人来说是真的方便。那可不是吗,生成的unpackge文件里找到对应小程序文件也是没有的,运行起来怎么可能有,这个地方就显得uniapp不是那么舒服了,为了继续使用不得不另想他法。

当我们开发小程序时免不了需要使用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)中使用npm模块第1张

因为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中 引入所需要的组件。

关于小程序(含uniapp)中使用npm模块第2张

其中有一些特殊的组件(在使用时会报错的)需要特殊处理一下,如Notify,不仅需要在pages.json的globalStyle中 引入还需要再main.js中添加到vue原型上

//main.js

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

Vue.prototype.$notify = Notify  

然后在需要的页面上调用如:

<van-notify   />//类似一个组件的标识


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

当然,这里面肯定也会出现一些其他的如路径之类的错误,在我们用到时可以自己尝试去调修,实在修不了,手写吧少年。

免责声明:文章转载自《关于小程序(含uniapp)中使用npm模块》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇sqlserver 索引SQL Server 2008 允许远程连接的配置下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

微信小程序仿系统预览大图功能

问题:微信小程序系统自带的 wx.previewImage 预览大图功能很好用,用起来很顺畅丝滑,但是有一个致命问题:预览大图的时候是在新页面中打开,当前页面的生命周期会销毁,如果当前页面中没有实时的东西还好,但如果有类似 <live_player> <live_push> <video> 等组件,或者有计时器之类的变量...

解决小程序弹出层滚动穿透的问题

今天在做小程序的时候,遇到了一个棘手的问题,那就是弹出层的滚动穿透,即弹出层滚动,那么被弹出层覆盖的下面的内容区域也会进行滚动,这一点就很麻烦了。弹出层我是用的view标签然后使用的position:fixed进行的定位;说一下我的解决思路: 一:当弹出层里面无滚动的时候: 可以在遮罩的view标签上定义一个防止事件冒泡的方法: catchtouchmov...

【微信小游戏】文件系统,远程加载资源打破4M限制

一、前提 微信小游戏,对游戏包体的大小有严格是限制,上传文件大小<4M,但是本地缓存文件有50M空间,也就是说我们可以将一些资源放到网上,然后缓存到本地。 二、官方概念 文件系统 文件系统是小程序提供的一套以小程序和用户维度隔离的存储以及一套相应的管理接口。通过wx.getFileSystemManager()可以获取到全局唯一的文件系统管理器,所有...

微信小程序 组件

今天学习一下微信小程序的组件. 官网上解释地也很清楚了. 首先创建一个组件,  右键->新建component 新建的josn文件是这样的 {   "component": true,   --->组件,表示当前内容组件   "usingComponents": {}  --使用组件 } 而js文件呢:   Component({    ...

小程序中的数值传参方法

小程序中有五种数值传参方法,其中有三种是比较常用的。 记录一下每一种方法: 1. 通过data-*属性传递值 (常用)  console.log(e.currentTarget.dataset); 案例如图:     2. 通过id传递  console.log(e.currentTarget.id); 案例如图:   3. 通过 globalData传...

用chrome模拟微信浏览器访问页面

有的网页通过限制user agent 来达到禁止在微信浏览器以外的地方访问,我们通过chrome修改user agent即可破解。 CHROME浏览器,进入开发者模式 切换到手机浏览模板 打开 Network,有下拉菜单中选择Custom->Add 选择Devices,再点击Add custom device 然后在user agent中填写下面的...