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

废话

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

思路

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

首页 index

为了便于调试，我们需要一个首页来访问 page-base、page-a、page-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 类型参数，其指定页面的初始数据、生命周期回调、事件处理函数等。