微信小程序页面改写组件教程

为什么需要？

微信小程序里面页面与自定义组件的区别较大，而页面的可复用程度太低了。要么就是跳转页面，要么就是copy代码。如果我们要增加代码的可复用性，就可以借用Vue组件的思想，将页面改写为自定义组件。

结构对比

两者的视图文件，样式文件没有什么区别。主要区别最大的就是js文件，我们首先来看一下两者的结构。

page.js

page({

  // 数据内容

  data:{},

  // 生命周期函数

  onLoad(){},

  // 一些自定义函数

  someMethods(){}

})

componet.js

componet({

  // 预设属性

  properties: {},

  // 数据内容

  data: {},

  //组件所在页面生命周期

  pageLifetimes: {},

  // 生命周期函数-挂载

  attached: function() {

    // 在组件实例进入页面节点树时执行

  },

  // 生命周期函数-卸载

  detached: function() {

    // 在组件实例被从页面节点树移除时执行

  },

  // 自定义函数写结构里面

  methods:{

    someMethods(){}

  }

})

我们可以看到，两者的基本相似，大同小异。所以改写起来就特别方便啦~

1. 将page改为componet

2. 适配生命周期函数，例如将页面onLoad()函数改写为组件的attached()函数

3. 将自定义函数someMethods()写到Componet的methods里面

页面改成组件之后，最容易遗漏的是输入、输出和生命周期语义。原页面通过路由参数获取的数据，通常要改成 properties；原来跳转页面才能通知外部的行为，可以改成 triggerEvent。同时要检查 onLoad、onShow 等页面周期不能原样搬进组件，而应使用组件对应的 lifetimes/pageLifetimes，否则代码看着在，实际不会被调用。

可用性说明：本文发布于 2020 年 5 月，距今已超过五年。文中涉及的软件版本、接口、下载地址、命令参数和操作界面可能已经发生变化，部分方案在当前环境下可能失效。请结合官方最新文档核对后再操作，生产环境使用前务必先行验证。

版权声明: 本文首发于 指尖魔法屋-微信小程序页面改写组件教程（https://blog.thinkmoon.cn/post/847-wechat-miniprogram-guide-component-wechat/） 转载或引用必须申明原指尖魔法屋来源及源地址！