〔开发系列〕一次关于小程序开发的深度总结

Godtoy 发布于2019-08-02 12:01 / 1902人阅读

摘要：一路由跳转需求如何获取当前页面的上一个页面场景用于判断返回哪一个页面的时候使用当前页上一个页面封装返回上一个页面的方法封装返回上一个页面的方法判断上一个页面然后返回上一个页面发布页或者订单页上一个页面调用方法如何返回上上个页面返回上一

一路由跳转

需求：如何获取当前页面的上一个页面
场景：用于判断返回哪一个页面的时候使用

const pages = getCurrentPages();
const Page = pages[pages.length - 1];//当前页
const prevPage = pages[pages.length - 2];  //上一个页面

1. 封装返回上一个页面的方法

// 封装返回上一个页面的方法：
export function navigateBackByPage() {
    // 判断上一个页面 然后返回上一个页面： 发布页或者订单页
    const pages = getCurrentPages();
    const prevPage = pages[pages.length - 2];  //上一个页面
    if (prevPage) {
        wx.navigateBack();
    }
}
// 调用方法
navigateBackByPage();

2. 如何返回上上个页面

wx.navigateBack({
 delta: 2
})

3. 返回上一页的时候把当前页的数据传递会上一个页面

const pages = getCurrentPages();
const prevPage = pages[pages.length - 2]; //上一个页面
// 直接调用上一个页面的setData()方法，把数据存到上一个页面中去
prevPage.setData({
   orderId: orderId
});
wx.navigateBack();

二列表页传递id获取详情页数据

// 01 遍历列表页 获取每一项item的id 绑定到data属性中

     {{item.title}}
 
// 02 列表页 通过事件和参数传递id
toOrderDetail(e) {
   const id = e.currentTarget.dataset.id;
   wx.navigateTo({
      url:"order-detail/order-detail?id=" + id
   })
}

// 03 详情页 在onload中间中拿到URL传递过来的参数id 请求详情页接口 拼接id参数
onLoad(option) {
    const id = option.id;
    const detailApi = "http://192.168.1.142:8096/app/FindOrder/findOrderById?orderId=" + id
      发起请求···
}

三动态设置页面顶部导航栏标题

说明

01 onload中不能设置，因为onload过程中页面并没有生成，所以不能操作UI，onShow渲染页面只是一瞬间，也不能展示UI，js中操作UI和设置展示UI，只能用onReady,onLoad和onShow用来处理数据请求，处理业务逻辑
02 （重点思路）在onLoad获取数据，传递到data；onReady使用data中的数据渲染导航

// 01 数据初始化
data：{
  navigationTitle：""
}
// 02 在onLoad中获取列表页js传递过来的参数：
// 场景一：列表页传递数据给详情页
// 场景一：直接请求接口获取数据，如果情面有多种状态，通过不同状态动态设置导航
onLoad(option) {
   const title = option.title;
   this.setData({
     navigationTitle:title
   })
}
// 03 需要在onReady生命周期中设置导航条：
onReady() {
   wx.setNavigationBarTitle({
      title:this.data.navigetionTitle
   })
}

四跨页全局传递数据的两种方法

场景：实时数据传递

通过app.js中的全局变量globalData：{ }，当前页的数据赋值给全局变量，另一个页面实时获取全局变量的值

// 页面a 
app.globalData.workTypeId= workTypeId;
// 页面b
const workTypeId= app.globalData.workTypeId

场景：从持久化数据中获取数据

通过缓存来缓存数据在任意页面获取

wx.setStorageSync("userInfoLogin", userInfoLogin); // 登陆后缓存用户userId
// 封装获取id的方法
export function getStorageUserId() {
    const userInfoLogin = wx.getStorageSync("userInfoLogin");
    return userInfoLogin.id;
}
// 调用
const userId getStorageUserId()

持续更新中···

超融合服务器混合云免费的小程序开发小程序开发的流程简单的小程序开发个人的小程序开发

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/53282.html

〔开发系列〕一次关于小程序开发的深度总结

摘要：一路由跳转需求如何获取当前页面的上一个页面场景用于判断返回哪一个页面的时候使用当前页上一个页面封装返回上一个页面的方法封装返回上一个页面的方法判断上一个页面然后返回上一个页面发布页或者订单页上一个页面调用方法如何返回上上个页面返回上一一路由跳转需求：如何获取当前页面的上一个页面场景：用于判断返回哪一个页面的时候使用 const pages = getCurrentPages();...

Bryan 2019-08-29 17:16 评论0 收藏0
前端资源系列（3）-微信小程序开发资源汇总

摘要：微信小程序应用号开发资源汇总文档工具教程代码插件组件文档从搭建一个微信小程序开始小程序开发文档小程序设计指南工具小程序开发者工具官方支持微信小程序实时预览的支持的微信小程序组件化开发框架转在线工具小程序云端增强社区微信小程序微信(小程序or应用号)开发资源汇总-文档-工具-教程-代码-插件-组件文档从搭建一个微信小程序开始小程序开发文档小程序设计指南工具小程序开发者...

seanlook 2019-08-05 10:11 评论0 收藏0
前端资源系列（3）-微信小程序开发资源汇总

摘要：微信小程序应用号开发资源汇总文档工具教程代码插件组件文档从搭建一个微信小程序开始小程序开发文档小程序设计指南工具小程序开发者工具官方支持微信小程序实时预览的支持的微信小程序组件化开发框架转在线工具小程序云端增强社区微信小程序微信(小程序or应用号)开发资源汇总-文档-工具-教程-代码-插件-组件文档从搭建一个微信小程序开始小程序开发文档小程序设计指南工具小程序开发者...

paney129 2019-08-20 11:14 评论0 收藏0
架构 - 收藏集 - 掘金

摘要：浅谈秒杀系统架构设计后端掘金秒杀是电子商务网站常见的一种营销手段。这两个项目白话网站架构演进后端掘金这是白话系列的文章。浅谈秒杀系统架构设计 - 后端 - 掘金秒杀是电子商务网站常见的一种营销手段。不要整个系统宕机。即使系统故障，也不要将错误数据展示出来。尽量保持公平公正。实现效果秒杀开始前，抢购按钮为活动未开始。秒杀开始时，抢购按钮可以点击下单。秒杀结束后，按钮按钮变...

Riddler 2019-06-24 17:54 评论0 收藏0
Java 初学者做的第一个微信小程序总结--关于Java基础

摘要：官方资料微信公众平台注册小程序。官网开发文档社区开发工具部署微信小程序微信小程序本身不需要部署，在微信开发工具中直接上传代码就行。为什么学习 Java 三年，目前已经工作了2年，因为自学，基础差，所以打算年末总结一下常见的基础知识和面试点；也可以通过独立做一个项目整合自己工作期间学习的知识，加深印象。但是想着回家或是平时手机用的多，做一款APP和小程序很方便查看。项目展示本...

mudiyouyou 2019-08-16 14:30 评论0 收藏0