微信小程序 - 页面继承(非完美解决方案)

微信小程序 - 面页继承(非完美解决方案)

  • 废话
  • 思路
  • 首页 index
    • index.js
    • index.json
    • index.wxml
  • 父页面 page-base
    • page-base.js
    • page-base.wxml
  • 子页面 page-a
    • page-a.js
    • page-a.wxml
  • 子页面 page-b
    • page-b.js
    • page-b.wxml
  • 其它
    • app.js
    • app.json
    • app.wxss
  • 参考资料

废话

小程序中提供了组件可以用于拆分逻辑,实现代码重用。
但有时我就想纯粹的从页面的角度来实现,毕竟组件和页面还是有点差异的。

思路

  1. 将共用的代码放在一个 page-base 中。
  2. 在两个子页面 page-a page-b 中分别引用它。
  3. 想查看 page-base 要在编译后先点 page-base
    如果先点了 page-apage-b 再点 page-basepage-base 页的 Page() 没执行,所以页面没东西。(这就是不完美的地方)

在这里插入图片描述

首页 index

为了便于调试,我们需要一个首页来访问 page-basepage-apage-b

index.js

Page({})

index.json

所有页面都没使用组件,所以全是这样。后面几个页面的就不贴了。

{"usingComponents": {}
}

index.wxml

首页共三个按钮,分别跳转三个页面。

<scroll-view class="scrollarea" scroll-y type="list"><view class="container"><navigator url="/pages/page-base/page-base" open-type="navigate">  <button class="btn">页面base</button></navigator><navigator url="/pages/page-a/page-a" open-type="navigate">  <button class="btn">页面A</button></navigator><navigator url="/pages/page-b/page-b" open-type="navigate">  <button class="btn">页面B</button></navigator></view>
</scroll-view>

父页面 page-base

page-base.js

  1. 在这个 js 中,我们将 Page 的参数对象 basePage 提出来。
  2. 判断当前页是 page-base 时才执行 Page() 方法。
  3. 最后导出 basePage 给子页面用。
// pages/page-base/page-base.js
let basePage = {data: {title: 'basePage',question: `西北玄天一朵云`,test: `我在 page-base`},onLoad(options) {wx.setNavigationBarTitle({ title: this.data.title, });},question(e){wx.showToast({ title: `${this.data.question}`, duration: 300 });},answer(e){wx.showToast({ title: `乌鸦落在凤凰群`, duration: 300 });},test(e){wx.showToast({ title: `${this.data.test}`, duration: 300 });}
}
// 避免子页面执行此 Page 报错
if(decodePathName == "pages/page-base/page-base"){Page(basePage);
}module.exports = {basePage
}

page-base.wxml

这里我们给了三个按钮,并绑定了 top 事件。点击后会弹出 Toast

<!--pages/page-base/page-base.wxml-->
<view class="container"><button class="btn" bind:tap="question"></button><button class="btn" bind:tap="answer"></button><button class="btn" bind:tap="test">test</button>
</view>

子页面 page-a

page-a.js

  1. require 导入父页面的 js模块 ,拿到 basePage
  2. 利用es6 的新特性展开 basePage 与子页的内容组成新的对象。(实现继承父页面js的效果)
    2.1. 我们在子页面重写了 data 对象和 answer 方法。
    2.2. 注意:data对象的内容也要单独处理,不然它直接覆盖父页面的 data 了,我们就丢失父页的数据了。
// pages/page-a/page-a.js
const { basePage } = require('../page-base/page-base.js');Page({...basePage,data: {...basePage.data,title: 'pageA',question: '满桌都是英雄汉',},answer(e){wx.showToast({ title: `哪是君来哪是臣`, duration: 300 });}
})

page-a.wxml

直接引用父页

<!--pages/page-a/page-a.wxml-->
<include src="/pages/page-base/page-base"/>

子页面 page-b

page-b.js

// pages/page-b/page-b.js
const { basePage } = require('../page-base/page-base.js');Page({...basePage,data: {...basePage.data,title: 'pageB',question: '西北玄天一枝花',},answer(e){ wx.showToast({ title: `天下绿林是一家`, duration: 300 }); }
})

page-b.wxml

<!--pages/page-b/page-b.wxml-->
<include src="/pages/page-base/page-base"/>

其它

app.js

App({})

app.json

{"pages": ["pages/index/index","pages/page-a/page-a","pages/page-b/page-b","pages/page-base/page-base"],"window": {"backgroundTextStyle": "light","navigationBarBackgroundColor": "#fff","navigationBarTitleText": "面页共享代码Demo","navigationBarTextStyle": "black"},"style": "v2","componentFramework": "glass-easel","sitemapLocation": "sitemap.json","lazyCodeLoading": "requiredComponents"
}

