引言
現在的前端有各種各樣的新知識和新框架,小程式才出生幾年,就已經火到這種程度了,所以作為前端學習者,這個新技能我們是一定要儘快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兩個主流的框架,對於我們這些前端來說,要學的東西太多了,每天都在學習新東西。社群是個好地方,有問題,大家一起解決,有好東西,大家一起分享。寫文章的確挺累的,但是也挺值的。