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

微信小程序快速入门个人学习心得(二)

1、页面跳转

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

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

对应json:(必须要有东西,最少也要是一个空的花括号,当然也可以直接删除json文件)
微信小程序快速入门个人学习心得(三)_第1张图片
对应js:(虽然什么都没有也要写page)
微信小程序快速入门个人学习心得(三)_第2张图片

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

运行如下:
微信小程序快速入门个人学习心得(三)_第3张图片

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,
    })

  }
})

微信小程序快速入门个人学习心得(三)_第4张图片
结束~

你可能感兴趣的:(新手,微信小程序,小程序)