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

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

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

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

HiShop小程序工具提供多类型商城/门店小程序制作，可视化编辑 1秒生成5步上线。通过拖拽、拼接模块布局小程序商城页面，所看即所得，只需要美工就能做出精美商城。