小程序怎么自定义开发组件

发布时间:2022-03-08 10:00:15 作者:iii
来源:亿速云 阅读:168

这篇文章主要讲解了“小程序怎么自定义开发组件”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“小程序怎么自定义开发组件”吧!

  小程序怎么自定义开发组件

  第一种方式,下面是一个组件的基本组成部分,样式表就不写了,

  组件的index.wxml

  [html] view plain copy

  我是组件

  传入组件的值: {{text}}

  组件内部的值{{data}}

  调用了方法

  组件的index.js

  [javascript] view plain copy

  Component({

  properties: {

  // 这里定义了组件对外的属性,属性值可以在组件使用时指定

  text:{

  type:String,

  value:''

  }

  },

  data: {

  // 这里是一些组件内部数据

  data: '我是组件',

  show:false

  },

  methods: {

  // 这里是一个自定义方法

  show: function(){

  this.setData({show:true})

  }

  }

  })

  组件的index.json

  [javascript] view plain copy

  {

  "component": true

  }

  组件写好了,下面是引入写好的组件

  页面的index.wxml

  [html] view plain copy

  下面是组件

  按钮

  页面的index.js

  [javascript] view plain copy

  Page({

  onReady: function () {

  //获得子组件

  this.child = this.selectComponent("#child");

  },

  clickBtn:function(){

  this.child.show();

  }

  })

  页面的index.json

  [javascript] view plain copy

  {

  "usingComponents": {

  "child": "../child/index"

  }

  }

  这就完成了一个组件.

  第二种方式:

  组件的index.wxml

  [html] view plain copy

  我是组件

  我是从父组件传的值:{{text}}

  我是组件本身的值{{data}}

  调用了组件的方法

  组件的index.js

  [javascript] view plain copy

  let data={

  text:'',

  data:'我是组件本身的值',

  show:false

  }

  let childPanel={

  show:function (text) {

  let _this=this;

  this.setData({

  show:true,

  text:text

  })

  }

  }

  function child() {

  let pages=getCurrentPages();

  let currentPage=pages[pages.length-1];

  this.__page=currentPage;

  Object.assign(currentPage,childPanel);

  currentPage.childPanel=this;

  currentPage.setData(data);

  return this;

  }

  module.exports={

  child

  }

  然后在app.js里引入上面的js文件,如下:

  app.js

  [javascript] view plain copy

  import {child} from './child/index'

  APP({child,

  ...

  })

  如果给组件写了wxss文件,要在app.wxss里引入,如下:

  app.wxss

  [css] view plain copy

  @import './child/index.wxss'

  在需要引入该组件的页面,如下:

  [html] view plain copy

  按钮

  当前页面的js文件:

  [html] view plain copy

  let app=getApp();

  Page({

  data:{

  data:'父组件传给子组件的值'

  },

  onLoad:function(){

  new app.child();

  },

  clickBtn:function(){

  this.show(this.data.data);

  }

  })

  上面app.js和app.wxss是全局引用,如果想局部引用,也可以把全局的引入写到局部去。

感谢各位的阅读,以上就是“小程序怎么自定义开发组件”的内容了,经过本文的学习后,相信大家对小程序怎么自定义开发组件这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是亿速云,小编将为大家推送更多相关知识点的文章,欢迎关注!

推荐阅读:
  1. 小程序如何封装自定义组件(Toast)
  2. 小程序如何实现自定义通用toast组件

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

小程序

上一篇:三级分销小程序经营模式怎么引流拓客

下一篇:兼容性CSS HACK代码的示例分析

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》