Shulou(Shulou.com)06/03 Report--

This article mainly shows you "what are the methods of passing value in WeChat Mini Programs". The content is simple and clear. I hope it can help you solve your doubts. Next, let the editor lead you to study and learn the article "what are the methods of passing value in WeChat Mini Programs?"

WeChat Mini Programs passes the value.

1. List index subscript value

The way to achieve this is as follows: data-index= "{{index}}" dig the pit and e.currentTarget.dataset.index can fill the hole

1.1 generate valu

Delete

Add data-index= "{{index}}" custom attributes to delete icons and text and bind click event bindtap= "delete"

Delete

Implement the delete method and get the index subscript value.

Delete: function (e) {var index = parseInt (e.currentTarget.dataset.index); console.log ("index" + index);}

What happens if you use e.target instead of e.currentTarget?

Will cause the index value to be output only in the click, and the point element may output NaN.

What is the use of target? when you want to deal with the molecular elements and external elements separately, for example, when you change the user's avatar, click on the avatar itself to preview the big image, and the whole line where the avatar is located will switch the avatar.

1.2 take out the value

Attempt to find the corresponding element deletion address from the index data

/ / find the current address AVObject object var address = that.data.addressObjects [index]; / / give a confirmation prompt box wx.showModal ({title: 'confirm', content:'do you want to delete this address?' , success: function (res) {if (res.confirm) {/ / actually delete the object address.destroy () .then (function (success) {/ / prompt wx.showToast for successful deletion ({title: 'deleted successfully', icon: 'success', duration: 2000}) / / reload data that.loadData ();}, function (error) {});})

two。 Page value

Transfer the address id from the shipping address list page to the editing page to read the original address for modification.

The address/list page implements the following code

Edit edit: function (e) {var that = this; / / get subscript var index = parseInt (e.currentTarget.dataset.index); / / fetch id value var objectId= this.data.addressObjects [index] .get ('objectId'); wx.navigateTo ({url:'.. / add/add?objectId='+objectId});}

The address/add page implements the onLoad (options) method to get the objectId from the url path

OnLoad: function (options) {var objectId = options.objectId}

Then there is access to the network and rendering of the page.

3. Form form value

3.1 method 1, by using it in conjunction with the label

The layout is as follows:

Submit

Value of js:

FormSubmit: function (e) {/ / detail var detail = e.detail.value.detail; / / realname var realname = e.detail.value.realname; / / mobile var mobile = e.detail.value.mobile;}

3.2 Mode II

By implementing

/ / implement the corresponding multiple * * Confirm methods detailConfirm: function (e) {var detail = e.detail.value;} realnameConfirm: function (e) {var realname = e.detail.value;} mobileConfirm: function (e) {var mobile = e.detail.value;}

Through the comparison between method 1 and method 2, we can see that although they can also achieve the goal of taking values, their use scenarios are different. The former is suitable for submitting a large number of form items, such as users improving their personal data and filling in the receiving address. The latter is suitable for only one or two form items, such as entering express order numbers and binding mobile phone numbers.

If you need an instant response similar to ajax, you should choose the latter, because input can be used to get values instantly. For example, if you enter keywords on your phone in the product search box, there should be scenarios like iPhone7,Mate8 waiting for words to be selected.

Summary:

List index subscript values, page values, form form values, the first kind of all the time in use, the second kind of very commonly used, but the Mini Program page is generally less, I am now this project is 12 page, the third kind of relatively less, because the mobile side is not a productivity tool, used in the registration page, comments page, and so on.

These are all the contents of the article "what are the methods of passing values in WeChat Mini Programs?" Thank you for your reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow 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.