微信小程式之頁面傳值詳解

最近群組裡開發小程序，遇到了一個前端亙古不變的話題：頁面傳值
剛開始使用路徑傳參解決，但是眾所周知：

各瀏覽器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';
   },

   效果：

##Paste_Image.png

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'
   }
  }
  })

這樣就「duang~~~」的一下解決了頁面傳值問題

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

【相關推薦】
1.

微信小程式完整原始碼下載

2. 

微信小程式遊戲類別demo挑選不同色塊

3. 

微信小鬧鐘：對話實作

以上是微信小程式之頁面傳值詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！