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

为什么需要？

微信小程序里面页面与自定义组件的区别较大，而页面的可复用程度太低了。要么就是跳转页面，要么就是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://blog.thinkmoon.cn/post/847_%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E9%A1%B5%E9%9D%A2%E6%94%B9%E5%86%99%E7%BB%84%E4%BB%B6%E6%95%99%E7%A8%8B/） 转载或引用必须申明原指尖魔法屋来源及源地址！