小程序开发：轻松导入WeUI包

# 小程序的底部弹窗（半屏弹窗）
我这里主要是使用小城的原生组件WeUI来完成的，需要引入WeUI组件库。这里就不教如何引入库，主要讲解如何使用**Half Screen Dialog**标签。
首先就是通过json文件引入到你需要使用组件的页面。```javascript
{"usingComponents": {"mp-half-screen-dialog":"/weui-miniprogram/half-screen-dialog/half-screen-dialog"}
}

这里的mp-half-screen-dialog为标签名，可以自己定义标签名，/weui-miniprogram/half-screen-dialog/half-screen-dialog为引入包的相对路径，引入WeUI组件库包的half-screen-dialog的文件。
接下来就是如何使用，首先就是在wxml文件中直接使用标签

<mp-half-screen-dialog></mp-half-screen-dialog>

他的属性主要是以下几个：
extClass：组件类名
title：组件主标题标题
desc：辅助操作描述内容，可以简单的显示一些文字
show：是否开启弹窗（默认为true）主要靠此属性来完成弹出
buttons：辅助操作按钮列表
bindbuttontap：点击辅助操作按钮时触发
bindclose：组件关闭时候触发
以及slot属性。

wxml:

<mp-half-screen-dialogetClass="test"title="test"desc="hello,this is test."show="{{show}}"buttons="{{buttons}}"bindbuttontap="bindButtonTap"bindclose="bindClose"
></mp-half-screen-dialog>
<button type="primary"
bindtap="btn">test</button>

js:

data: {show:false,buttons:[{type:'default',className:'test1',text:'测试1',value:0},{type:'primary',className:'test2',text:'测试2',value:1}]
},
btn:function(){this.setData({show:true})
},
bindClose:function(){console.log("bindClose")
},
bindButtonTap:function(e){console.log(e.detail)this.setData({show:false})
}

大致效果如下图：

slot

这使得单独拿出来讲的，开发过程中slot使用的会比较多，属于自定义标题、内容和按钮。
使用方法如下：

<mp-half-screen-dialogetClass="test"show="{{show}}"bindbuttontap="bindButtonTap"bindclose="bindClose"
><view slot="title"><text>这是标题</text></view><view slot="desc"><view style="font-size: 50rpx;">这是内容</view><text style="color: red;">内容可以像页面一样设计</text>    </view><view slot="footer"><button type

导入WeUI数据包（npm方法）

WeUI 是由微信官方设计团队和小程序团队为微信小程序量身设计的小程序扩展组件库。在使用前需要导入WeUI组件库，这里用的主要是npm方法，十分简单有效。

导入成功后会有四个文件：

如果你导入一半失败的，需要将四个文件删除重新导入。

导入：

第一步，打开小程序项目。
打开项目终端


新建一个终端然后开始导入。在终端中输入 npm init 。

然后输入项目名，还会有很多可以设置的，如果不想设置可以直接点回车。


然后输入yes就可以生成我们需要的package.json文件。（如果你想设置这些属性你可以看看文章附页，那里提供了属性的中文名）

接下来继续在终端输入 npm install weui-miniprogram --save

设计：秋
编辑：千歌

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！