Detailed explanation of page value transfer in WeChat mini program

Recently, when developing small programs in the group, we encountered an eternal topic on the front end: page Passing values ​​
I just started using path parameter passing, but as we all know:

The maximum length of the HTTP Get request URL in each browser is not the same. The maximum length of several commonly used browsers and the submission conditions after exceeding the maximum length are as follows:
IE6.0: The maximum length of the URL is 2083 characters, and it cannot be submitted after exceeding the maximum length. submit.
IE7.0: The maximum length of URL is 2083 characters. It can still be submitted after exceeding the maximum length, but only 2083 characters can be passed.
firefox 3.0.3: The maximum URL length is 7764 characters. It cannot be submitted after the maximum length is exceeded.
Opera 9.52: The maximum length of the URL is 7648 characters. It cannot be submitted after the maximum length is exceeded.
Google Chrome 2.0.168: The maximum length of the URL is 7713 characters. It cannot be submitted after the maximum length is exceeded.

So I don’t think it’s reliable.
After researching the official website, I found that there are two ways to do this "more elegantly", which of course cannot be compared with vuex/flux.

1. Use global variables
   Define in the projectapp.jsglobalData

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

   Use where needed :

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

   Of course, you can also assign a value at any time:

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

   Effect:

##Paste_Image.png

2. Use templates

According to the official introduction:

First define the template, use the name attribute

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

Then, use the template

• Use the is attribute to declare the template you need to use, and then pass in the data required by the template, such as:

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

  Assign a value to the item to display the template data

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

This solves the problem of page value transfer in a "duang~~~" way

Postscript: Since small programs can use all the features of ES6, then that var What the hell is that=this? Why can't we use arrow functions to solve scope problems? Go back and try again.

【Related recommendations】

1.

Complete source code download of WeChat mini program

2.

WeChat mini program game demo Choose different color blocks

3.

WeChat Alarm Clock: Dialogue Realization

The above is the detailed content of Detailed explanation of page value transfer in WeChat mini program. For more information, please follow other related articles on the PHP Chinese website!