Home Web Front-end JS Tutorial The life cycle and parameter transfer of WeChat applet

The life cycle and parameter transfer of WeChat applet

Mar 19, 2018 pm 05:08 PM
transfer parameter Applets

This time I will bring you the life cycle and parameter passing of the WeChat applet. What are the notes of the life cycle and parameter passing of the WeChat applet? The following is a practical case. Let’s take a look.

Nowadays, the threshold for WEB development is getting higher and higher. If you don’t want to know Java, you can have a job. If you can’t do the front-end, not only JavaScript is not low, but you also need to have a solid foundation of HTML+CSS, as well as jquery. You must know how to use the current front-end framework Vue Ng React, otherwise you will not be able to find a job. A few years ago, the front-end requirements were all about the application layer, but now interviews are based on the basics,

For example The interviewer asked a question

1

2

3

4

5

6

[]+[]  

[]+{}

{}+[]

{}+{}

1+"1"+2

1+1+"2"

Copy after login

What is the console printing?

I believe that someone who has learned JavaScript for about a year cannot describe it, and cannot explain the principle. Here I provide the answer. , this is a front-end interview question, and there are interpretations on the Internet

Let’s not talk nonsense and get to the point. WeChat mini programs are becoming more and more popular now. As part of the big front-end, I also started to learn WeChat mini programs. I have written it, and I believe that it will be very fast to get started with Vue or one of the three major frameworks. WeChat mini-programs. To me, it feels like a castrated version of Vue (...maybe I only saw the surface). I have just started to get in touch with it and read the documentation. There is no problem, except for one thing, parameter passing, I am very confused, and the document does not explain it in detail. Finally, I watched Geek Academy’s video, and I understood it very clearly (I originally thought it was parameter sharing like Vuex) )

This is the WeChat mini program video tutorial link: https://pan.baidu.com/s/19T8H-sAKlUYGTfUsWzvqnA Password: 7oag

First - life cycle I won’t go into details, the official website can be said to be very detailed

The first step in parameter transfer is of course the page jump

Currently we know that the page jump is in js wxml You can execute

The following is index(page/index/index) jump to logs(page/logs/logs) page

1

2

3

4

itemClick : function (){

    wx.navigateTo({

       url : "../logs/logs"    //这就是最正常的跳转 使用内置方法  wx.navigateTo

    })}

Copy after login

The life cycle and parameter transfer of WeChat applet

1

2

3

4

itemClick : function (){

    wx.redirectTo({       //在跳转的时候直接替换了,之前的页面就没了,直接卸载了

       url: '../logs/logs'

    })}

Copy after login

The life cycle and parameter transfer of WeChat applet

Pay attention to the life cycleIf there is an uninstall page, you cannot return to the previous page using redirectTo

It can also be done in wxml To achieve such a function

1

2

3

4

   <navigator url=&#39;../logs/logs&#39;> 

    <view class="usermotto" bindtap=&#39;itemClick&#39;>

      <text class="user-motto">文章1</text>    </view>

   </navigator>

Copy after login

This has the same effect aswx.navigateTo

1

2

3

4

   <navigator url=&#39;../logs/logs&#39; redirect> 

    <view class="usermotto" bindtap=&#39;itemClick&#39;>

      <text class="user-motto">文章1</text>    </view>

   </navigator>

Copy after login

After adding redirect, it will be the same aswx.redirectTo An effect

The above is the implementation method of jumping in the page (what I know so far)

Parameter passing

It’s very simple, just want to jq Add the parameter

1

2

wx.redirectTo({       

  url: '../logs/logs?id=1&title="文章"'})

Copy after login

after the url address so that the parameter will go to the logs page. How to accept it? Look at the code in logs.js

1

2

3

4

5

6

7

/**   * 生命周期函数--监听页面加载   */

  onLoad: function (e) {

    console.log("logs--onload--")  在onload里面会接受传递过来的参数    console.log(e)        //这里打印出来就可以看待传递过来的对象

    this.setData({

      total:e.id,

      title:e.title

    })  },

Copy after login

The life cycle and parameter transfer of WeChat applet

That’s it! It’s very simple. As long as you know the built-in methods of wx, you can achieve the same function as routing. Finally, define the value in data and use

this.setData to assign the value, the page is displayed, and complete

1

2

3

4

5

6

7

8

9

10

11

`logs.js`  data: {

    total:null,

    title:null

  },

  /**   * 生命周期函数--监听页面加载   */

  onLoad: function (e) {

    console.log("logs--onload--")    console.log(e)    this.setData({

      total:e.id,

      title:e.title

    })  }`logs.wxml`<!--logs.wxml--><view class="container log-list">

  文章详情</view><text> 文章id == {{total}}</text><view>文章标题  {{title}}</view>

Copy after login

The life cycle and parameter transfer of WeChat applet

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

What class definition components are there in React

navigator.clipboard How to create a native clipboard in the browser

The above is the detailed content of The life cycle and parameter transfer of WeChat applet. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Java Tutorial
1663
14
PHP Tutorial
1266
29
C# Tutorial
1239
24
What are Delivery Optimization files in Windows 11 and can you delete them? What are Delivery Optimization files in Windows 11 and can you delete them? Sep 29, 2023 pm 04:09 PM

