WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一。包含button、cell、dialog、 progress、 toast、article、actionsheet、icon等各式元素。
1、引入组件
- 可以通过npm方式下载构建,npm包名为
weui-miniprogram
- 也可以通过页面按需下载
- 本文选择第二种方式
-
2、将下载的压缩包解压,导入到小程序中(解压的目录为
weui-miniprogram
)
3、在app.wxss里面引入weui.wxss
在app.wxss最上方加入下面的代码
@import './weui-miniprogram/weui-wxss/dist/style/weui.wxss';
4、使用搜索组件Searchbar
(1)index.json:在页面中引入 Searchbar搜索组件
{
"usingComponents": {
"mp-searchbar": "/weui-miniprogram/searchbar/searchbar"
},
"navigationBarTitleText": "UI组件库"
}
(2)index.wxml:在对应页面的 wxml 中直接使用该组件
<view class="page">
<view class="page__bd">
<mp-searchbar bindselectresult="selectResult" search="{{search}}"></mp-searchbar>
</view>
</view>