如何在小程式頁面之間,傳遞資料和變數?
最近組裡開發小程式,遇到了一個困擾前端很長時間的話題:頁面之間,如何傳遞資料和變數?
剛開始,我們選擇使用路徑傳參解決。但是眾所周知,各瀏覽器 HTTP Get 請求 URL 最大長度並不相同,大部分瀏覽器只能接受 7000 個字元的資料。
所以,我們覺得這個方式並不靠譜。
研究了一下官網,發現有兩種方式可以「比較優雅」地完成這個任務。
使用全域性變數
在專案 app.js中定義 globalData(全域性變數)。
在需要的地方,我們可以隨意呼叫這個全域性變數。
當然,賦值也是沒問題的。
來試試效果:
使用模板
在官方文件中,模板的使用需要先定義一個模板,要用到 name 屬性。
接著,使用模板和 is
給 item賦值,以顯示模板資料。
這樣就「duang」地一下,解決了頁面傳值問題。
另外,既然小程式可以使用 ES6 的所有特性,那麼那個 var that=this又是什麼鬼?為何不能用箭頭函式解決作用域問題?大家可以自行嘗試一下。
相關推薦
如何在小程式頁面之間,傳遞資料和變數?
最近組裡開發小程式,遇到了一個困擾前端很長時間的話題:頁面之間,如何傳遞資料和變數? 剛開始,我們選擇使用路徑傳參解決。但是眾所周知,各瀏覽器 HTTP Get 請求 URL 最大長度並不相同,大部分瀏覽器只能接受 7000 個字元的資料。 所以,我們覺得這個方式並不靠譜。
小程式頁面之間的資料傳遞 幾種實現方式
1 元件傳遞內容給頁面 給元件設定myevent事件,通過this.triggerEvent('myevent', myEventDetail) 觸發該myevent事件並傳遞內容,在頁面用onMyEventshi事件監聽傳遞過來的資料。
微信小程式 頁面跳轉及資料傳遞詳解
微信小程式 頁面跳轉及資料傳遞詳解 類似 Android 的 Intent 傳值,微信小程式也一樣可以傳值: 例如:wxml 中寫了一個函式跳轉: ? 1 2 3 4 <view class="itemWeight" catchtap
微信小程式頁面跳轉傳遞引數(實體,物件)
我們要傳遞的實體是object型別 queryItemClick: function (e) { var that = this //拿到點選的index下標 var index = e.currentTarget.dataset.index //將物件轉為st
微信小程式頁面之間傳遞引數的幾種方式
小程式開發過程中,不可避免要遇到不同頁面之間資料通訊的問題,如判斷是否登入等,現做出以下分類總結 一、使用全域性變數實現資料傳遞 使用場景: 購物車介面需要根據是否登入來區別顯示,當沒有登入時提醒去登入,登入後之間顯示自己購物車裡的商品列表
微信小程式-頁面間值傳遞的2種方法
一:url帶引數傳遞 與前端語言一樣,小程式頁面間的傳遞可以通過在路由url後接引數,路由的同時會將引數一併傳遞到新的頁面。 index.wxml: <!--index.wxml--> <view c
小程式頁面棧,減少nav跳轉入棧
真的是感謝這位哥哥了 貼程式碼! 處理多棧的情況,具體看實體場景 //A介面 Page({ data: { userName: '' }, getBackData: function(name){ thi
微信小程式 方法之間值傳遞
比如我在onLoad()方法中獲取到一個引數,然後呢我點選某個元件的時候,需要用到這個引數,那麼怎麼獲取到onLoad()方法中獲取到的id值呢,可以通過data{}中轉一下: * 生命週期函式--
小程式頁面傳值傳遞物件
1.先將要傳的物件轉譯一下 2.將宣告的變數拼接在 url上 3.到跳轉的頁面上去接受轉譯的物件變數 列印效果如下,得到了物件 深圳的加一下群吧,一起交流,面試內推線下活
微信小程式頁面之間的傳值
微信小程式還是基於html和js來做,因此頁面之間的傳值,和網頁中的url之間的跳轉很相似,將引數拼接在url中(請注意如果資料量大的話,通過url拼接引數會傳遞不完整,可以採用全域性變數來做,或者使用微信小程式的本地儲存功能) 舉個例子:從頁面1跳轉到頁面2 頁面1
讓微信小程式頁面之間的通訊不在變得困難
一個開始 小程式開發者總會碰到各種頁面之間的通訊問題,實現方式也五花八門,比如... 場景還原 首先這是一個電商小程式。 有這樣一個需求: 首頁某個地方要展示購物車商品數量。 當我在其他頁面加購了商品,首頁數量重新整理。 實現方式 方式一:onShow直接請求介面 Page({ onShow
微信小程式裡面的單步除錯和變數檢視
在微信小程式開始學習與開發的過程中,總有一些東西,想看看它跑起來的內容與我們程式設計時想的是否一致,於是就想到了能不能單步除錯或者打出一些我們想要的變數的內容,以便我們做進一步的開發和調整,現在我就要介紹下微信小程式的一般用到的除錯方法和列印日誌以及看到變數裡面的執行值。
React Native中Navigator的基本使用,實現簡單的頁面之間的跳轉和頁面資料傳遞
效果如下:很簡單的例子,大佬勿噴啊... 點選檢視多少錢後,自動跳轉到超市頁面,點選回答價格後,自動跳轉回顧客介面,並傳遞引數回去。 在我使用的0.57.0的版本中,Navigator已被移除,
小程式頁面跳轉,資料傳遞,json字串轉物件並使用
小程式頁面跳轉,資料傳遞,json字串轉物件並使用 1.新建一個資料夾和page,隨便取名,我這裡是qrcontent,如下: 2.頁面跳轉並傳遞資料 index.js跳轉qrcontent.js,在index.js方法中新增程式碼: success: functi
微信小程式--頁面與元件之間如何進行資訊傳遞和函式呼叫
### 微信小程式--頁面與元件之間如何進行資訊傳遞和函式呼叫 這篇文章我會以我自己開發經驗從如下幾個角度來講解相關的內容 1. 頁面如何向元件傳資料 2. 元件如何向頁面傳資料 3. 頁面如何呼叫元件內的函式 4. 元件如何呼叫頁面內的函式 #### 1.頁面如何向元件傳資料 最常用,最
wx小程式自定義元件與頁面之間引數傳遞
在開發中,很多頁面中會使用相同的元件,這時可以將具有相同資訊的部分封裝成一個元件,方便開發中呼叫。在呼叫中可能會涉及到資料的傳遞問題,例如頁面與元件,元件與元件直接的資料傳遞。 首先看看頁面與元件直接的資料傳遞。 1. 元件需要獲取頁面傳遞資料, 可以使用元件的屬性來傳遞值
小程式頁面返回重新整理資料onLoad和onShow頁面傳參解決
三種場景 一、index頁面不需要識別不同入口 二、有很多頁面“跳轉”到B頁面,所以onLoad需要接收url傳參,識別不同入口。 在只有A頁面是“返回”的情況,可以固定寫法onShow載入this.onLoad({route:'a'}) 三、如果有多頁面“跳轉”或“返回”index頁面的情況,在需
微信小程式頁面間傳遞json資料
1.頁面跳轉函式 wx.navigateTo(Object object) 保留當前頁面,跳轉到應用內的某個頁面。但是不能跳到 tabbar 頁面。使用 wx.navigateBack 可以返回到原頁面。 示例程式碼: wx.navigateTo({ url
微信小程式與H5相互跳轉和傳遞資料
這是小程式和web-vew的H5相互傳參,H5使用小程式的微信支付的程式碼 H5部分 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <!--<meta
[微信小程式]this.setData , that.setData , this.data.val三者之間的區別和作用
有問題可以掃碼加我微信,有償解決問題。承接小程式開發。 微信小程式開發交流qq群 173683895 、 526474645 ; 正文: 1.this.setData({ }) <view bindtouchmove="tap_drag" b