微信小程序快速入门个人学习心得（三）

1、页面跳转

注意事项
在进行页面跳转的时候，首先对应json文件中不能为空，最少也要有一个 { }，然后对应js文件中需要有 page{} 属性。
说明：navigator 是小程序提供的页面跳转的标签。

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

对应json：（必须要有东西，最少也要是一个空的花括号，当然也可以直接删除json文件）
在这里插入图片描述
对应js:(虽然什么都没有也要写page)

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

运行如下：
在这里插入图片描述

2、页面传值

页面间参数传递分为传递和接收：
传递： 在跳转连接上加上问号参数

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

接收： 接收onload的第一个参数（对象）

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

在这里插入图片描述

3、点击高亮

在navigator中有hover-class属性，将它改为none则没有高亮，设置成自己想要的就自己写样式。
而对于图片这样的，有两个方法，第一是用一个navigator标签包裹它。第二是将它样式中设计成 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、页面跳转API

通过按钮触发事件，然后在js中调用方法和API从而实现跳转。

在demo1页面写一个按钮，并绑定点击事件。

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

在对应JS中写上方法，传值方法也是通过 ? 实现

Page({
    
    

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

在demo3中添加一个按钮

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

在对应js中写方法

Page({
    
    

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

  }
})

在这里插入图片描述
结束~