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

为什么需要？

微信小程序里面页面与自定义组件的区别较大，而页面的可复用程度太低了。要么就是跳转页面，要么就是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里面

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