Personal learning experience for quick start of WeChat Mini Program (3)

Personal learning experience for quick start of WeChat applet (2)

1. Page jump

Matters needing attention
When performing page jumps, first the corresponding json file cannot be empty, and at least one {} is required , and then the corresponding js file needs to have the page{} attribute.
Description: navigator is a label for page jump provided by applet.

<navigator url="../demo2/demo2">go demo2</navigator>

Corresponding to json: (There must be something, at least an empty curly brace, of course, you can also directly delete the json file)
Insert picture description here
Corresponding to js: (Although there is nothing, write a page)

<!--pages/demo2/demo2.wxml-->
<navigator url="../demo3/demo3">
<image src="../../image/poster.jpg"></image>
</navigator>

Run as follows:
Insert picture description here

2. Page transfer value

The parameter transfer between pages is divided into transfer and reception:
transfer: add a question mark parameter to the jump connection

<navigator url="../demo2/demo2?name=小明&age=18">小明</navigator>
<navigator url="../demo2/demo2?name=小红">小红</navigator>

Receive: receive the first parameter (object) of onload

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    
    
      console.log(options)
  },

Insert picture description here

3. Click to highlight

There is a hover-class attribute in the navigator. If it is changed to none, there is no highlighting. Set it to the style you want.
For pictures like this, there are two methods. The first is to wrap it with a navigator tag. The second is to design it as a cursor: pointer;

<navigator hover-class="my-hover">点击高亮</navigator>
<navigator hover-class="none">点击高亮</navigator>
<image class="image-hover" src="../../image/poster.jpg" ></image>

.my-hover{
    
    
  color: brown;
}
.image-hover{
    
    
  cursor: pointer;
}

4. Page Jump API

Trigger the event through the button, and then call the method and API in js to achieve the jump.

Write a button on the demo1 page and bind the click event.

<button type="primary" bindtap="tapHandle">跳转</button>

JS wrote on the corresponding method, the method is passed by value ? Achieve

Page({
    
    

  tapHandle: function () {
    
    
      //当我们点击绑定的按钮，系统就会找到并执行这里的代码
      wx.navigateTo({
    
    
        url: '../demo2/demo2?name=123'
      })
  }
})

Add a button in demo3

<button bindtap="backHandle">返回</button>

Write method in corresponding js

Page({
    
    

  backHandle: function () {
    
    
    wx.navigateBack({
    
    
      //这里的值是控制返回到哪里，不加的话默认是上一页，加的话是多少就往前面返回多少页。
      delta: 2,
    })

  }
})

Insert picture description here
End~