摘要:于是我便萌發(fā)了一個(gè)新想法,自己手?jǐn)]一個(gè)拉勾小程序。開發(fā)工具與資源平臺(tái)微信開發(fā)者工具用于敲網(wǎng)頁代碼,但是最主要用來進(jìn)行手機(jī)效果預(yù)覽。微信小程序開發(fā)者文檔微信小程序開發(fā)的文檔,資源庫,以及規(guī)范可以模擬我們想要的數(shù)據(jù),非常方便。
引言
現(xiàn)在的前端有各種各樣的新知識(shí)和新框架,小程序才出生幾年,就已經(jīng)火到這種程度了,所以作為前端學(xué)習(xí)者,這個(gè)新技能我們是一定要盡快get到的。學(xué)習(xí)小程序最好的方法就是自己手寫一個(gè)小程序,能從中找到自己的不足之處。于是我便萌發(fā)了一個(gè)新想法,自己手?jǐn)]一個(gè)拉勾小程序。剛開始的時(shí)候,起步是有點(diǎn)難的,不知道怎么把學(xué)的東西轉(zhuǎn)化成自己想要寫的東西,但謝了一點(diǎn)后,感覺有點(diǎn)入迷了,停不下來。希望我寫的東西能夠幫助社區(qū)的學(xué)習(xí)者,如果寫的不好,也歡迎你指正。
開發(fā)工具與資源平臺(tái)微信web開發(fā)者工具:用于敲網(wǎng)頁代碼,但是最主要用來進(jìn)行手機(jī)效果預(yù)覽。
VsCode:主要用于布局排版,也是敲代碼的主戰(zhàn)場(chǎng),真心覺得這個(gè)編輯器不錯(cuò),快捷輸入和排版,大大提高了開發(fā)效率,使用簡(jiǎn)單,一學(xué)就會(huì)。
Iconfont-阿里巴巴矢量圖標(biāo)庫:提供項(xiàng)目中的所有圖標(biāo),資源豐富。
微信小程序開發(fā)者文檔:微信小程序開發(fā)的文檔,資源庫,以及API規(guī)范
Easy Mock: 可以模擬我們想要的數(shù)據(jù),非常方便。這里是部分?jǐn)?shù)據(jù)
預(yù)覽圖片
功能展示 數(shù)據(jù)請(qǐng)求拉勾里面有非常多的數(shù)據(jù),所以我在easy mock里面創(chuàng)建了很多接口,在頁面需要用到的時(shí)候去 請(qǐng)求數(shù)據(jù),如果每一次都要用wx.request,而且到處都是異步請(qǐng)求,處理時(shí)會(huì)遇到很多的麻煩, es6中的promise可以將異步變成同步(vue中的async和await也可以),封裝一個(gè)request在以后 的開發(fā)中也用得到的
封裝的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("請(qǐng)求出錯(cuò):" + err.errMsg); } }) }) } export default request
》import request from "../../utils/request.js" 需要請(qǐng)求數(shù)據(jù)引入request.js查看頁面詳情
查看頁面詳情就是講你點(diǎn)擊的那個(gè)id傳過去,但是我在這里遇到了一個(gè)坑,我在尋找點(diǎn)擊的那個(gè)id的詳情時(shí),發(fā)現(xiàn)我匹配不了我的數(shù)據(jù),后來我一步一步打印找事哪一步有問題,發(fā)現(xiàn)我用easymock造的數(shù)據(jù),傳的id是個(gè)字符串而不是數(shù)字,所以我將傳過來id轉(zhuǎn)化成數(shù)字在去進(jìn)行匹配,得到了想要點(diǎn)擊的詳情頁。
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轉(zhuǎn)化成number this.getActive(id); //請(qǐng)求數(shù)據(jù)匹配id },搜索
因?yàn)槭怯胢arkdown造的假數(shù)據(jù),數(shù)據(jù)不是很多,而且這不是像有后端的那樣,可以傳給后端參數(shù),讓后端給你提供符合的數(shù)據(jù),所以還是得要自己干。剛開始實(shí)現(xiàn)時(shí),第一時(shí)間想到的是用indexOf()去判斷,如果不含有我輸入的字符串,就返回-1,通過這點(diǎn)去判斷。寫這個(gè)只要知道大概的想法,一般是不怎么會(huì)出錯(cuò)的。
onInput(e) { let value = e.detail.value; // console.log(value); const job = this.data.job;//匹配的數(shù)組 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的,頁面從后一個(gè)頁面回來時(shí),搜索的記錄會(huì)變成歷史記錄,同時(shí)搜索的值還會(huì)在input上,但是同樣列表還顯示在下面,這樣就會(huì)造成用戶體驗(yàn)及不良好,所以我給整個(gè)的搜索匹配到的列表一個(gè)三元運(yùn)算符,點(diǎn)擊跳轉(zhuǎn)之前就會(huì)將其設(shè)為false,然后列表就會(huì)隱藏起來,從后一個(gè)頁面返回時(shí)也不會(huì)出現(xiàn)那種狀況。
{{item}}
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會(huì)碰到的問題
請(qǐng)勿在scroll-view之中使用 textarea、map、canvas、video
scroll-into-view的優(yōu)先級(jí)高于scroll-view
scroll-view需要給scroll-view一個(gè)固定的寬度或高度,設(shè)置屬性scroll-x或scroll-y,并且設(shè)置樣式white-space:nowrap;(這個(gè)很重要,不設(shè)置這個(gè)樣式,無法完成scroll-view的效果
如果要下拉刷新時(shí),請(qǐng)使用scroll-view組件自帶的方法,在scroll-view中滾動(dòng)是不會(huì)觸發(fā)onPullDownRefresh事件的
頁面回退傳值跳轉(zhuǎn)頁面的時(shí)候,可以通過navigateTo將要傳遞參數(shù)放在url上,但是返回原頁面時(shí),就得換過一種傳參方法。一種是在app.js中設(shè)置golbaldata,然后在你想要傳值的地方去設(shè)置golbaldata就可以了,或者你將數(shù)據(jù)儲(chǔ)存在stroage里面。還有一種就是 getCurrentPages() ,getCurrentPages() 函數(shù)用于獲取當(dāng)前頁面棧的實(shí)例,以數(shù)組形式按棧的順序給出,第一個(gè)元素為首頁,最后一個(gè)元素為當(dāng)前頁面。
不要嘗試修改頁面棧,會(huì)導(dǎo)致路由以及頁面狀態(tài)錯(cuò)誤。
changecity(e) { var value = e.target.dataset.value; var pages = getCurrentPages(); var currPage = pages[pages.length - 1]; //當(dāng)前頁面 var prevPage = pages[pages.length - 2]; //上一個(gè)頁面 prePage.setData({ location: value, city: value }); wx.navigateBack({ delta: 1 }) },編輯簡(jiǎn)歷
用weui去寫微信小程序去寫節(jié)省我們一部分的時(shí)間。這個(gè)功能這里也有一個(gè)需要將值傳回來的,我在這里是將參數(shù)傳入stroage里面,因?yàn)槲蚁霌Q一種方式去實(shí)現(xiàn)。在個(gè)人信息中,有一個(gè)表單驗(yàn)證,在這里,我除了一個(gè)大虧。先貼代碼,看看我寫的表單驗(yàn)。
真實(shí)姓名 性別 請(qǐng)選擇 {{arraySex.sex[arraySex.index]}} 出生日期 {{date}} 最高學(xué)歷 請(qǐng)選擇 {{arrayEducation.education[arrayEducation.index]}} 工作經(jīng)驗(yàn) 請(qǐng)選擇 {{arrayExperience.experience[arrayExperience.index]}} 手機(jī)號(hào)碼 聯(lián)系郵箱 所在城市 請(qǐng)選擇 {{city}} 一句話介紹自己 {{num}}/60
formSubmit(e) { //驗(yàn)證是否輸入名字 let nameVal = this.data.nameVal; if (!this.errorInput(nameVal, "請(qǐng)輸入你的名字")) { return false; }; console.log(nameVal) //驗(yàn)證是否選擇性別 let sex = this.data.arraySex.sex[this.data.arraySex.index]; if (!this.error(this.data.arraySex.isPickSelect, "請(qǐng)選擇你的性別")) { return false; }; console.log(sex) //驗(yàn)證是否選擇了出生日期 let date = this.data.date; if (date === "1999-01-01") { wx.showModal({ title: "系統(tǒng)提示", content: "請(qǐng)選擇你的出生日期", showCancel: false, duration: 1500, success: () => { } }) return false; } console.log(date) //驗(yàn)證是否選擇了學(xué)歷 let education = this.data.arrayEducation.education[this.data.arrayEducation.index]; if (!this.error(this.data.arrayEducation.isPickSelect, "請(qǐng)選擇你的學(xué)歷")) { return false } console.log(education) //驗(yàn)證是否選擇了工作經(jīng)驗(yàn) let experience = this.data.arrayExperience.experience[this.data.arrayExperience.index]; if (!this.error(this.data.arrayExperience.isPickSelect, "請(qǐng)選擇你的工作經(jīng)驗(yàn)")) { return false } console.log(experience) let tel = this.data.telVal; if (!this.errorInput(tel, "請(qǐng)輸入手機(jī)號(hào)碼")) { return false; } if (!/1[3456789][0-9]{9}/.test(tel.trim())) { wx.showModal({ title: "系統(tǒng)提示", content: "手機(jī)號(hào)碼格式有誤", showCancel: false, duration: 1500, success: () => { } }) return; } console.log(tel) let mail = this.data.mailVal; if (!this.errorInput(mail, "請(qǐng)輸入你的郵箱")) { return; } if (!/^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(.[a-zA-Z0-9-]+)*.[a-zA-Z0-9]{2,6}$/.test(mail.trim())) { wx.showModal({ title: "系統(tǒng)提示", content: "請(qǐng)輸入正確的郵箱", showCancel: false, duration: 1500, success: () => { } }) return; } console.log(mail) let inputVal = this.data.inputVal; if (!this.errorInput(inputVal, "一句話介紹你自己")) { return false; } 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: "系統(tǒng)提示", content: errorMsg, showCancel: false, duration: 1500, success: () => { } }) return false; } else { return true; } }, error(isShow, errorMsg) {//是否選擇 if (!isShow) { wx.showModal({ title: "系統(tǒng)提示", content: errorMsg, showCancel: false, duration: 1500, success: () => { } }) return false; } else { return true; } },
我寫了兩個(gè)函數(shù)去判斷需要輸入和需要選擇的操作有沒有完成(errorInput,error),如果沒有完成,就返回errorMsg,但是我這兩個(gè)函數(shù)是返回false的,我當(dāng)初在寫的時(shí)候,沒有在意,就一直卡住了,后來才發(fā)現(xiàn)我函數(shù)執(zhí)行的返回值是false,執(zhí)行這兩個(gè)函數(shù)d的地方應(yīng)該再對(duì)返回的值做判斷。當(dāng)然也可以使用其他方法去驗(yàn)證表單,比如中介者模式
功能還有一部分沒有寫出來,還有一部分沒有做出來,如果我的描述中有什么錯(cuò)誤的話,歡迎指正,我們這群程序猿就是在bug中提升自己的。如果你想對(duì)我的項(xiàng)目想要了解更多, 可以查看我的項(xiàng)目
想說現(xiàn)在的前端技術(shù)更新的太快了,去年剛火的小程序,就推出了mpvue和wepy兩個(gè)主流的框架,對(duì)于我們這些前端來說,要學(xué)的東西太多了,每天都在學(xué)習(xí)新東西。社區(qū)是個(gè)好地方,有問題,大家一起解決,有好東西,大家一起分享。寫文章的確挺累的,但是也挺值的。
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://m.hztianpu.com/yun/95339.html
摘要:學(xué)過服務(wù)器端開發(fā)的朋友一定知道,程序沒有數(shù)據(jù)庫索引也可以運(yùn)行。什么是數(shù)據(jù)庫索引用一句話來描述數(shù)據(jù)庫索引就是一種加快海量數(shù)據(jù)查詢的關(guān)鍵技術(shù)。那這和我們的數(shù)據(jù)庫索引有啥關(guān)系呢別著急,我們翻開第一頁看看。 學(xué)過服務(wù)器端開發(fā)的朋友一定知道,程序沒有數(shù)據(jù)庫索引也可以運(yùn)行。但是所有學(xué)習(xí)數(shù)據(jù)庫的資料、教程,一定會(huì)有大量的篇幅在介紹數(shù)據(jù)庫索引,各種后端開發(fā)工作的面試也一定繞不開索引,甚至可以說數(shù)據(jù)庫索...
摘要:使用方法在你項(xiàng)目的主入口生成的中加入接下來,盡情的使用吧。如果對(duì)此實(shí)現(xiàn)感興趣,源碼地址奉上。 話不多說,直接上干貨 現(xiàn)存痛點(diǎn) 你只是想簡(jiǎn)單的要一個(gè)事件的發(fā)布訂閱來通知下兄弟組件執(zhí)行個(gè)方法? 你是否還在為引入一個(gè)eventbus后,每次還要手動(dòng)調(diào)用卸載(off)而頭疼? 你是否還在為要去想各種bus的【pub、sub】、【$on、$emit】、【fire、l...
摘要:在用戶喜愛的眾多功能中,使用率最高的是模版消息推送。模版消息推送數(shù)的量級(jí)也由早期每天幾百條,變?yōu)楹髞淼拿刻鞌?shù)百萬條。平臺(tái)支持少知曉云已經(jīng)支持包括微信小程序和支付寶小程序在內(nèi)的各大小程序平臺(tái)的消息推送,對(duì)平臺(tái)的支持也將在近期上線。 兩年多前,為了讓更多的人找到好玩、好用的小程序,我們成立了「知曉程序」。 再后來,我們推出了后端云服務(wù)平臺(tái)——知曉云,幫助大家降低創(chuàng)業(yè)成本,提升開發(fā)效率。 「...
閱讀 1809·2023-04-25 18:19
閱讀 2220·2021-10-26 09:48
閱讀 1300·2021-10-09 09:44
閱讀 1890·2021-09-09 11:35
閱讀 3162·2019-08-30 15:54
閱讀 2212·2019-08-30 11:26
閱讀 2415·2019-08-29 17:06
閱讀 1050·2019-08-29 16:38