摘要:獲取當(dāng)前路徑參數(shù)不用提供的因?yàn)槠溥M(jìn)入同一頁面,參數(shù)不會(huì)變化獲取當(dāng)前路由棧數(shù)組后記前面幾個(gè)問題是我初次使用開發(fā)小程序遇到的最大的坑了吧。
前言
最近有點(diǎn)閑,想起關(guān)注已久的mpvue寫小程序,所以稍微肝了半個(gè)多月寫了個(gè)github版的微信小程序,已上線。現(xiàn)在總結(jié)一下遇到的坑。
掃碼體驗(yàn)、
項(xiàng)目地址、
https://github.com/cheesekun/wx-github
可滾動(dòng)視圖區(qū)域。使用豎向滾動(dòng)時(shí),需要給
一個(gè)固定高度,通過 WXSS 設(shè)置 height。
小程序提供的scroll-view組件,想讓他能滾動(dòng),就要給他提供一個(gè)固定的高度。
我們一般需求是,上一塊區(qū)域固定,下一塊區(qū)域可滾動(dòng),我的處理方法是,拿到機(jī)型的可視高度,減去上一塊固定區(qū)域的高度,動(dòng)態(tài)賦值scroll-view最終高度。
// 以 search 頁為例 // 滾動(dòng)區(qū)域高度 = 總高度 - 搜索框高度 - tabs 高度 onLoad () { wx.getSystemInfo({ success: (res) => { this.height = res.windowHeight // 獲取機(jī)型可視高度 } }) let query = wx.createSelectorQuery() // 選擇id query.select("#search").boundingClientRect() query.exec(res => { let searchH = res[0].height // 獲取search框高度 this.height = this.height - searchH - this.tabsH }) }
坑點(diǎn):wx.createSelectorQuery()獲取不了display: none的元素高度。
我的解決方法是:在trending頁獲取到tabs組件的高度,再存放到vuex中,給search頁使用
生命周期(同一page攜帶不同參數(shù))小程序生命周期
當(dāng)我們從一個(gè)頁面①進(jìn)入頁面②時(shí),我們一般在onLoad進(jìn)行初始數(shù)據(jù)的獲取,
從頁面②返回到頁面①時(shí),若兩個(gè)頁面是不同的page,如①為page/info,
②為page/repo,那沒問題,①頁面unOnLoad,②頁面onShow。
但是若①為page/info?user=a,②為page/info?user=b,那gg了,從頁面②返回到頁面①,頁面①的數(shù)據(jù)會(huì)變成頁面②的數(shù)據(jù)
為了避免這種情況,我一開始使用onShow代替onLoad,也就是在onShow的時(shí)候獲取頁面的初始數(shù)據(jù)。但是這個(gè)情況就有點(diǎn)可怕了,我們知道onShow很多情況都會(huì)觸發(fā)到,切換前后臺(tái),從一個(gè)頁面返回到另一個(gè),都會(huì)觸發(fā)onShow,這就導(dǎo)致會(huì)觸發(fā)很多不必要的請(qǐng)求,而且用戶體驗(yàn)極差。
可我很多需求就是類似從①為page/info?user=a到②為page/info?user=b,因此曲線救國(guó)想出用vuex維護(hù)有相關(guān)需求頁面的路由棧。
頁面onLoad的時(shí)候,推入query參數(shù)到棧中,onShow時(shí),若當(dāng)前頁面的參數(shù)和棧中最后一個(gè)元素相同,則不重新加載數(shù)據(jù)。當(dāng)頁面被銷毀,則在onUnload中把相應(yīng)的頁面棧推出。這樣就可以避免很多無謂的onShow請(qǐng)求。
onLoad () { this.reset() const options = getQuery() user = options.login // vuex this.reposStack.push(options) this.getRepos() }, onShow () { const options = getQuery() // vuex let reposStack = JSON.parse(JSON.stringify(this.reposStack)) let len = reposStack.length let endStack = reposStack[len - 1] if (JSON.stringify(endStack) === JSON.stringify(options)) { return } this.reset() user = options.login this.getRepos() }, onUnload () { // vuex this.reposStack.slice(0, -1) }mpvue坑 query參數(shù)
mpvue可以通過?this.$root.$mp.query?在所有頁面的組件內(nèi)獲取路徑參數(shù)。
如果以mina來說的話,我們是通過在生命周期onLoad(options),拿到options上攜帶的路徑參數(shù),mpvue提供了this.$root.$mp.query?,我們可以所有生命周期上使用。
但是我們知道,當(dāng)我們從當(dāng)前頁返回到上一頁時(shí),上一頁并不會(huì)執(zhí)行onLoad(),
假設(shè)當(dāng)前頁和上一頁是同個(gè)page,只是攜帶參數(shù)不同的話,此時(shí)回退到上一頁,
上一頁的this.$root.$mp.query不會(huì)變成自己的query,還是會(huì)變成當(dāng)前頁的query
舉例:①page/info?a=1 => ②page/info?b=2
當(dāng)我從②返回到①時(shí),①的this.$root.$mp.query會(huì)變成{b:2}
我猜mpvue的this.$root.$mp.query是通過onLoad(options)獲取到options,再賦值。但是遇到小程序頁面返回不會(huì)執(zhí)行onLoad
為了避免麻煩,我直接使用了小程序的api getCurrentPages(),獲取路由棧中最后一個(gè)路由的參數(shù)
getCurrentPages() 函數(shù)用于獲取當(dāng)前頁面棧的實(shí)例,以數(shù)組形式按棧的順序給出,第一個(gè)元素為首頁,最后一個(gè)元素為當(dāng)前頁面。
/** * 獲取當(dāng)前路徑參數(shù) * 不用mpvue提供的this.$root.$mp.query * 因?yàn)槠溥M(jìn)入同一頁面,參數(shù)不會(huì)變化 */ export function getQuery () { /* 獲取當(dāng)前路由棧數(shù)組 */ const pages = getCurrentPages() const currentPage = pages[pages.length - 1] const options = currentPage.options return options }后記
前面幾個(gè)問題是我初次使用mpvue開發(fā)小程序遇到的最大的坑了吧。(好久沒有寫東西了,寫得好爛。)不過確實(shí)使用mpvue開發(fā)小程序,能組件化,支持npm,比原生開發(fā)舒服很多。體驗(yàn)還是很好的。
小程序現(xiàn)在是真的太火了。感覺是個(gè)前端都要去玩一下。
再次推一下項(xiàng)目地址,有興趣的朋友可以參考一下。
https://github.com/cheesekun/wx-github
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/108084.html
摘要:在這一步,實(shí)例已完成以下的配置數(shù)據(jù)觀測(cè),屬性和方法的運(yùn)算,事件回調(diào)。可以直接寫等標(biāo)簽的寫法之前會(huì)的工程師上手框架的成本較低 簡(jiǎn)介 1.美團(tuán)工程師推出的基于Vue.js封裝的用于開發(fā)小程序的框架2.融合了原生小程序和Vue.js的特點(diǎn)3.可完全組件化開發(fā) 特點(diǎn) 1.組件化開發(fā)2.完成的Vue.js開發(fā)體驗(yàn)(前提是熟悉Vue)3.可使用Vuex管理狀態(tài)4.Webpack構(gòu)建項(xiàng)目5.最終H5...
摘要:業(yè)內(nèi)開發(fā)框架層出不窮,,,等等,都在朝著更快,更強(qiáng)大的方向發(fā)展,有統(tǒng)一微信支付寶百度和頭條小程序的大趨勢(shì)。最近升級(jí)為版本,支持微信支付寶百度和頭條小程序。 原文鏈接 最近小程序的發(fā)展越來越火了,作為各個(gè)產(chǎn)品線的extra服務(wù)入口,以輕便、快速、強(qiáng)大的社交鏈吸引著大量的用戶和開發(fā)者。業(yè)內(nèi)開發(fā)框架層出不窮,wepy,mpvue,taro等等,都在朝著更快,更強(qiáng)大的方向發(fā)展,有統(tǒng)一 H5、微...
摘要:業(yè)內(nèi)開發(fā)框架層出不窮,,,等等,都在朝著更快,更強(qiáng)大的方向發(fā)展,有統(tǒng)一微信支付寶百度和頭條小程序的大趨勢(shì)。最近升級(jí)為版本,支持微信支付寶百度和頭條小程序。 原文鏈接 最近小程序的發(fā)展越來越火了,作為各個(gè)產(chǎn)品線的extra服務(wù)入口,以輕便、快速、強(qiáng)大的社交鏈吸引著大量的用戶和開發(fā)者。業(yè)內(nèi)開發(fā)框架層出不窮,wepy,mpvue,taro等等,都在朝著更快,更強(qiáng)大的方向發(fā)展,有統(tǒng)一 H5、微...
閱讀 3258·2021-10-11 10:59
閱讀 2812·2021-10-11 10:58
閱讀 2244·2021-09-04 16:45
閱讀 2717·2019-08-30 15:44
閱讀 671·2019-08-30 15:44
閱讀 3199·2019-08-30 10:51
閱讀 1597·2019-08-29 18:46
閱讀 2749·2019-08-29 13:57