微信小程序怎么制作组件

这篇“微信小程序怎么制作组件”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“微信小程序怎么制作组件”文章吧。
　　第一种方式，下面是一个组件的基本组成部分，样式表就不写了，
　　组件的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是全局引用，如果想局部引用，也可以把全局的引入写到局部去。以上就是关于“微信小程序怎么制作组件”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注百云主机行业资讯频道。

相关推荐: pyecharts如何实现数据可视化

这篇文章将为大家详细讲解有关pyecharts如何实现数据可视化，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。pyecharts 是百度开源的，适用于数据可视化的工具，配置灵活，展示图表相对美观，顺免费云主机域名滑。pyth…