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

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

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

　　组件的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是全局引用，如果想局部引用，也可以把全局的引入写到局部去。

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