打开小程序之门，“拉勾”之约

最新推荐文章于 2025-08-22 13:45:39 发布

weixin_34211761

最新推荐文章于 2025-08-22 13:45:39 发布

阅读量133

点赞数 1

CC 4.0 BY-SA版权

文章标签： java 前端 ViewUI

原文链接：https://segmentfault.com/a/1190000015243935

本文分享了一款拉勾小程序的开发经验，包括界面设计、跳转详情页、搜索功能及历史记录保存等方面的技术细节。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先放个程序员的老婆

图片描述

诸君，拔剑吧

言归正传

接触了小程序，发现还是挺有意思的，学习过程中也写写项目，那这次呢就写了一个拉勾小程序，
来聊一聊踩到的坑，以及如何跳出坑，说不定对你有些帮助，来看看

准备工作

编辑器 : visual studio code 和 微信开发者公工具
数据来源 : 那当然是用easy-mock随便瞎编的数据啦

那就来聊聊写了些什么吧

首先看看界面吧

图片描述

来一起爬坑和实现某些功能吧

界面的坑
如何跳转详情页
搜索
历史搜索记录数据的保存
历史记录搜索
猜你喜欢

1. 界面的坑

这个坑真是不踩不知道，点击搜索框跳转进搜索界面，那么点击取消返回直接使用navigateTo 跳转界面? no no no ,navigate不能跳转到tabbar界面,这里我使用的是navigateBack

wx.navigateBack({
  delta:1
})
delta返回的页面数，如果 delta 大于现有页面数，则返回到首页。

当然还有switchTab等方法，详细可以参考小程序开发指南


小提示：其次界面上除非特定的位置，否则尽量避免使用position进行定位，毕竟段落或长或短，
使用position可能就会出现文字覆盖文字的情况

2. 再来说说如何跳转详情页

先来看看效果图（电脑反应有点迟钝，有些界面需要等待才加载完，哭唧唧）

图片描述

那么是怎么实现的呢？首先来看看代码吧，毕竟是灵魂

index.wxml

<view class="post-recommend-list" wx:for="{{job}}" wx:key="index" bindtap="navigateTap" data-index="{{index}}">
    <image mode="aspectFill" class="recommend-detail_image" src="{{item.image}}"></image>                  
    <text class="list_job">{{item.job}}</text>
    <text class="list_money">{{item.money}}</text>
    <text class="list_company">{{item.company}}</text>
    <text class="list_address">{{item.address}}</text>
    <text class="list_exp">{{item.exp}}</text>
    <text class="list_education">{{item.education}}</text>
    <text class="list_date">{{item.date}}</text>
</view>

index.js
首先请求easymock中的假数据
onReady:function(){
wx.request({
  url:'https://www.easy-mock.com/mock/5b15fb5b9ab69517fa2acb43/lagou/lagou#!method=get',
  success:(res)=>{
    this.setData({
      job:res.data.data.jobs
    });
    
  }
})
},

实现跳转详情页代码
navigateTap:function(e){
var index=e.currentTarget.dataset.index;
var detail=this.data.job[index];
app.globalData.detail=detail;
console.log(app.globalData.detail)
this.setData({
  detail:detail
})
// console.log(de)
wx.navigateTo({
  url: '../detail/detail',
})
}

那么就来解读下吧
设计原理是将每个index上的view设定一个bindtap事件，当点击view时触发，同时获取触发事件，将事件发生
时获取到的信息存储到app.js中。
首先在index.js中引入app.js ,
const app = getApp()
在app.js中设置一个空数组detail:[],用detail:[]来存储所获取到的信息

  globalData: {
  detail:[],
  details:[],
  userInfo: null
  }

接下来说说这触发时发生了什么

  var index=e.currentTarget.dataset.index;
  <view class="post-recommend-list" wx:for="{{job}}" wx:key="index" bindtap="navigateTap"     
  data-index="{{index}}">

设定data-index="{{index}"就是去获取currentTarget的下标，获取到下标之后将获取到的信息存储在某个数组中

var detail=this.data.job[index];

app的detail:[]再去获取触发事件时得到的数组

app.globalData.detail=detail;

然后后setData一下，
最后detail.js文件下获取下数据就OK了
onReady: function () {

this.setData({
  jobb:app.globalData.detail
})
},

