微信小程序怎么制作组件

这篇“微信小程序怎么制作组件”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“微信小程序怎么制作组件”文章吧。

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

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

以上就是关于“微信小程序怎么制作组件”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注编程网精选频道。