微信小程式頁面傳值執行個體分析，小程式頁面執行個體分析

小程式頁面傳值執行個體分析，小程式頁面執行個體分析

小程式頁面傳值執行個體分析

最近組裡開發小程式，遇到了一個前端亙古不變的話題：頁面傳值

剛開始使用路徑傳參解決，但是眾所周知：

各瀏覽器HTTP Get請求URL最大長度並不相同，幾類常用瀏覽器最大長度及超過最大長度後提交情況如下：IE6.0 :url最大長度2083個字元，超過最大長度後無法提交。IE7.0 :url最大長度2083個字元，超過最大長度後仍然能提交，但是只能傳過去2083個字元。firefox 3.0.3 :url最大長度7764個字元，超過最大長度後無法提交。Opera 9.52 :url最大長度7648個字元，超過最大長度後無法提交。Google Chrome 2.0.168 :url最大長度7713個字元，超過最大長度後無法提交。

所以覺得不靠譜。

研究了一下官網，發現有兩種方式可以“比較優雅”地幹這件事，當然不能和vuex/flux比。

1.使用全域變數

在項目app.js中定義globalData

App({ globalData:{ userInfo:'angeladaddy'}});

在需要的地方使用：

getGlobalVar:function(){ var that=this;that.setData({ globalvar_str:JSON.stringify(getApp().globalData)}) }

當然也可以隨時賦值：

onLoad:function(options){ getApp().globalData.userInfo+=' is an awesome man';},

效果：

2.使用模板

根據官方介紹如下：

首先定義模板,使用name屬性

<template name="msgItem"> <view>  <text> {{index}}: {{msg}} </text>  <text> Time: {{time}} </text> </view></template>

接著，使用模板

使用 is 屬性，聲明需要的使用的模板，然後將模板所需要的 data 傳入，如：

<template is="msgItem" data="{{...item}}"/>

給item賦值以顯示模板資料

Page({data: { item: {  index: 0,  msg: 'this is a template',  time: '2016-09-15' }}})

這樣就一下解決了頁面傳值問題

後記：既然小程式可以使用ES6的所有特性，那麼那個var that=this又是什麼鬼？為何不能用箭頭函數解決範圍問題？回頭再試試。

感謝閱讀，希望能協助到大家，謝謝大家對本站的支援！