美文网首页
小程序通过npm包使用WeUI WXSS

小程序通过npm包使用WeUI WXSS

作者: lemon031 | 来源:发表于2019-03-29 14:47 被阅读0次

    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

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

    相关文章

      网友评论

          本文标题:小程序通过npm包使用WeUI WXSS

          本文链接:https://www.haomeiwen.com/subject/xcmcbqtx.html