本篇内容主要讲解“拉勾小程序如何开发”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“拉勾小程序如何开发”吧!
计算
安全
数据库
网络和加速
企业服务
拉勾里面有非常多的数据，所以我在easy mock里面创建了很多接口，在页面需要用到的时候去
请求数据，如果每一次都要用wx.request，而且到处都是异步请求，处理时会遇到很多的麻烦，
es6中的promise可以将异步变成同步(vue中的async和await也可以)，封装一个request在以后
的开发中也用得到的封装的request
function request(params) {
return new Promise((resolve, reject) => {
wx.request({
url: params.url,
method: params.method || 'get',
data: params.data,
header: {
'content-type': 'application/json'
},
success: resolve,
error: err => {
console.log("请求出错:" + err.errMsg);
}
})
})
}
export default request》import request from '../../utils/request.js'
需要请求数据引入request.js查看页面详情就是讲你点击的那个id传过去，但是我在这里遇到了一个坑，我在寻找点击的那个id的详情时，发现我匹配不了我的数据，后来我一步一步打印找事哪一步有问题，发现我用easymock造的数据，传的id是个字符串而不是数字，所以我将传过来id转化成数字在去进行匹配，得到了想要点击的详情页。
getActive(id) {
const url = 'https://www.easy-mock.com/mock/5b06da4872643c7a5c4edcd1/api/desc#!method=get';
var params = {
url: url,
method: 'GET',
};
let position = [];
let currentDesc = this.data.currentDesc;
request(params).then(res => { //异步变同步
position = res.data.data.position;
}).then(() => {
for (let i = 0; i < position.length; i++) {
if (i === id) {
let that = this;
that.setData({
currentDesc: position[i]
})
console.log(that.data.currentDesc)
}
}
}
);
},
onLoad: function (options) {
let id = options.id - 0; //将id转化成number
this.getActive(id); //请求数据匹配id
},因为是用markdown造的假数据，数据不是很多，而且这不是像有后端的那样，可以传给后端参数，让后端给你提供符合的数据，所以还是得要自己干。刚开始实现时，第一时间想到的是用indexOf()去判断，如果不含有我输入的字符串，就返回-1，通过这点去判断。写这个只要知道大概的想法，一般是不怎么会出错的。
onInput(e) {
let value = e.detail.value;
// console.log(value);
const job = this.data.job;//匹配的数组
var list = [];
for(var i = 0; i < job.length; i++){
if(job[i].indexOf(value)>-1){//不包含value就返回-1
list.push(job[i]);
}
}
this.setData({
list: list,
['search.content']: value
});
},我这一部分之前是有小bug的，页面从后一个页面回来时，搜索的记录会变成历史记录，同时搜索的值还会在input上，但是同样列表还显示在下面，这样就会造成用户体验及不良好，所以我给整个的搜索匹配到的列表一个三元运算符，点击跳转之前就会将其设为false，然后列表就会隐藏起来，从后一个页面返回时也不会出现那种状况。
<view class="item-lists {{isShoeLists?'hidden':''}}"><view class="weui-cell border-botton" wx:for="{{list}}" wx:key="index" bindtap="positionSearch" data-index="{{index}}"><view class="weui-cell__hd "><image src="../../images/job-search-pic.png" style="margin-right: 5px;vertical-align: middle;width:30px; height: 30px;"></image></view><view class="weui-cell__bd job-desc">{{item}}</view><view class="weui-cell__ft"></view></view></view>positionSearch(e) {
// console.log(e)
let list = this.data.list
let index = e.currentTarget.dataset.index;
let value = list[index];
let history = this.data.history;
history.push(value); //将搜索的记录放入到历史搜索中
this.setData({
['search.content']: value,
history,
isShowLists: true // 将lists隐藏
})
wx.navigateTo({
url: `../related/related?value=${value}`,
})
},请勿在scroll-view之中使用 textarea、map、canvas、video
scroll-into-view的优先级高于scroll-view
scroll-view需要给scroll-view一个固定的宽度或高度，设置属性scroll-x或scroll-y,并且设置样式white-space:nowrap;（这个很重要，不设置这个样式，无法完成scroll-view的效果
如果要下拉刷新时，请使用scroll-view组件自带的方法，在scroll-view中滚动是不会触发onPullDownRefresh事件的
跳转页面的时候，可以通过navigateTo将要传递参数放在url上，但是返回原页面时，就得换过一种传参方法。一种是在app.js中设置golbaldata，然后在你想要传值的地方去设置golbaldata就可以了，或者你将数据储存在stroage里面。还有一种就是 getCurrentPages() ，getCurrentPages() 函数用于获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面。
不要尝试修改页面栈，会导致路由以及页面状态错误。
changecity(e) {
var value = e.target.dataset.value;
var pages = getCurrentPages();
var currPage = pages[pages.length - 1]; //当前页面
var prevPage = pages[pages.length - 2]; //上一个页面
prePage.setData({
location: value,
city: value
});
wx.navigateBack({
delta: 1
})
},用weui去写微信小程序去写节省我们一部分的时间。这个功能这里也有一个需要将值传回来的，我在这里是将参数传入stroage里面，因为我想换一种方式去实现。在个人信息中，有一个表单验证，在这里，我除了一个大亏。先贴代码，看看我写的表单验。
<view class="container">
<view class="weui-cells weui-cells_after-title name"><view class="weui-cell weui-cell_input"><view class="weui-cell__hd"><view class="weui-label">真实姓名</view></view><view class="weui-cell__bd"><input class="weui-input name-input" type="text" value="{{val}}" bindinput="nameChange" placeholder="请输入" /></view></view></view><view class="weui-cells weui-cells_after-title name"><view class="weui-cell weui-cell_input"><view class="weui-cell__bd">性别</view><view class="weui-cell__ft"><picker bindchange="bindSexChange" value="{{index}}" range="{{arraySex.sex}}" class="name-input"><view class="selectPick" wx:if="{{!arraySex.isPickSelect}}"><text>请选择</text></view><view wx:else class="picker">{{arraySex.sex[arraySex.index]}}
</view></picker></view></view></view><view class="weui-cells weui-cells_after-title name"><view class="weui-cell weui-cell_input"><view class="weui-cell__bd">出生日期</view><view class="weui-cell__ft"><picker mode="date" value="{{date}}" start="1949-10-01" end="2018-06-01" bindchange="bindDateChange"><view class="picker">{{date}}
</view></picker></view></view></view><view class="weui-cells weui-cells_after-title name"><view class="weui-cell weui-cell_input"><view class="weui-cell__bd">最高学历</view><view class="weui-cell__ft"><picker bindchange="bindEducationChange" value="{{index}}" range="{{arrayEducation.education}}"><view class="selectPick" wx:if="{{!arrayEducation.isPickSelect}}"><text>请选择</text></view><view wx:else class="picker">{{arrayEducation.education[arrayEducation.index]}}
</view></picker></view></view></view><view class="weui-cells weui-cells_after-title name"><view class="weui-cell weui-cell_input"><view class="weui-cell__bd">工作经验</view><view class="weui-cell__ft"><picker bindchange="bindExperienceChange" value="{{index}}" range="{{arrayExperience.experience}}"><view class="selectPick" wx:if="{{!arrayExperience.isPickSelect}}"><text>请选择</text></view><view wx:else class="picker">{{arrayExperience.experience[arrayExperience.index]}}
</view></picker></view></view></view><view class="weui-cells weui-cells_after-title name"><view class="weui-cell weui-cell_input"><view class="weui-cell__hd"><view class="weui-label">手机号码</view></view><view class="weui-cell__bd"><input class="weui-input name-input" type="number" value="{{val}}" bindinput="telChange" placeholder="请输入" /></view></view></view><view class="weui-cells weui-cells_after-title name"><view class="weui-cell weui-cell_input"><view class="weui-cell__hd"><view class="weui-label">联系邮箱</view></view><view class="weui-cell__bd"><input class="weui-input name-input" type="email" value="{{val}}" bindinput="mailChange" placeholder="请输入" /></view></view></view><view class="weui-cells weui-cells_after-title name"><view class="weui-cell weui-cell_input"><view class="weui-cell__bd">所在城市</view><view class="weui-cell__ft" bindtap="cityChange"><view wx:if="{{!isChooseCity}}" class="changeCity"><text>请选择</text></view><view wx:else class="changeCity">{{city}}</view></view></view></view><view class="bgft"><view class="introduction"><view class="intro"><text>一句话介绍自己</text><view class="wordNum">{{num}}/60</view></view><view>
<textarea placeholder="说出你的心声" value="{{value}}" maxlength="60" class="input" bindinput="inputChange" /></view></view><button class="btnEdit" bindtap="formSubmit">保存</button></view>
</view>formSubmit(e) {
//验证是否输入名字
let nameVal = this.data.nameVal;
if (!this.errorInput(nameVal, '请输入你的名字')) {
return false;
};
console.log(nameVal)
//验证是否选择性别
let sex = this.data.arraySex.sex[this.data.arraySex.index];
if (!this.error(this.data.arraySex.isPickSelect, '请选择你的性别')) {
return false;
};
console.log(sex)
//验证是否选择了出生日期
let date = this.data.date;
if (date === '1999-01-01') {
w到此，相信大家对“拉勾小程序如何开发”有了更深的了解，不妨来实际操作一番吧！这里是亿速云网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
