注册登录

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

2018-04-09|HiShop|阅读量:
导读:小程序制作组件包括两种方式,是开发小程序必需了解的开发教程。...

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

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

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

  组件的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步上线。通过拖拽、拼接模块布局小程序商城页面,所看即所得,只需要美工就能做出精美商城。

更多小程序开发案例,尽在:http://www.hishop.com.cn/xiaocx/kaifa.html 

文章来源:https://www.hishop.com.cn/xiaocx/show_52070.html

<海商(www.hishop.com.cn)是国内知名商城系统及商城网站建设提供商,其中销客多小程序系统为商家提供小程序商城开发、小程序分销系统、微分销系统、商城系统、电商网站建设、微信分销系统、小程序商城等多端商城及电子商务行业解决方案>

申明:本网站部分文章和图片来源网络编辑,如有侵权及时沟通删除。海商hishop网站原创文章,转载请注明来源。

  • 小程序制作规范

    最新消息:从微信、公众号、微信支付再到小程序,微信正在从一个「即时通讯工具」变成一个「操作系统」。而大家在制作的...详情
  • 2017年最新小程序制作规范

    最新消息:从微信、公众号、微信支付再到小程序,微信正在从一个「即时通讯工具」变成一个「操作系统」。而大家在制作的...详情
  • 2017年最新小程序制作规范

    最新消息:从微信、公众号、微信支付再到小程序,微信正在从一个「即时通讯工具」变成一个「操作系统」。而大家在制作的...详情
  • JAVA小程序简单制作

    最新消息:创建一个200*200的名为java的窗口,在窗口上做一个名为exit的按扭(可以覆盖整个窗口)点击该按扭退出窗口 import javax....详情
微信小程序开发文档更多
[field:title/]

[field:body function="html2text(cn_substr(@me,450))"/]....

{/dede:arclist}
小程序产品推荐
  • 移动云商城小程序
    一款会赚钱的网上商城系统——移动云商城,让零售企业转型电商更简单!独创6合一全网营销模式、裂变式推广分佣快速吸粉引流,不论微信、APP、手机触屏还是PC端网上购物商城,只要1个后台即可掌控全网最火爆的6大商城!详情
热门小程序