微信小程序制作组件的两种方法

小程序生产组件包括两个方法，这是在开发小程序时必须理解的开发教程。

在第一种方式中，以下是组件的基本组件，未编写样式表，

组件的index.wxml

[html]查看普通副本

我是一个组件

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

组件{{data}}

中的值

叫方法

组件的index.js

[javascript]查看普通副本

组分（{

属性: {

//这定义了组件的外部属性，可以在使用组件时指定

文字: {

键入:字符串，

值:''

}

}，

数据: {

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

数据:'我是一个组件'，

显示: false

}，

方法: {

//这是一个自定义方法

显示:函数（）{

this.setData（{show: true}）

}

}

}）

组件的index.json

[javascript]查看普通副本

{

'component': true

}

编写组件，以下是编写组件的介绍

Page index.wxml

[html]查看普通副本

以下是组件

按钮

Page index.js

[javascript]查看普通副本

页（{

onReady: function（）{

//获取子组件

This.child=this.selectComponent（'＃child'）;

}，

clickBtn：函数（）{

This.child.show（）;

}

}）

Page index.json

[javascript]查看普通副本

{

'usingComponents': {

'child':'./child/index'

}

}

这样就完成了一个组件。

第二种方式：

组件的index.wxml

[html]查看普通副本

我是一个组件

我从父组件传递值：{{text}}

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

调用组件的方法

组件的index.js

[javascript]查看普通副本

设data={

文字:''，

数据:'我是组件本身的值'，

显示: false

}

设childPanel={

显示:函数（文本）{

让_this=this;

this.setData（{

显示:为真，

文字:文字

}）

}

}

函数child（）{

设pages=getCurrentPages（）;

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

此.__页=当前页;

Object.assign（当前是，childPanel）;

currentPage.childPanel=此;

currentPage.setData（数据）;

归还这个;

}

Module.exports={

子

}

然后在app.js中引入上面的js文件，如下所示：

App.js

[javascript]查看普通副本

从'./child/index'

导入{child}

APP（{子，

.

}）

如果您将wxss文件写入组件，则应在app.wxss中引入，如下所示：

App.wxss

[css]查看普通副本

@import'./child/index.wxss'

在需要引入组件的页面上，如下所示：

[html]查看普通副本

按钮

当前页面的js文件：

[html]查看普通副本

设app=getApp（）;

页（{

数据: {

数据:'父组件'

传递给子组件的值

}，

onLoad: function（）{

新的app.child（）;

}，

clickBtn: function（）{

This.show（this.data.data）;

}

}）

上面的app.js和app.wxss是全局引用。如果您想要本地参考，您还可以编写本地的全局介绍。

HiShop小程序工具提供多种类型的商城/商店小程序制作，可视化编辑1秒，在线生成5个步骤。通过拖动和拼接模块布局小程序商城页面，你可以看到你得到的东西，你只需要艺术家来制作一个漂亮的商场。

更多小程序开发案例，全部位于：http://www.hvihi.com/xiaocx/kaifa.html

＆lt; 汇海（www.hvihi.com）是国内知名的商城系统和商城网站建设提供商，其中汇海技术小程序系统提供小程序商城开发，小程序配送系统，微分配系统，商城系统，电子商务网站建设， 微信发行系统，小程序商城及其他多端商场和电子商务行业解决方案＆gt;

确认：这个文件和图像源网络编辑器的网站部分，如果有侵权及时通信删除。 汇海hvihi.com网站原创文章，请注明出处。