Shulou(Shulou.com)05/31 Report--

Today, the editor will share with you the relevant knowledge points about the methods of data storage and value in WeChat Mini Programs. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article. Let's take a look at it.

For example:

In the input input box on page A, enter the phone number and click add. You need to display the phone number you just entered in the phone area of page B.

Because these are two pages, you need to store them first and then take values. WeChat Mini Programs provides an API,wx.setStorage (OBJECT) for data storage to store data in the key specified in the local cache. If repeated, the original key will be overwritten.

The idea is that on page A, use bindinput to get the value entered by input and assign it to a variable (custom). When you click the add button, if the variable is not empty, store the value of the variable in the local cache. On page B, use the wx.getStorage (OBJECT) method to take the value.

Ps: source code is at the bottom of the page

The code is as follows:

For the input input box, bind the event bindinput= "bindKeyInput" and set value= "{{inputValue}}", because the phone number is numeric, set type= "number". Add a click event bindtap= "addbtn" to the button

Add code to the JS file

B page code

In the JS file, declare the variable addtel. When the page is switched over, take out the value we just stored and assign it to the variable addtel. Where you need to display the phone number, use a variable to receive it.

Add code to the JS file

Data: {addtel:''}

Here, the value is taken in the onShow method. When Mini Program is started or displayed in the foreground from the background, onShow will be triggered.

However, each WeChat Mini Programs can have his own local cache, and when using these methods, it is important to note that the maximum local cache is 10MB wx.setStorage (wx.setStorageSync), and wx.getStorage (wx.getStorageSync) can set, get, and clean the local cache.

You can also use wx.clearStorage (wx.clearStorageSync) to clean up the cache.

After the code is written, test it.

Enter the phone number in the input box and click add.

OK, the value is successful.

A page source code:

Add var app = getApp () Page ({data: {inputValue:''}, bindKeyInput:function (e) {this.setData ({inputValue: e.detail.value})}, addbtn:function () {if (this.data.inputValue) {wx.redirectTo ({url:'. / ordered/ordered'}) wx.setStorage ({key: "addTel") Data:this.data.inputValue})} else {wx.showModal ({title: 'mobile number is empty', content: 'please enter mobile phone number', success: function (res) {if (res.confirm) {console.log ('user clicks OK')}})}, onload:function () {/ / onload}})

B page source code:

Phone {{addtel}} var app = getApp () Page ({data: {addtel:''}, onShow:function () {var that = this Wx.getStorage ({key: 'addTel', success: function (res) {console.log (res.data) that.setData ({addtel:res.data}) these are all the contents of this article entitled "data Storage and value selection in WeChat Mini Programs". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.