小程序学习之路-npm导入weui库

Lu_Hsiang
652 阅读2分钟

NPM是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题，常见的使用场景有以下几种：

  • 允许用户从NPM服务器下载别人编写的第三方包到本地使用。
  • 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。
  • 允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。

由于新版的nodejs已经集成了npm，所以之前npm也一并安装好了。同样可以通过输入  "npm -v" 来测试是否成功安装。

image.png

首先在项目内右键选择在外部终端窗口中打开，就省去了cd到项目路径

image.png

键入npm init命令

image.png

不停的回车即可

image.png

下载weui的包的命令为## npm install weui-miniprogram --save 等待片刻下载完成，在项目里面也能看到新建的包

image.png

image.png

此时还没有结束，构建npm，点击工具栏的构建npm后才算大功告成

image.png

然后在app.wxss里面引入weui.wxss

@import '/miniprogram_npm/weui-miniprogram/weui-wxss/dist/style/weui.wxss';

完成以上工作就可以在你的页面使用weui库里面的组件了，别忘了在你需要使用的页面的jaon文件中usingComponents 配置字段，说明你想要引用的具体什么组件

image.png

在页面的wxml直接使用就可以了

<mp-dialog title="test" show="{{true}}" bindbuttontap="tapDialogButton" buttons="{{buttons}}">
    <view>test content</view>
</mp-dialog>


Page({
    data: {
        buttons: [
        	{ text: '取消' },
        	{ text: '确认' }
        ]
    }
})

修改组件内部样式.

每个组件可以设置ext-class这个属性，该属性提供设置在组件WXML顶部元素的class，组件的addGlobalClass (opens new window)的options都设置为true，所以可以在页面设置wxss样式来覆盖组件的内部样式。需要注意的是，如果要覆盖组件内部样式，必须wxss的样式选择器的优先级比组件内部样式优先级高。 addGlobalClass在基础库2.2.3开始支持。

avatar
文章
阅读
粉丝