class06：声明式导航与编程式导航

一、首页案例(续)

<!--pages/home/home.wxml-->
<!-- 轮播区域 -->
<swiper indicator-dots autoplay interval="2000" circular>
  <swiper-item wx:for="{{swiperImgList}}" wx:key="id">
    <image src="{{item.imgUrl}}"></image>
  </swiper-item>
</swiper>

<!-- 分类区域 -->
<view class="grid-wrap">
  <view class="grid-item" wx:for="{{gridDataList}}" wx:key="id">
    <image src="{{item.imgUrl}}"></image>
    <text>{{item.name}}</text>
  </view>
</view>

<!-- 商品区域 -->
<view class="goods-wrap">
  <view class="goods-item" wx:for="{{goodsDataList}}" wx:key="id">
    <image src="{{item.imgUrl}}" mode="widthFix"></image>
    <text>{{item.name}}</text>
  </view>
</view>

/* pages/home/home.wxss */
swiper{
  height: 400rpx;
}
swiper image{
  width: 100%;
  height: 100%;
}
.grid-wrap{
  display: flex;
  flex-wrap: wrap;
}
.grid-wrap .grid-item{
  width: 25%;
  height: 200rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.grid-wrap .grid-item image{
  width: 60rpx;
  height: 60rpx;
}
.grid-wrap .grid-item text{
  font-size: 24rpx;
  margin-top: 10rpx;
}

.goods-wrap{
  display: flex;
  padding: 10rpx;
  justify-content: space-between;
}
.goods-wrap .goods-item{
  width: 48%;
}
.goods-wrap .goods-item image{
  width: 100%;
}
.goods-wrap .goods-item text{
  font-size: 24rpx;
  margin-left: 8rpx;
}

// pages/home/home.js
Page({
  data: {
    swiperImgList:[], //轮播数据
    gridDataList:[],  //存放网格区块的分类数据
    goodsDataList:[]  //存储商品数据
  },

  //获取轮播图片
  getSwiperImgList(){
    wx.request({
      url: 'http://localhost:4000/swiper',
      method:"GET",
      success:(res)=>{
        console.log(res);
        // res接收到数据后不能直接传到小程序组件上，故先赋值
        this.setData({
          swiperImgList : res.data
        })
      },//箭头函数中的this是外部函数的this，其本身没有this
    })
  },

  //请求网格区块的数据
  getGridDataList(){
    wx.request({
      url: 'http://localhost:4000/categories',
      method:"GET",
      success:(res)=>{
        console.log(res);
        this.setData({
          gridDataList : res.data
        })
      },//箭头函数中的this是外部函数的this，其本身没有this
      //解构赋值写法
      // success:({data:res})=>{
      //   this.setData({
      //     gridDataList : res
      //   })
      // }
    })
  },

  //获取商品数据
  getGoodsDataList(){
    wx.request({
      url: 'http://localhost:4000/goods',
      method:"GET",
      success:(res)=>{
        console.log(res);
        // res接收到数据后不能直接传到小程序组件上，故先赋值
        this.setData({
          goodsDataList : res.data
        })
      },//箭头函数中的this是外部函数的this，其本身没有this
    })
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    //页面加载时立即发起请求获取轮播数据
    this.getSwiperImgList();
    this.getGridDataList();
    this.getGoodsDataList();
  },
})

二、声明式导航

1.通过导航组件navigator实现页面跳转

注：
(1)组件导航的路径须以“/” 开头。
(2)若要跳转到TabBar页面，需要设置open-type属性为SwitchTab;

<!--pages/home2/home2.wxml-->
<navigator url="/pages/test/test">跳转到test页面</navigator> 
<navigator url="/pages/contact/contact" open-type="switchTab">跳转到TabBar指向的contact联系页面</navigator>

2.导航的三种需求

链接: https://developers.weixin.qq.com/miniprogram/dev/component/navigator.html
跳转到非tabBar页面，通过路径即可；
跳转到tabBar页面，通过路径和属性open-type=“switchTab”；
跳转到上一页面，通过属性open-type=“navigateBack”，delta="n"可设置回退的页面数n。

<!--pages/test/test.wxml-->
<!-- 后退导航：返回上n页 -->
<navigator open-type="navigateBack" delta="1">返回上一页</navigator>

###可通过声明式导航传递参数。例如：
将参数name、age、sex及其数值传递

<navigator url="/pages/test/test?name=james&age=37&sex=man"></navigator>

1.传递的参数可以在跳转的目的页面app左下角查看：

2.传递的参数也可以在跳转的目的页面中js文件中查看：

三、编程式导航

1.跳转到非tabBar页面：wx.navigateTo

页面路径必须以"/"开头:

//绑定事件
<button bindtap="goTestPage" type="primary">跳转到test页面</button>

// pages/home2/home2.js
Page({
  goTestPage(){
    //编程式导航：跳转到非tabBar页面
    wx.navigateTo({
      url: '/pages/test/test',//页面路径必须以"/"开头
    })
  },
})

2.跳转到tabBar页面：wx.switchTab

页面路径必须以"/"开头:

<button bindtap="goContectPage" type="primary">跳转到contact页面</button>

// pages/home2/home2.js
Page({
  goContectPage(){
    // 编程式导航：跳转到tabBar页面 
    wx.switchTab({
      url: '/pages/contact/contact',//页面路径必须以"/"开头
    })
  },
})

注意：编程式导航的传递参数与声明式导航传递参数的方法类似。

3.编程式导航后退(返回上一页):wx.navigateBack

链接: https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.navigateBack.html

<!--pages/test/test.wxml-->
<!-- 编程式后退导航 -->
<button bindtap="goBack" type="primary">返回上一页</button>

// pages/test/test.js
Page({
  goBack(){
    wx.navigateBack({
      delta: 1,//默认值
    })
    // wx.navigateBack()
  },
})

四、复习总结

微信小程序：

1. 什么是小程序？
   基于微信app上搭载的第3方程序，因此小程序需要依附在微信app（微信客户端）环境中。

2. 开发小程序的前期准备
   (1). 开发账号
   (2). 安装开发工具IDE
   (3). 认识工具怎么使用
   (4). 认识小程序项目的基本组成结构
   a. 全局配置
   b. 页面配置

     以上的配置，遵循就近原则。 
   

3. 学习微信小程序
   (1). WXML ： 结构
   (2). WXSS ：样式
   (3). js ：页面的js
   (4). json ：页面的配置

4. 学习WXML
   (1) 常用的组件

   1. view
   2. images
   3. navigatior
   4. button
   5. text
   6. swiper
   7. swiper-item
   8. map
      (2) 常用的语法：
   9. 都可以通过小程序提供的语法，{{}} 来动态绑定属性的值、标签内的文本
   10. 对组件/标签上添加逻辑：
       1. wx:if 逻辑判断是否渲染该组件 （创建节点 / 删除节点）
       2. wx:for 循环生成多个重复结构，内部使用的数据动态添加
       3. hidden 逻辑判断是否隐藏 / 显示组件（用样式display来控制）
   11. 以组件属性的形式添加 事件
       1. bindtap 触摸后离开（类似点击效果）
       2. bindIinput 输入内容后触发事件
       3. bindchange 状态改变

5. 学习WXSS : 跟传统的css差不太多，不支持一些复杂的选择器
   (1). rpx 单位
   (2). @import样式导入
   (3). 全局样式 / 局部样式 ： 在选择器权重相同的情况下，遵循就近原则。选择器权重不一样，使用权重更大的样式

6. json 文件
   (1). 全局配置：pages、window、style、sitemapLocation、tabbar
   (2). 页面配置（大部分是window节点，主要是对窗口效果的设置）

7. 学习 JS ：
   (1). 事件函数，内部的逻辑就完全按照需求
   (2). 发起网络请求：wx.request

   1. 常用属性：
      1. url ： 请求地址
      2. method : 请求方式
      3. success ： 请求成功后会调用的回调
      4. fail ： 请求失败后会调用的回调
      5. complete ： 不论请求成功 / 失败 都会调用
   2. 注意：
      1. 没有ajax，只能叫 网络请求
      2. 没有跨域，因为跨域是浏览器遵循同源策略会阻止非同源的请求，微信没有阻止，只需要将请求的域名添加到 信任列表
         (3). 页面导航
   3. 声明式导航：通过navigatior实现
   4. 编程式导航：通过在js中调用对应的导航方法实现
   5. 导航传参
   6. 接收导航参数
   7. 注意：导航到 tabbar页面 和 非tabbar页面 以及 后退 的区别