小程序自定义组件

公司要开发小程序,之前用惯了vue里面各种组件化,于是尝试在小程序里也尝试用组件化开发,官网的文档实在简单,网上找了个demo,照着方法基本可以实现,先记录一下。
先上效果图。

屏幕快照 2018-03-16 下午3.58.45.png

首先需要新建components,再右键新建component,输入对应的组件名称
屏幕快照 2018-03-16 下午4.01.19.png

在popLogin.json配置如下
{ "component": true, "usingComponents": {} }
pop.wxml和popLogin.wxss跟普通的写法一样,不累赘。
重点是组件通信,跟vue的组件通信很像,prop进行父组件向子组件传值,而子组件向父组件传值采用triggerEvent,
this.triggerEvent("loginStatus",{'isLogin':true});
父组件向子组件传值采用properties,跟vue的props很像
properties: { //传值标题 title: { // 属性名 type: String, // 类型(必填),目前接受的类型包括:String, Number, Boolean, Object, Array, null(表示任意类型) value: '标题' // 属性初始值(可选),如果未指定则会根据类型选择一个 }, },
index.json配置component
"usingComponents": { "popLogin": "/components/PopLogin/popLogin" }
然后调用就可以了,具体项目上都有。

具体项目放到github上了

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 微信小程序中的组件 前言 之前做小程序开发的时候,对于开发来说比较头疼的莫过于自定义组件了,当时官方对这方面的文档...
    一梦欧巴阅读 755评论 0 1
  • 组件化是web、移动开发的大趋势,一次开发多次使用,调用方便,解耦性好。当然在小程序开发是一个趋势。 官网:htt...
    共田君阅读 2,147评论 0 0
  • 微信小程序不支持自定义组件,只提供了一个非常受限制的模板功能,尤其缺乏了开发产品中最重要的几个功能: 模板内的数据...
    Keith1314阅读 7,400评论 0 3
  • 前言 微信小程序自1月19号发布后,可谓是有人欢喜有人忧啊.曾经对它一度抱有各种期待的前端工作者们在张总的一句句:...
    LinDaiDai_霖呆呆阅读 6,214评论 6 11
  • 本套组件结合了微信的视觉规范,为用户提供更加统一的使用感受。包含: 底部弹出视图(Dialog)、支付密码输入框(...
    R_yan阅读 2,057评论 0 9