微信小程序使用WeUI组件库搜索组件Searchbar

WeUI 是一套同微信原生视觉体验一致的基础样式库，由于功能需求这里直接使用搜索组件Searchbar

1，引入组件

可以通过npm方式下载构建，npm包名为weui-miniprogram
也可以通过页面按需下载

2，将下载的压缩包解压，导入到小程序中（解压的目录为component）

在component/searchbar.json中:

{
    "component": true,
    "usingComponents": {
        "mp-cells": "./cells",
        "mp-cell": "./cell"
    }
}

在component/cell.json中：

{
    "component": true,
    "usingComponents": {
        "mp-cells": "./cells"
    }
}

3，在page/index页面中使用

page/index/index.json中：

{
  "usingComponents": {
    "mp-searchbar": "../../component/searchbar",
  },
}

page/index/index.wxml中：

   <view class="page__bd">
        <mp-searchbar bindselectresult="selectResult" search="{{search}}"></mp-searchbar>
    </view>

page/index./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)
    },
});

就这样成功的使用了搜索组件~