apicloud搜索框的实现与踩坑

 

 

要求如下图:

 

一、实现思路:
    1、打开frame时,获取存储的数据(getStorage),放入创建的数组中,遍历该数组将item展示出来。有记录时,显示记录,没有记录时显示空;
    2、最多十条记录,记录用 setStorage 存储起来,并放在数组中,最后搜索的记录在最前面;后面搜索的记录如果之前有,删除之前的记录,在数组第一条添加。每点击一次 search (软键盘搜索键),记录一条。
    3、点击记录时,内容显示在 input 输入框中,并直接搜索;被电击的该条数据放到数组第一位。
    4、点击垃圾桶图标,清空数组和被缓存的数据

二、踩坑环节:

 

    1. 在开发中开发者在调试时缓存往往没能清空
    (我在apploader上调试没有什么好的清除缓存的方法,只有2个选择:
        第一,需要清除缓存时,代码最前加 $api.clearStorage(),同步到手机一次;然后去掉该代码,重新进入一次。

 

        第二,卸载apploader,重新安装,因为多次卸载安装,安装包先不删除。)

    2. 用户在刚刚开始使用app时,是没有任何缓存的数据的,并且没有 keyWord 这个索引值。此时打开frame 获取不到缓存会报错。对此,可以在打开frame 时setStorage传入一个缓存值,在存入数组时将该数据删除即可。

    if(!$api.getStorage('keyWord')){
	$api.setStorage('keyWord', '孍');
    }

        此处最好传入生僻字,以免用户重复到该词。

    3. 这一点是我在开发中遇到的最难受的bug,当 arrHistory 值为空时,系统判定它不为数组,所以要先将它转化成数组:

// 加载历史搜索
var searchHistory = [];
function hasHistory(){
    searchHistory = $api.getStorage('keyWord');
    if(JSON.stringify(arrHistory)=='undefined'){
        searchHistory += ' ';
        searchHistory = searchHistory.split(',');
    }
    if(searchHistory.length==1 && searchHistory[0]=='孍' || searchHistory.length==0 ||!searchHistory){
        $api.byId('history-box').innerHTML = '';
    }else{
        var historyHtml = '';
        historyHtml += '<p>'
            +'<span class="history fs14 pl5 c000">历史搜索</span>'
            +'<i class="iconfont icon-lajitongshanchu history-icon fs18" onclick="clearHistory()" Tapmode></i>'
            +'</p>'
            +'<div class="history-list fs12">';
        for(var i in arrHistory){
            historyHtml += '<span class="history-item item" onclick="historyItemToList('+i+')">'+arrHistory[i]+'</span>';
        }
        historyHtml += '</div>';
        $api.byId('history-box').innerHTML = historyHtml;
    }
}

        js代码中声明的 var arrHistory=[ ] 数组,在函数中读取到为 undefined,这是因为在刚刚进入时没有缓存值可获取。设置了刚进入就初始一个缓存值就行。

        以下代码将监听到的 关键词 存入数组并存入缓存中,此时通过arrHistory=$api.getStorage('keyWord');获取到的 arrHistory 是有问题的,不是数组类型,不能直接使用;也不是字符串类型,所以要先转化成字符串类型,再用split 转化为数组类型。再对数组进行操作,加入新的关键词到数组最前,删除不必要的关键词。

