引言
现在的前端有各种各样的新知识和新框架,小程序才出生几年,就已经火到这种程度了,所以作为前端学习者,这个新技能我们是一定要尽快get到的。学习小程序最好的方法就是自己手写一个小程序,能从中找到自己的不足之处。于是我便萌发了一个新想法,自己手撸一个拉勾小程序。刚开始的时候,起步是有点难的,不知道怎么把学的东西转化成自己想要写的东西,但谢了一点后,感觉有点入迷了,停不下来。希望我写的东西能够帮助社区的学习者,如果写的不好,也欢迎你指正。
开发工具与资源平台
- 微信web开发者工具:用于敲网页代码,但是最主要用来进行手机效果预览。
- VsCode:主要用于布局排版,也是敲代码的主战场,真心觉得这个编辑器不错,快捷输入和排版,大大提高了开发效率,使用简单,一学就会。
- Iconfont-阿里巴巴矢量图标库:提供项目中的所有图标,资源丰富。
- 微信小程序开发者文档:微信小程序开发的文档,资源库,以及API规范
- Easy Mock: 可以模拟我们想要的数据,非常方便。这里是部分数据
功能展示
数据请求
拉勾里面有非常多的数据,所以我在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会碰到的问题
- 请勿在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__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="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(experience)
let tel = this.data.telVal;
if (!this.errorInput(tel, '请输入手机号码')) {
return false;
}
if (!/1[3456789][0-9]{9}/.test(tel.trim())) {
wx.showModal({
title: '系统提示',
content: '手机号码格式有误',
showCancel: false,
duration: 1500,
success: () => { }
})
return;
}
wx.setStorage({
key: "personal",
data: [{ name: nameVal },
{ sex: sex},
{ date: date },
{ education: education},
{ experience: experience},
{ tel: tel },
{ mail: mail },
{ inputVal: inputVal },
],
success: function () {
wx.showToast({
title: "保存成功",
icon: 'success',
duration: 2000
})
setTimeout( function(){
wx.navigateTo({
url: "../resume/resume"
})
}, 1000);
}
})
},
//下面是验证表单 封装的两个函数
errorInput(val, errorMsg) {//是否输入
if (val.trim() === '') {
// console.log(errorMsg);
wx.showModal({
title: '系统提示',
content: errorMsg,
showCancel: false,
duration: 1500,
success: () => {
}
})
return false;
} else {
return true;
}
},
error(isShow, errorMsg) {//是否选择
if (!isShow) {
wx.showModal({
title: '系统提示',
content: errorMsg,
showCancel: false,
duration: 1500,
success: () => { }
})
return false;
} else {
return true;
}
},
我写了两个函数去判断需要输入和需要选择的操作有没有完成(errorInput,error),如果没有完成,就返回errorMsg,但是我这两个函数是返回false的,我当初在写的时候,没有在意,就一直卡住了,后来才发现我函数执行的返回值是false,执行这两个函数d的地方应该再对返回的值做判断。当然也可以使用其他方法去验证表单,比如中介者模式
功能还有一部分没有写出来,还有一部分没有做出来,如果我的描述中有什么错误的话,欢迎指正,我们这群程序猿就是在bug中提升自己的。如果你想对我的项目想要了解更多, 可以查看我的项目
想说
现在的前端技术更新的太快了,去年刚火的小程序,就推出了mpvue和wepy两个主流的框架,对于我们这些前端来说,要学的东西太多了,每天都在学习新东西。社区是个好地方,有问题,大家一起解决,有好东西,大家一起分享。写文章的确挺累的,但是也挺值的。