小程序通过npm包使用WeUI WXSS

1.小程序的初始目录

图1

2.使用npm 包

npm支持微信官网地址

2.1官网补充

首先要npm init创建package.json文件，然后按照官网步骤操作就可以了。

图2.1

2.2创建package.json文件介绍

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

name 项目名称

version 项目的版本号

description 项目的描述信息

entry point 项目的入口文件

test command 项目启动时脚本命令

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

keywords 关键词

author 作者叫啥

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

图2.2

3.npm安装WeUI WXSS包步骤

3.1安装依赖包

GitHub地址：https://github.com/Tencent/weui-wxss

npm下载：npm i weui-wxss

npm i weui-wxss安装依赖包后会生成node_modules文件

图3.1

3.2以下就是按照微信官网的操作步骤

图3.2

1.操作上面这一步的时候，我这边提示未找到app.wxss.js（如下图3.3）

2.去对应的路径下创建对应的文件后，再次操作上面这一步就会出现如图3.4

3.构建完成目录下面会生成一个miniprogram_npm文件（如图3.5）

4.然后完成图3.6操作（在详情里）

图3.3

图3.4

图3.5

图3.6

4使用WeUI WXSS

1.依赖包下的目录如图4.1，小程序只会用到dist文件

2.按照如图4.2引入样式文件，我用了scss编辑器

3.最终效果如图4.3，dist下面的example文件里都是例子可以参考！

图4.1

图4.2

图4.3

以上是本人操作流程，希望可以帮助到大家，如有问题请指出，会虚心接受！