先放个程序员的老婆

诸君，拔剑吧

言归正传

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

准备工作

编辑器 : 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.jsdata: {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.jssearch: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){// successthat.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){// successthat.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) {// failconsole.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){// successthat.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

湖人总冠军