// 监听 win 页面的关键词
function listenShopKeyWord(page) {
    api.addEventListener({
        name: 'shopkeyWord'
    }, function(ret, err){
        keyWord = ret.value.keyWord;
        if(keyWord){
            document.getElementById("listData").innerHTML = '';
            searchKeyWord(keyWord, page);
            commonGetStorage(keyWord);
        }else{
            hasHistory();
        }
    });
}
// 搜索关键字
function searchKeyWord(keyWord, page){
    api.ajax({
        url: url,
        method: 'post',
        dataType: 'json',
        data: {
            values: params
        }
    },function(){
        if(ret){
            //正常处理 或 展示搜索结果
        }else{
            alert('请求错误');
        }
    });
}
// 搜索函数公用
function commonGetStorage(content){
    if($api.getStorage('SEARCH_KEY')){
        searchHistory = $api.getStorage('keyWord');
        searchHistory += '';
        searchHistory = searchHistory.split(',');
    } else {
        searchHistory = [];
    }
    // 搜索的长度
    var SEARCH_MAX_LENGTH = 10;
    insertArray(
        searchHistory,
        content,
        SEARCH_MAX_LENGTH
    );
    $api.setStorage('keyWord', searchHistory);
}
// 比较新的 keyWord 与原数组,选择添加方式
function insertArray(arr, val, maxLen) {
    // 先查找数组有没有val 值
    var index = arr.indexOf(val);
    // 如果是第一条数据就不做操作
    if (index === 0) {
        return
    }
    // 如果有 val值 就先删掉再插入
    if (index > 0) {
        arr.splice(index, 1)
    }
    // 没有就直接插入
    arr.unshift(val);
    // 去除 第一个默认历史值
    var i = arr.length-1;
    if(arr[i]=='孍'){
        arr.splice(i, 1);
    }
    if(arr[i]==''){
        arr.splice(i, 1);
    }
    // 超过数组的最大数量就把最后一个删掉
    if (maxLen && arr.length > maxLen) {
        arr.pop();
    }
}
// 点击历史搜索跳转到list
function historyItemToList(i){
    var keyWord = searchHistory[i];
    api.sendEvent({
        name: 'shopClickItem',    //然后在 win 页面监听此事件并获取到 keyWord ,将关键词放到input
        extra: {
            keyWord: keyWord
        }
    });
}
// 清除历史搜索
function clearHistory(){
    document.getElementById('listData').innerHTML = '';
    searchHistory = ['孍'];
    $api.setStorage('keyWord', []);
}

function searchKeyWord(keyWord, page){
    api.ajax({
        url: url,
        method: 'post',
        dataType: 'json',
        data: {
            values: params
        }
    },function(){
        if(ret){
            //正常处理 或 展示搜索结果
        }else{
            alert('请求错误');
        }
    });
}
// 搜索函数公用
function commonGetStorage(content){
    if($api.getStorage('SEARCH_KEY')){
        searchHistory = $api.getStorage('keyWord');
        searchHistory += '';
        searchHistory = searchHistory.split(',');
    } else {
        searchHistory = [];
    }
    // 搜索的长度
    var SEARCH_MAX_LENGTH = 10;
    insertArray(
        searchHistory,
        content,
        SEARCH_MAX_LENGTH
    );
    $api.setStorage('keyWord', searchHistory);
}
// 比较新的 keyWord 与原数组,选择添加方式
function insertArray(arr, val, maxLen) {
    // 先查找数组有没有val 值
    var index = arr.indexOf(val);
    // 如果是第一条数据就不做操作
    if (index === 0) {
        return
    }
    // 如果有 val值 就先删掉再插入
    if (index > 0) {
        arr.splice(index, 1)
    }
    // 没有就直接插入
    arr.unshift(val);
    // 去除 第一个默认历史值
    var i = arr.length-1;
    if(arr[i]=='孍'){
        arr.splice(i, 1);
    }
    if(arr[i]==''){
        arr.splice(i, 1);
    }
    // 超过数组的最大数量就把最后一个删掉
    if (maxLen && arr.length > maxLen) {
        arr.pop();
    }
}
// 点击历史搜索跳转到list
function historyItemToList(i){
    var keyWord = searchHistory[i];
    api.sendEvent({
        name: 'shopClickItem',    //然后在 win 页面监听此事件并获取到 keyWord ,将关键词放到input
        extra: {
            keyWord: keyWord
        }
    });
}
// 清除历史搜索
function clearHistory(){
    document.getElementById('listData').innerHTML = '';
    searchHistory = ['孍'];
    $api.setStorage('keyWord', []);
}

    因为 searchHistory 为空会报错,所以只能赋个偏僻字,用 $api.setStorage('keyWord', []); 而不用 clearStorage 清空缓存是因为 app 中缓存往往不止这一类。

    最后,感觉自己目前写的这些并不令人满意,待有更高质量的代码再来更新。同行如果有更好的方法,希望留言一起探讨,一起进步。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值