订单（三）-跳转到订单确认页面——小程序页面生命周期-页面载入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_numberwx.navigateTo({url: '/pages/order/main?order_number=' + orderNumber})})

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

第三步：在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()。

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！