小程序制作组件包括两种方式，，，是开发小程序必需相识的开发教程。
。。。。。

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

　　组件的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

　　组件的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秒天生5步上线。
。。。。。通过拖拽、拼接模浚？？？榻峁剐〕绦蛏坛且趁，，，所看即所得，，，只需要美工就能做出细腻商城。
。。。。。