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

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

废话

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

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

思路

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

相关推荐
尘浮生1 小时前
Java项目实战II基于微信小程序的电影院买票选座系统(开发文档+数据库+源码)
java·开发语言·数据库·微信小程序·小程序·maven·intellij-idea
HerayChen4 小时前
微信小程序混合 h5 wx.miniProgram是 undefined
微信小程序·小程序·h5
耶啵奶膘8 小时前
uniapp+vue2全局监听退出小程序清除缓存
小程序·uni-app
中云DDoS CC防护蔡蔡10 小时前
微信小程序被攻击怎么选择高防产品
服务器·网络安全·微信小程序·小程序·ddos
井眼14 小时前
微信小程序-prettier 格式化
微信小程序·小程序
qq_174482857516 小时前
springboot基于微信小程序的旧衣回收系统的设计与实现
spring boot·后端·微信小程序
wqq_99225027716 小时前
springboot基于微信小程序的食堂预约点餐系统
数据库·微信小程序·小程序
licy__1 天前
微信小程序登录注册页面设计(小程序项目)
微信小程序·小程序
wqq_9922502771 天前
springboot基于微信小程序的农产品交易平台
spring boot·后端·微信小程序
说私域2 天前
基于“开源 2+1 链动模式 S2B2C 商城小程序”的社区团购运作主体特征分析
大数据·人工智能·小程序