微信小程序开发（二）——使用WeUI组件库
标签：ogre 搜索 image 程序开发 cti 框架 代码 put return
一、前言
因为小程序的api描述都比较简单，并没有wxml及wxss的描述，一定会想小程序有没有一个UI库，类似于前端中的Bootstrap，MD，Semantic UI这样的框架UI库。有的，它就是WeUI。
WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。包含button、cell、dialog、 progress、 toast、article、actionsheet、icon等各式元素。
它的界面如图：
二、WeUI的使用方法
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>
（3）index.js：
Page({ data: { inputShowed: false, inputVal: "" }, onLoad() { this.setData({ search: this.search.bind(this) }) }, search: function (value) { return new Promise((resolve, reject) => { setTimeout(() => { resolve([{text: ‘搜索结果‘, value: 1}, {text: ‘搜索结果2‘, value: 2}]) }, 200) }) }, selectResult: function (e) { console.log(‘select result‘, e.detail) }, });
5、运行结果
微信小程序开发（二）——使用WeUI组件库
标签：ogre 搜索 image 程序开发 cti 框架 代码 put return
温馨提示: 本文由杰米博客推荐，转载请保留链接: https://www.jmwww.net/weixin/15580.html
