小程序通过npm包使用WeUI WXSS

2019-03-29  本文已影响0人  lemon031

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

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

上一篇下一篇

猜你喜欢

热点阅读