微信小程序关键字搜索

1. 首先是在搜索页面获取到关键字，之后作为请求参数wx.request进行请求与数据处理

2. 在util.js内获取到所有数据之后，在众多数据中通过RegExpObject.test(string)实现关键字的遍历匹配

    //util.js
    if (data.hasOwnProperty('key')) { //如果请求参数是key
    const media = res.data;
    for (let i in media) { //遍历匹配电影名
        for (let j in media[i]) {
            var re = new RegExp(data.key);
            if (re.test(media[i][j].title)) {
                returnRes.push(media[i][j]); //得到匹配好的电影
            }
        }
    }
    resolve(returnRes)
    return;
    }
    resolve(returnRes)
   

3. 搜索页面使用wx.request得到数据之后，搜索结果列表一项一项就可以显示出来。重点是(敲黑板),一般来说点击哪一项，在搜索结果页面那一项就会排在最上面，那我就想要不然再建一个由点击的的那一项作为第一项的查询结果数组，将它存在本地然后在下一个页面取出并显示！

    //search.js
    clickResult: function(e) {
    let index = e.currentTarget.dataset.num; //点击了第几项
    let searchVal = this.data.searchVal; //关键词
    let StorageResult = []; // 用于存在本地的数组
   
    let temp = [];
    const result = this.data.result;
   
    for (let i = 0; i < result.length; i++) {
        if (i == index) {
            temp = result.splice(i, 1); //取出点击的那一项
        }
    }
    StorageResult = temp;
    for (let i in result) {
        StorageResult = [...StorageResult, result[i]] //将点击的那一项作为数组首位，其他搜索结果再依次放入
    }
    wx.setStorage({ //在本地缓存搜索结果
        key: 'searchResult',
        data: StorageResult,
        success: function(res) {
            wx.navigateTo({
                url: `search-result/search-result?key=${searchVal}` //跳转到下一个页面
            })
        }
    })
    }
   

4. 另外，搜索结果会顺带把集数罗列出来，那就需要实现点哪集就在视频详情页定位到哪集的功能

• 先在wxml里通过data-把id、集数、标题传到下一个页面，在onload里头获取集数

    //video-detail.js
    onLoad: function(option) {
    this.setData({
        video_id: option.id,
        mediaList: null,
    })
    wx.setNavigationBarTitle({ //设置导航条名称
        title: option.title
    })
    if (option.hasOwnProperty('num')) { //调用请求资源方法传入集数
        this.requestVideo(option.num);
    } else {
        this.requestVideo();
    }
    }
  

• 请求所有视频资源之后并遍历，把当前播放地址设为选中的那集

    requestVideo: function(num = 0) { //没有选择集数，则集数默认是0
    util.request({
           ...(略)
        })
        .then(res => {
            this.setData({
                    mediaList: res,
                    isLoading: false,
                    playerUrl: res.drama_num[num].video_url //修改播放地址
                })
            this.pickNum(num); //改变集数选择状态
        })
    }
  

• 用于改变集数选择状态

    pickNum: function(num) {
    for (let i of mediaList.drama_num) {
        i.selected = parseInt(i.drama_id) === parseInt(num) + 1 //如果选择的集数与视频资源的id一样就改变该集的选中状态
        if (i.selected) {
            playerUrl = i.video_url
        }
    }
    this.setData({
            mediaList,
            playerUrl
        })
    }