Share a small exploration of value transfer on a WeChat applet page

Recently, when developing small programs in the group, we encountered an eternal topic on the front end: page value passing
We just started to use path parameter passing to solve the problem, but as we all know:

Each browser HTTP The maximum length of the Get request URL is not the same. The maximum length of several commonly used browsers and the submission situation 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.
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 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? Try again later.

The above is the detailed content of Share a small exploration of value transfer on a WeChat applet page. For more information, please follow other related articles on the PHP Chinese website!