npm引入小程序官方WeUI组件库weui-miniprogram

一,查看是否安装npm包

通过npm -v 查看npm的版本,如果能显示相应出版本号,就说明是安装成功的。

二,如果没有安装

1.npm init 会提示不是内部命令

2.安装node环境

这时候就需要安装node环境,可以在http://nodejs.cn/download/ 下载对应的版本

三,开始构建nmp

1.进入小程序根目录(app.js所在目录),打开cmd

输入:npm init -y

npm init -y

参数 -y 表示对 npm 要求提供的信息,都自动按下回车键,表示接受默认值。

2.下载依赖

npm install weui-miniprogram

下载miniprogram依赖

四,点击 微信开发者工具的 工具=>构建npm

五,app.wxss引入全局样式

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

列:在页面中引入 dialog 弹窗组件

1.首先在页面的 json 文件加入 usingComponents 配置字段

{
  "usingComponents": {
    "mp-dialog": "/miniprogram_npm/weui-miniprogram/dialog/dialog"
  }
}

2.然后可以在对应页面的 wxml 中直接使用该组件

<mp-dialog title="test" show="{
   
   {true}}" bindbuttontap="tapDialogButton" buttons="{
   
   {[{text: '取消'}, {text: '确认'}]}}">
    <view>test content</view>
</mp-dialog>

猜你喜欢

转载自blog.csdn.net/asteriaV/article/details/109292142
今日推荐