app.wxss

所有样式都放在 app.wxss 里了。

/**app.wxss**/
page {height: 100vh;width: 100vw;display: flex;flex-direction: column;
}.container {height: 100%;display: flex;flex-direction: column;justify-content: flex-start;align-items: center;padding: 200rpx 0;box-sizing: border-box;
} .btn {margin: 60rpx 0;border: 2px #888 solid;
}

参考资料

Page(Object object) 注册小程序中的一个页面。接受一个 Object 类型参数,其指定页面的初始数据、生命周期回调、事件处理函数等。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/123561.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

BI是什么?想要了解BI需要从哪些方面入手?

企业为了执行数字化战略&#xff0c;实行数字化转型&#xff0c;实现数据价值&#xff0c;除了需要相关数字化技术及理念、人才等&#xff0c;还需要借助数字化相关应用&#xff0c;例如商业世界中广受企业欢迎的ERP、OA、CRM等业务信息系统&#xff0c;以及上升势头非常迅猛的…

【STM32】STM32中断体系

一、STM32的NVIC和起始代码中的ISP 1.NVIC(嵌套向量中断控制器) (1)数据手册中相关部分浏览 (2)地址映射时0地址映射到Flash或SRAM (3)中断向量表可以被人为重新映射&#xff0c;一般用来IAP中 (4)STM32采用一维的中断向量表 (5)中断优先级设置有点复杂&#xff0c;后面细说 1…

Redis之Lua脚本讲解

这里写自定义目录标题 1 Lua1.1 简介1.1.1 注释1.1.2 变量1.1.3 数据类型1.1.4 控制结构1.1.5 函数1.1.6 模块1.1.7 字符串操作1.1.8 错误处理1.1.9 标准库 1.2 Redis和Lua脚本结合优点1.3 Lua脚本应用和调试1.3.1 缓存更新1.3.2 原子操作1.3.3 数据处理1.3.4 分布式锁1.3.5 Re…

fio performance test

fio参数解释 可以使用fio -help查看每个参数&#xff0c;具体的参数左右可以在官网查看how to文档&#xff0c;如下为几个常见的参数描述 filename/dev/emcpowerb 支持文件系统或者裸设备&#xff0c;-filename/dev/sda2或-filename/dev/sdb 或 -filename/dev/nvme0n1direct…

【排序算法】 归并排序详解!分治思想!

&#x1f3a5; 屿小夏 &#xff1a; 个人主页 &#x1f525;个人专栏 &#xff1a; 算法—排序篇 &#x1f304; 莫道桑榆晚&#xff0c;为霞尚满天&#xff01; 文章目录 &#x1f4d1;前言&#x1f324;️归并排序的思想☁️基本思想☁️归并的思想实现☁️分治法 &#x1f3…

IOC课程整理-20 Spring 应用上下文生命周期

0.目录 1. Spring 应用上下文启动准备阶段 2. BeanFactory 创建阶段 3. BeanFactory 准备阶段 4. BeanFactory 后置处理阶段 5. BeanFactory 注册 BeanPostProcessor 阶段 6. 初始化內建 Bean&#xff1a;MessageSource 7. 初始化內建 Bean&#xff1a;Spring 事件广播器…

计算机毕业设计选题推荐-戏曲文化苑微信小程序/安卓APP-项目实战

✨作者主页&#xff1a;IT研究室✨ 个人简介&#xff1a;曾从事计算机专业培训教学&#xff0c;擅长Java、Python、微信小程序、Golang、安卓Android等项目实战。接项目定制开发、代码讲解、答辩教学、文档编写、降重等。 ☑文末获取源码☑ 精彩专栏推荐⬇⬇⬇ Java项目 Python…

Springboot 使用JavaMailSender发送邮件 + Excel附件

目录 1.生成Excel表格 1.依赖设置 2.代码&#xff1a; 2.邮件发送 1.邮件发送功能实现-带附件 2.踩过的坑 1.附件名中文乱码问题 3.参考文章&#xff1a; 需求描述&#xff1a;项目审批完毕后&#xff0c;需要发送邮件通知相关人员&#xff0c;并且要附带数据库表生成的…

Linux C/C++ 实现网络流量分析(性能工具)