Delivery Optimization is a feature that helps Windows Update and Windows Store run and deliver updates faster. Cache files in Delivery Optimization are supposed to be deleted after a while, but for some of our readers they keep piling up and taking up unnecessary space. Is it safe to delete delivery optimization files? Yes, it is safe to delete delivery optimization files, and in this article, you will find out how easy it is to do so in Windows 11. Although it is not recommended to manually delete delivery optimization files, it is possible to do so automatically. How to delete delivery optimization files on Windows 11? Click the search bar, type Disk Cleanup, and open the tool from the results. If you have multiple drives, select the drive with your system (usually C:

New feature in PHP version 5.4: How to use callable type hint parameters to accept callable functions or methods New feature in PHP version 5.4: How to use callable type hint parameters to accept callable functions or methods Jul 29, 2023 pm 09:19 PM

New feature of PHP5.4 version: How to use callable type hint parameters to accept callable functions or methods Introduction: PHP5.4 version introduces a very convenient new feature - you can use callable type hint parameters to accept callable functions or methods . This new feature allows functions and methods to directly specify the corresponding callable parameters without additional checks and conversions. In this article, we will introduce the use of callable type hints and provide some code examples,

What do product parameters mean? What do product parameters mean? Jul 05, 2023 am 11:13 AM

Product parameters refer to the meaning of product attributes. For example, clothing parameters include brand, material, model, size, style, fabric, applicable group, color, etc.; food parameters include brand, weight, material, health license number, applicable group, color, etc.; home appliance parameters include brand, size, color , place of origin, applicable voltage, signal, interface and power, etc.

Implement card flipping effects in WeChat mini programs Implement card flipping effects in WeChat mini programs Nov 21, 2023 am 10:55 AM

Implementing card flipping effects in WeChat mini programs In WeChat mini programs, implementing card flipping effects is a common animation effect that can improve user experience and the attractiveness of interface interactions. The following will introduce in detail how to implement the special effect of card flipping in the WeChat applet and provide relevant code examples. First, you need to define two card elements in the page layout file of the mini program, one for displaying the front content and one for displaying the back content. The specific sample code is as follows: &lt;!--index.wxml--&gt;&l

C++ function parameter type safety check C++ function parameter type safety check Apr 19, 2024 pm 12:00 PM

C++ parameter type safety checking ensures that functions only accept values ​​of expected types through compile-time checks, run-time checks, and static assertions, preventing unexpected behavior and program crashes: Compile-time type checking: The compiler checks type compatibility. Runtime type checking: Use dynamic_cast to check type compatibility, and throw an exception if there is no match. Static assertion: Assert type conditions at compile time.

Alipay launched the 'Chinese Character Picking-Rare Characters' mini program to collect and supplement the rare character library Alipay launched the 'Chinese Character Picking-Rare Characters' mini program to collect and supplement the rare character library Oct 31, 2023 pm 09:25 PM

According to news from this site on October 31, on May 27 this year, Ant Group announced the launch of the "Chinese Character Picking Project", and recently ushered in new progress: Alipay launched the "Chinese Character Picking-Uncommon Characters" mini program to collect collections from the society Rare characters supplement the rare character library and provide different input experiences for rare characters to help improve the rare character input method in Alipay. Currently, users can enter the "Uncommon Characters" applet by searching for keywords such as "Chinese character pick-up" and "rare characters". In the mini program, users can submit pictures of rare characters that have not been recognized and entered by the system. After confirmation, Alipay engineers will make additional entries into the font library. This website noticed that users can also experience the latest word-splitting input method in the mini program. This input method is designed for rare words with unclear pronunciation. User dismantling

C++ program to find the value of the inverse hyperbolic sine function taking a given value as argument C++ program to find the value of the inverse hyperbolic sine function taking a given value as argument Sep 17, 2023 am 10:49 AM

Hyperbolic functions are defined using hyperbolas instead of circles and are equivalent to ordinary trigonometric functions. It returns the ratio parameter in the hyperbolic sine function from the supplied angle in radians. But do the opposite, or in other words. If we want to calculate an angle from a hyperbolic sine, we need an inverse hyperbolic trigonometric operation like the hyperbolic inverse sine operation. This course will demonstrate how to use the hyperbolic inverse sine (asinh) function in C++ to calculate angles using the hyperbolic sine value in radians. The hyperbolic arcsine operation follows the following formula -$$\mathrm{sinh^{-1}x\:=\:In(x\:+\:\sqrt{x^2\:+\:1})}, Where\:In\:is\:natural logarithm\:(log_e\:k)

i9-12900H parameter evaluation list i9-12900H parameter evaluation list Feb 23, 2024 am 09:25 AM

i9-12900H is a 14-core processor. The architecture and technology used are all new, and the threads are also very high. The overall work is excellent, and some parameters have been improved. It is particularly comprehensive and can bring users Excellent experience. i9-12900H parameter evaluation review: 1. i9-12900H is a 14-core processor, which adopts the q1 architecture and 24576kb process technology, and has been upgraded to 20 threads. 2. The maximum CPU frequency is 1.80! 5.00ghz, which mainly depends on the workload. 3. Compared with the price, it is very suitable. The price-performance ratio is very good, and it is very suitable for some partners who need normal use. i9-12900H parameter evaluation and performance running scores

See all articles