订单（三）-跳转到订单确认页面——小程序页面生命周期-页面载入onLoad() 应该在第一次显示页面的时候调用

跳转到订单确认页面

第一步：在pages文件夹下新建文件夹订单order文件夹

新建入口文件main.js

import Vue from 'vue'
import App from './index'

const app = new Vue(App)
app.$mount()

购物车跳转方式

      // 调用接口生成订单
      request('my/orders/create', param, 'post', {
        Authorization: token
      }).then(res => {
        // 获取订单编号，下一步就是跳转到订单确认页面
        let orderNumber = res.order_number
        wx.navigateTo({
          url: '/pages/order/main?order_number=' + orderNumber
        })
      })

第二步：新建模板文件index.vue

<template>
  <div>
   {{orderNumber}}
  </div>
</template>
<script>
export default {
  data () {
    return {
       orderNumber: '',
    }
  },
  onLoad(param){
    //获取路由参数
      this.orderNumber = param.order_number
  }
}
</script>

第三步：在src/app.json中配置路径

  "pages": [
    "pages/home/main",
    "pages/cate/main",  
    "pages/cart/main",  
    "pages/my/main",
    "pages/search/main",
    "pages/search_list/main",
    "pages/goods_detail/main",
    "pages/auth/main",
    "pages/order/main"
  ],

第四步：重启页面npm run dev

第五步：在购物车页面，点击结算按钮，订单生成跳转到订单确认页面

补：小程序 onLoad() 什么时候会调用

按官方文档解释，onLoad() 应该在第一次显示页面的时候调用，以后再次切换到该页面时，不会再调用这个函数。如下图：

实际调试中，进入一个页面时，我发现页面的 onLoad() 函数有时有调用，有时没有。原因在下面的解释中：

onLoad: 页面加载。
一个页面只会调用一次。
参数可以获取wx.navigateTo和wx.redirectTo及中的 query。

onShow: 页面显示
每次打开页面都会调用一次。

onReady: 页面初次渲染完成
一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。
对界面的设置如wx.setNavigationBarTitle请在onReady之后设置。详见生命周期

onHide: 页面隐藏
当navigateTo或底部tab切换时调用。

onUnload: 页面卸载
当redirectTo或navigateBack的时候调用。

只要是使用了 redirectTo() 或 navigateBack()，再次进入页面就会调用 onLoad()。

举个例子，内容详情页面，如果除了系统默认的左上角的 < 返回，没有提供更多的操作，用户每次离开详情页面唯有点击左上角的返回，必然调用 navigateBack(), 因此在这种情况下，用户每次进入详情页面都要执行 onLoad()。