微信小程序(二)使用npm安装weui

发布网友 发布时间：2024-09-05 11:16

我来回答

共1个回答

热心网友 时间：2024-10-20 20:54

作为一个不专业的前端，在开发前端的时候我喜欢用一些UI库。HTML页面一般习惯用bootstarp，layui等。VUE项目一般习惯用iview，elementui等。

小程序自然也不例外，我这里使用的是官方推荐的weui组件库，但是如何将其引入项目，这是一个很值得深思的问题。

最终我还是选择了VUE一样的管理方式，使用npm。

Vue的脚手架默认就是支持npm的。但是小程序需要你手动安装。

当然，这部分官方文档是有介绍的，想看官方文档的同学，请移步《npm支持》

写这篇博客的原因就是，官方文档我看不懂，反正我是搞不清楚文档是怎么让他们写成这样的。

一：打开小程序项目

我这里指的是打开小程序项目的文件目录，如下图所示：

在当前目录下打开命令行窗口（cmd）当然，我这里指的是windows系统。

如下图所示：

（1）：初始化npm

命令行里会以交互的形式让你填一些项目的介绍信息，依次介绍如下：（不知道怎么填的直接回车、回车...）

name项目名称

version项目的版本号

description项目的描述信息

entrypoint项目的入口文件

testcommand项目启动时脚本命令

gitrepository如果你有Git地址，可以将这个项目放到你的Git仓库里

keywords关键词

author作者叫啥

license项目要发行的时候需要的证书，平时玩玩忽略它

（2）：安装npm

（3）：在项目根目录下创建node_moles空目录

（4）：进入刚刚创建的node_moles目录，在当前目录下，打开cmd

（5）：执行安装第三方UI库的npm.包命令：我这里安装的是weui

执行成功之后，你会发现你想安装的第三方UI库的包已经下载到node_moles目录中，如下图所示：

然后，你项目的目录文件如下图所示：

二：配置微信开发者工具支持npm

这个很简单，如下图所示：勾选红框标注的使用npm模块：

然后，点击菜单栏?工具->构建npm，将你刚刚使用npm安装的插件集成到项目中。

如下图所示：

构建成功之后，项目文件根目录会多出一个miniprogram_npm目录，这个就小程序构建npm所生成的目录。

如下图所示：

将weui的css样式引入全局css文件中，便于全局使用：

这样，就可以在全局使用weui的样式了。

最后可能需要注意一下：

每当你通过npm安装一个第三方库时，记得别忘记重新构建一下（点开左上角工具->选中构建npm）

这个很重要。

有好的建议，请在下方输入你的评论。

欢迎访问个人博客https://guanchao.site

欢迎访问我的小程序：打开微信->发现->小程序->搜索“时间里的”