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

为什么需要?

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

 继续浏览关于 微信小程序uni-app 的文章

 本文最后更新于:2020/05/01 22:29:12,可能因经年累月而与现状有所差异

 引用转载请注明:指尖魔法屋 > 教程分享 > 微信小程序页面改写组件教程

精选评论

  1. 回复

    未知操作系统未知浏览器

    很棒棒哦

  2. 嘟嘟
    嘟嘟 回复

    Windows 10Chrome 74.0.3729.131

    大佬,我想自己写一个2D小人的插件,然后放在小程序中,如果用canvas的话,我可画不出来太过于精美的模型,但是用UI提供的图片的话,动态效果以及3D的效果都不会太好,我听说有种用软件制作模型然后生成canvas的。大佬你知不知道这是怎么实现的,具体有没有做过相关的东西啊

    1. 醉月思

      没有做过,我去了解一下

  3. 回复

    未知操作系统未知浏览器

    这个