3. 搜索

先来看看效果图
图片描述
实现了搜索工作种类、工作地点、公司名称、在无输入下进行提示、搜索不到信息的提示
那就再来先看看代码吧

search.wxml


 <view class="search-top-input">
 <input type="text" placeholder="搜索公司/职位" auto-focus="true" value="{{inputsearch}}" 
      bindconfirm="search"
      bindinput="inputSearchTap"
      data-index="{{index}}"/>
</view>

search.js

data: {

inputsearch:'',
job:[],
newSearch:[],
},
 
 inputSearchTap:function(e){
  let inputsearch =e.detail.value;
  this.setData({
    inputsearch
  })
  },

search:function(e){
var sear =this.data.inputsearch;
var jobs=this.data.job;
var input = new RegExp(sear);
var temp = [];
if(sear == ''){
  wx.showToast({
    title: '请输入要搜索信息',
    icon:"none",
    duration: 1000
  });
 return false;
}
  for(let i =0;i<jobs.length;i++){
 if(input.test(jobs[i].job) || input.test(jobs[i].company) || input.test(jobs[i].address){
      
      temp.push(jobs[i]);
    var detail=temp;
    app.globalData.details=detail;
    }

  } 
  if(temp ==''){
     wx.showToast({
    title: '暂无此信息',
    icon:"none",
    duration: 1000
  });
  }else if(temp){
    wx.navigateTo({
      url:'../about/about'
    })
  }
}
this.setData({
  newSearch:temp,
})

}

定义一个sear去获取input输入框中的值，

var sear =this.data.inputsearch;

再使用正则去匹配输入的值,详情请看RegExp

var input = new RegExp(sear);

定义空数组temp

 var temp = [];

如果输入的是空，弹窗提示

if(sear == ''){
  wx.showToast({
    title: '请输入要搜索信息',
    icon:"none",
    duration: 1000
  });
 return false;
}

