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

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

废话

小程序中提供了组件可以用于拆分逻辑,实现代码重用。

但有时我就想纯粹的从页面的角度来实现,毕竟组件和页面还是有点差异的。

思路

  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

js 复制代码
Page({})

index.json

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

json 复制代码
{
  "usingComponents": {}
}

index.wxml

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

xml 复制代码
<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 给子页面用。
js 复制代码
// 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

xml 复制代码
<!--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 了,我们就丢失父页的数据了。
js 复制代码
// 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

直接引用父页

xml 复制代码
<!--pages/page-a/page-a.wxml-->
<include src="/pages/page-base/page-base"/>

子页面 page-b

page-b.js

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

xml 复制代码
<!--pages/page-b/page-b.wxml-->
<include src="/pages/page-base/page-base"/>

其它

app.js

js 复制代码
App({})

app.json

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 里了。

css 复制代码
/**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 类型参数,其指定页面的初始数据、生命周期回调、事件处理函数等。

相关推荐
尚梦5 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
小飞哥liac8 小时前
微信小程序的组件
微信小程序
stormjun10 小时前
Java基于微信小程序的私家车位共享系统(附源码,文档)
java·微信小程序·共享停车位·私家车共享停车位小程序·停车位共享
paopaokaka_luck10 小时前
基于Spring Boot+Vue的助农销售平台(协同过滤算法、限流算法、支付宝沙盒支付、实时聊天、图形化分析)
java·spring boot·小程序·毕业设计·mybatis·1024程序员节
Bessie23412 小时前
微信小程序eval无法使用的替代方案
微信小程序·小程序·uni-app
shenweihong12 小时前
javascript实现md5算法(支持微信小程序),可分多次计算
javascript·算法·微信小程序
蜕变菜鸟12 小时前
小程序跳转另一个小程序
小程序
16 小时前
躺平成长-代码开发,利用kimi开发小程序(09)
小程序
19 小时前
微信小程序运营日记(第四天)
微信小程序·小程序
guanpinkeji19 小时前
旧衣回收小程序:提高回收效率,扩大服务范围
大数据·小程序·团队开发·软件开发·小程序开发·旧衣回收·旧衣回收小程序