摘要:于是我便萌發了一個新想法,自己手擼一個拉勾小程序。開發工具與資源平臺微信開發者工具用于敲網頁代碼,但是最主要用來進行手機效果預覽。微信小程序開發者文檔微信小程序開發的文檔,資源庫,以及規范可以模擬我們想要的數據,非常方便。
引言
現在的前端有各種各樣的新知識和新框架,小程序才出生幾年,就已經火到這種程度了,所以作為前端學習者,這個新技能我們是一定要盡快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,然后列表就會隱藏起來,從后一個頁面返回時也不會出現那種狀況。
{{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會碰到的問題
請勿在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里面,因為我想換一種方式去實現。在個人信息中,有一個表單驗證,在這里,我除了一個大虧。先貼代碼,看看我寫的表單驗。
真實姓名 性別 請選擇 {{arraySex.sex[arraySex.index]}} 出生日期 {{date}} 最高學歷 請選擇 {{arrayEducation.education[arrayEducation.index]}} 工作經驗 請選擇 {{arrayExperience.experience[arrayExperience.index]}} 手機號碼 聯系郵箱 所在城市 請選擇 {{city}} 一句話介紹自己 {{num}}/60
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") { wx.showModal({ title: "系統提示", content: "請選擇你的出生日期", showCancel: false, duration: 1500, success: () => { } }) return false; } console.log(date) //驗證是否選擇了學歷 let education = this.data.arrayEducation.education[this.data.arrayEducation.index]; if (!this.error(this.data.arrayEducation.isPickSelect, "請選擇你的學歷")) { return false } console.log(education) //驗證是否選擇了工作經驗 let experience = this.data.arrayExperience.experience[this.data.arrayExperience.index]; if (!this.error(this.data.arrayExperience.isPickSelect, "請選擇你的工作經驗")) { 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; } console.log(tel) let mail = this.data.mailVal; if (!this.errorInput(mail, "請輸入你的郵箱")) { 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: "系統提示", content: "請輸入正確的郵箱", 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: "系統提示", 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兩個主流的框架,對于我們這些前端來說,要學的東西太多了,每天都在學習新東西。社區是個好地方,有問題,大家一起解決,有好東西,大家一起分享。寫文章的確挺累的,但是也挺值的。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/95339.html
摘要:學過服務器端開發的朋友一定知道,程序沒有數據庫索引也可以運行。什么是數據庫索引用一句話來描述數據庫索引就是一種加快海量數據查詢的關鍵技術。那這和我們的數據庫索引有啥關系呢別著急,我們翻開第一頁看看。 學過服務器端開發的朋友一定知道,程序沒有數據庫索引也可以運行。但是所有學習數據庫的資料、教程,一定會有大量的篇幅在介紹數據庫索引,各種后端開發工作的面試也一定繞不開索引,甚至可以說數據庫索...
摘要:使用方法在你項目的主入口生成的中加入接下來,盡情的使用吧。如果對此實現感興趣,源碼地址奉上。 話不多說,直接上干貨 現存痛點 你只是想簡單的要一個事件的發布訂閱來通知下兄弟組件執行個方法? 你是否還在為引入一個eventbus后,每次還要手動調用卸載(off)而頭疼? 你是否還在為要去想各種bus的【pub、sub】、【$on、$emit】、【fire、l...
摘要:在用戶喜愛的眾多功能中,使用率最高的是模版消息推送。模版消息推送數的量級也由早期每天幾百條,變為后來的每天數百萬條。平臺支持少知曉云已經支持包括微信小程序和支付寶小程序在內的各大小程序平臺的消息推送,對平臺的支持也將在近期上線。 兩年多前,為了讓更多的人找到好玩、好用的小程序,我們成立了「知曉程序」。 再后來,我們推出了后端云服務平臺——知曉云,幫助大家降低創業成本,提升開發效率。 「...
閱讀 1630·2023-04-25 18:19
閱讀 2078·2021-10-26 09:48
閱讀 1079·2021-10-09 09:44
閱讀 1731·2021-09-09 11:35
閱讀 3027·2019-08-30 15:54
閱讀 2021·2019-08-30 11:26
閱讀 2285·2019-08-29 17:06
閱讀 884·2019-08-29 16:38