网络流量分析的原理基于对数据包的捕获、解析和统计分析&#xff0c;通过对网络流量的细致观察和分析&#xff0c;帮助管理员了解和优化网络的性能、提高网络安全性&#xff0c;并快速排查和解决网络故障和问题。 Linux中的网络流量常见类型 在Linux中&#xff0c;网络流量可以…

校园物业报修小程序开发笔记一

背景 校园规模和复杂性&#xff1a; 大型学校和校园通常拥有众多的建筑物、设施和设备&#xff0c;需要有效的维护和报修系统&#xff0c;以满足学生、教职员工和校园管理人员的需求。 学生和员工需求&#xff1a; 学生和员工在校园内可能遇到各种维修问题&#xff0c;如故障的…

ESP8266,手机与电脑之间的TCP通讯

电脑端运行通讯猫调试助手,作为服务端: 电脑端 电脑的IP地址是: 192.168.2.232 手机与电脑之间的TCP通讯 手机端运行网络调试精灵,作为客户端: 手机端 如果从手机端点击"发送"按钮,则也会将"ghhh东方红广场"几个字发送到电脑上(服务端). ESP8266作为客户…

53.MongoDB分片集群高级集群架构详解

MongoDB分片集群架构详解 为什么要使用分片 分片&#xff08;shard&#xff09;是指在将数据进行水平切分之后&#xff0c;将其存储到多个不同的服务器节点上的一种扩展方式。 一个复制集能承载的容量和负载是有限的&#xff0c;遇到以下场景就需要考虑使用分片 存储容量需…

elasticsearch一些重要的配置参数

先看一下官网给我们提供的全部的参数配置项 官网地址 官方文档链接&#xff1a;注意版本是8.1Configuring Elasticsearch | Elasticsearch Guide [8.1] | Elastic​编辑https://www.elastic.co/guide/en/elasticsearch/reference/current/settings.html 重要&#xff08;基本…

VSCode snippets

生成工具&#xff1a;https://snippet-generator.app/ VSCode snippets&#xff1a;https://code.visualstudio.com/docs/editor/userdefinedsnippets#/ VS Code 中的 Snippets 是一种快捷方式&#xff0c;可以帮助你更快地编写代码。你可以创建自己的 Snippets&#xff0c;也…

【2023Mathorcup大数据】B题 电商零售商家需求预测及库存优化问题 python代码解析

【2023Mathorcup大数据】B题 电商零售商家需求预测及库存优化问题 python代码解析 1 题目 2023 年MathorCup 高校数学建模挑战赛——大数据竞赛赛道B&#xff1a;电商零售商家需求预测及库存优化问题电商平台存在着上千个商家&#xff0c;他们会将商品货物放在电商配套的仓库…

通道洗牌的思想神了

大家好啊&#xff0c;我是董董灿。 昨天写了一篇关于分组卷积的文章&#xff1a;分组卷积的思想神了&#xff0c;然后有同学希望多了解下通道洗牌。 我个人感觉&#xff0c;通道洗牌这个算法&#xff0c;或者说这个思想&#xff0c;可以称之为小而精&#xff0c;并且是实际解…

mysql 练习3

数据表介绍 --1.学生表 Student(SId,Sname,Sage,Ssex) --SId 学生编号,Sname 学生姓名,Sage 出生年月,Ssex 学生性别 --2.课程表 Course(CId,Cname,TId) --CId 课程编号,Cname 课程名称,TId 教师编号 --3.教师表 Teacher(TId,Tname) --TId 教师编号,Tname 教师姓名 --4.成绩…

rust 创建多线程web server

创建一个 http server&#xff0c;处理 http 请求。 创建一个单线程的 web 服务 web server 中主要的两个协议是 http 和 tcp。tcp 是底层协议&#xff0c;http 是构建在 tcp 之上的。 通过std::net库创建一个 tcp 连接的监听对象&#xff0c;监听地址为127.0.0.1:8080. us…

NEFU数字图像处理(三)图像分割

一、图像分割的基本概念 1.1专有名词 前景和背景 在图像分割中&#xff0c;我们通常需要将图像分为前景和背景两个部分。前景是指图像中我们感兴趣、要分割出来的部分&#xff0c;背景是指和前景不相关的部分。例如&#xff0c;对于一张人物照片&#xff0c;人物就是前景&…

python把ChestX-Det-Dataset的json样本转为COCO数据集的json格式

ChestX-Det-Dataset数据集网址&#xff1a;https://github.com/Deepwise-AILab/ChestX-Det-Dataset/tree/main 数据集JSON内容&#xff1a; [{"file_name": "36199.png","syms": [],"boxes": [],"polygons": []},{"f…