如果输入了值，则进行匹配，将匹配到的信息存放在app.js中的details[]中

    for(let i =0;i<jobs.length;i++){
 if(input.test(jobs[i].job) || input.test(jobs[i].company) || input.test(jobs[i].address){
      
      temp.push(jobs[i]);
    var detail=temp;
    app.globalData.details=detail;
    }

  }

如果没查询到则提示

if(temp ==''){
         wx.showToast({
        title: '暂无此信息',
        icon:"none",
        duration: 1000
      });

查询到则跳转

else if(temp){
    wx.navigateTo({
      url:'../about/about'
    })
  }

这样就实现了搜索功能了，bindconfirm在input组件中可实现手机软键盘中的回车事件，详情看小程序开发指南小程序开发指南

4. 再说说历史搜索

历史搜索是个很方便用户的体验，在需要用到搜索的地方必不可少了，所以怎么去实现呢？
代码部分

    search.wxml
    
      <view class="search-history" wx:if="{{status}}">
        <view class="search-history-title">
              <text>历史搜索</text>
              <image src="../../images/delete.png" bindtap="deleteHistory"></image>
        </view>
        <view class="search-history-detail" >
              <view class="history-detail" wx:for="{{history}}" wx:key="{{item}}" 
              bindtap="historySearch" data-index="{{index}}">
                    <text class="detail" >{{item}}</text>
              </view>
        </view>
  </view>
  
  search.js
      
      
   search:function(e){
var that =this;
var sear =this.data.inputsearch;
var jobs=this.data.job;
var input = new RegExp(sear);
var temp = [];
if(sear == ''){
  wx.showToast({
    title: '请输入要搜索信息',
    icon:"none",
    duration: 1000
  });
 return false;
}else{
   this.data.history.unshift(sear);
wx.setStorage({
  key: 'history',
  data: that.data.history,
  success: function(res){
    // success
    that.setData({
      history:that.data.history,
      status:true
    })
    console.log(res.data);
  },
})
  for(let i =0;i<jobs.length;i++){

    if(input.test(jobs[i].job) || input.test(jobs[i].company) || input.test(jobs[i].address)){
      
      temp.push(jobs[i]);
    var detail=temp;
    app.globalData.details=detail;
    }

  } 
  if(temp ==''){
     wx.showToast({
    title: '暂无此信息',
    icon:"none",
    duration: 1000
  });
  }else if(temp){
    wx.navigateTo({
      url:'../about/about'
    })
  }
}
this.setData({

  newSearch:temp,
})

},
那么怎么将搜索记录保存在本地呢？
这里使用了小程序的本地保存数Storage，这样每次登陆就可以保存有上次登陆搜索过的历史记录了
小程序开发手册中的介绍小程序指南中的Storage,
看了指南如何用setStorage去存储数据，但是发现每次存储之后会将上一次的key值的数据覆盖掉，那么怎么办呢？
有了，可以去定义一个空数组去存储setStorage中的值吗？
好的，那么怎么去获取呢？再定义一个空数组去获取吗？最后再将第二个数组push进去吗？
显然不行，当定义了两个数组时你会发现多次搜索后存储在key中的值就会是这样的

Array(2)
    0:{
        0:"前端"，
        1:"java"
        }
    1:"深圳"
    length:2

后续搜索的历史记录都存到Array[0]中了
而实际上历史记录上需要展示的搜索记录数组的存储是这样的

    Array(2)
        0:"前端"，
        1:"java"  
        2:"深圳"
        length:3

那么怎么在setStorage和getStorage中去实现不被覆盖而又能不存储到Array[0]中？
首先去获取storage中key:"history"的数据，将获取到的值直接返回给history，而不是返回给另外一个数组,这样history就获取到了本地缓存的数据

onLoad: function (options) {
var that =this;
wx.getStorage({
  key: 'history',
  success: function(res){
    // success
    that.setData({
      history:res.data,
      // sear_his:res.data
    })
    if(that.data.history.length==0){
      that.setData({
        status:false
       
      });
    }else{
      that.setData({
        status:true
      })
     }
  },
  fail: function(res) {
    // fail
    console.log(res+'aaaaa')
  }
});

},
使用setStorage api放到search中，将key值设置为history，当sear输入时进行判断，如果为空值则不进行存储，不是空值则使用unshift将输入的搜索值添加到history数组中的第一项,这样就不会被覆盖了，解决了value被覆盖的问题

if(sear == ''){
  wx.showToast({
    title: '请输入要搜索信息',
    icon:"none",
    duration: 1000
  });
 return false;
}else{
   this.data.history.unshift(sear);
wx.setStorage({
  key: 'history',
  data: that.data.history,
  success: function(res){
    // success
    that.setData({
      history:that.data.history,
      status:true
    })
    console.log(res.data);
  },

历史记录的删除

图片描述

当然是将本地缓存删除啦

实现代码

  deleteHistory(){
var that=this;
const status=this.data.status;
wx.showModal({
 
  content:'确定删除全部搜索历史？',
  confirmText:'全部删除',
  success:function(res){
    if(res.confirm){ 
      wx.removeStorage({
        key: 'history',
        success: function(r){
          that.setData({
            status:false,

            history:[]
          })
        },
      })
    console.log(status);
    }else if(res.cancel)
    {
      that.setData({
      
          status:true
      })
    } 
  }
})
},

猜你喜欢

图片描述
实现代码

  likeSearch(e){
var index=e.currentTarget.dataset.index;
var detail=this.data.like[index];
var input = new RegExp(detail);
console.log(detail);
var temp = [];
var jobs=this.data.job;
for(let i =0;i<jobs.length;i++){
if(input.test(jobs[i].job) || input.test(jobs[i].company) || input.test(jobs[i].address)){
  temp.push(jobs[i]);
    var details=temp;
    app.globalData.details=details;
  }
}

if(temp ==''){
  wx.showToast({
 title: '暂无此信息',
 icon:"none",
 duration: 1000
   });
   }else if(temp){
 wx.navigateTo({
   url:'../about/about'
 })
}

最后

感谢看完文章，小程序之路是一条坎坷的路，虽然路上有许多磕绊，但最后是有所斩获的。
成功是多么美妙的一件事。
互联网日新月异，需要你我共同努力，相互分享，
如果你觉得文章还OK
那么请点个赞吧

博客地址使劲点这
获取源码请点击github
谢谢你的Star

湖人总冠军

图片描述