（微信小程序之坑-2）微信小程序--weui组件--Searchbar说明文档真难懂了

一、引入组件

1 、通过 useExtendedLib 扩展库 的方式引入，这种方式引入的组件将不会计入代码包大小。

在app.json中添加字段：

 "useExtendedLib": {
    "weui": true
  }

2 、在 page.json 中引入组件

{
  "usingComponents": {
    "mp-searchbar": "weui-miniprogram/searchbar/searchbar"
  }
}

二、wxml中添加组件

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

属性列表

属性	类型	默认值	必填	说明
ext-class	string		否	添加在组件内部结构的class，可用于修改组件内部的样式
focus	boolean	false	否	是否在组件开始创建的时候focus搜索输入框
placeholder	string	搜索	否	搜索输入框的placeholder
value	string		否	搜索输入框的默认值
search	function		是	输入过程不断调用此函数得到新的搜索结果，参数是输入框的值value，返回Promise实例
throttle	number	500	否	调用search函数的间隔，单位ms
cancelText	string	取消	否	取消按钮的文本
cancel	boolean	true	否	是否显示取消按钮
bindfocus	eventhandle		否	在输入框focus的时候触发事件
bindblur	eventhandle		否	在输入框blur的时候触发事件
bindclear	eventhandle		否	在clear按钮点击的时候触发事件
bindinput	eventhandle		否	在输入框输入过程中触发事件
bindselectresult	eventhandle		否	在选择搜索结果的时候触发事件

二、js中添加函数

 onLoad(options) {
 		//修改search的this指向
	      this.setData({
	        search: this.search.bind(this)
	    })
	  },
	  
  search: function (value) {
    return new Promise((resolve, reject) => {
       resolve([{text: '搜索结果', value: 1}, {text: '搜索结果2', value: 2}])
    })
 },
   // 选择结果的函数
   selectResult (e) {
       console.log('select result', e.detail)
   },

search方法
方法返回一个Promise的实例。(具体的请自行搜索，这里只简单介绍使用)
返回数据必须要包含text字段，用于展示的内容