小程序基础开发（四）：template模板应用(1)——带搜索历史的搜索栏

一，template模板

模板
WXML提供模板（template），可以在模板中定义代码片段，然后在不同的地方调用。

定义模板
使用 name 属性，作为模板的名字。然后在内定义代码片段，如：

{ {index}}: { {msg}} Time: { {time}} 使用模板 使用 is 属性，声明需要的使用的模板，然后将模板所需要的 data 传入，如： Page({ data: { item: { index: 0, msg: 'this is a template', time: '2016-09-15' } } }) is 属性可以使用 Mustache 语法，来动态决定具体需要渲染哪个模板： odd even 模板的作用域 模板拥有自己的作用域，只能使用 data 传入的数据以及模板定义文件中定义的 模块。

二，带搜索历史的搜索栏

在template目录里写好模板的wxml

<!--模块1-搜索栏--->
<template name="SearchView">
  <view class="weui-search-bar">
    <view class="weui-search-bar__form">
      <view class="weui-search-bar__box">
        <icon class="weui-icon-search_in-box" type="search" size="14"></icon>
        <input type="text" class="weui-search-bar__input"  disabled='true' placeholder="搜索入口" bindtap="wxSearchTab"/>
      </view>
    </view>
  </view> 
  <view>{
   {
   searchValue}}</view>
</template>

引用wxSearchView组件
js

/***
 * // 定义数据格式
 * "wxSearchData":{
 *  configconfig:{
 *    style: "wxSearchNormal"
 *  },
 *  view:{
 *    hidden: true,
 *    searchbarHeght: 20
 *  }
 *  hotKeys:[],//自定义热门搜索
 *  his:[]//历史搜索关键字
 *  value
 * }
 */

// 提示集合
var __tipKeys = [];
// 搜索回调函数 
var __searchFunction = null;
// 返回函数 
var __goBackFunction = null;
// 应用变量
var __that = null;

// 初始化函数
function init(that, hotKeys, tipKeys, searchFunction, goBackFunction) {
   

  __that = that;
  __tipKeys = tipKeys;
  __searchFunction = searchFunction;
  __goBackFunction = goBackFunction;

  var temData = {
   };
  var barHeight = 43;
  var view = {
   
    barHeight: barHeight
  }
  temData.hotKeys = hotKeys;

  wx.getSystemInfo({
   
    success: function (res) {
   
      var wHeight = res.windowHeight;
      view.seachHeight = wHeight - barHeight;
      temData.view = view;
      __that.setData({
   
        wxSearchData: temData
      });
    }
  });

  getHisKeys(__that);
}

// 搜索框输入时候操作
function wxSearchInput(e) {
   
  var inputValue = e.detail.value;
  // 页面数据
  var temData = __that.data.wxSearchData;
  // 寻找提示值 
  var tipKeys = [];
  if (inputValue && inputValue.length > 0) {
   
    for (var i = 0; i < __tipKeys.length; i++) {
   
      var mindKey = __tipKeys[i];
      // 包含字符串
      if (mindKey.indexOf(inputValue) != -1) {
   
        tipKeys.push(mindKey);
      }
    }
  }
  // 更新数据
  temData.value = inputValue;
  temData.tipKeys = tipKeys;
  // 更新视图
  __that.setData({
   
    wxSearchData: temData
  });
}

// 清空输入
function wxSearchClear() {
   
  // 页面数据
  var temData = __that.data.wxSearchData;
  // 更新数据
  temData.value = "";
  temData.tipKeys = [];
  // 更新视图
  __that.setData({
   
    wxSearchData: temData
  });
}

// 点击提示或者关键字、历史记录时的操作
function wxSearchKeyTap(e) {
   
  search(e.target.dataset.key);
}

// 确任或者回车
function wxSearchConfirm