微信小程序原型组件是什么?

发布:2017-04-27 14:46:29来源:lm8023yjw阅读:690

  微信小程序原型组件是什么?以下是小编专门整理的微信小程序原型组件是什么的内容。如果您对微信小程序原型组件不了解,希望以下的全部内容对您有帮助,以下内容供您参考。

  1. 一个组件的组成部分一个微信小程序有四中格式的文件*.wxml、*.wxss、*.js和*.json,*.json其实是小程序和页面的配置文件,开发组件的时候,就不需要这个了。我这里开发一个登陆弹出框组件,我把组件放在component文件夹下:

  123456789101112131415

  Wechat-APP/├─app.js├─app.json├─app.wxss├─component/│ └─login-pannel/│ ├─login-pannel.js│ ├─login-pannel.wxml│ └─login-pannel.wxss├─image/├─pages/│ ├─index/│ ├─merchant-detail/│ └─merchant-list/└─utils/

  可见,组件也是由三个部分组成。

  1.1. wxml首先新建组件的模版,/component/login-pannel/login-pannel.wxml,同时,给定义的模版一个唯一标识,代码如下:

  123456789101112131415

  {{ verifyText }} 注册/登录

  官方提供了模版的概念,同时又给出了两种引用方式:import 和 include。include 方式是将你的模版原封不动的“粘贴”到引用的地方,而我们这里开发的是一个交互组件,势必会碰到数据绑定和事件绑定,所以我们最终引用的时候,使用 import 的形式来使用组件。

  1.2. wxss定义组件的样式,/component/login-pannel/login-pannel.wxss。样式没什么好说的,这里略过。

  1.3. js首先定义组件的构造函数,构造函数主要做两件事:

  把组件的数据“注入”到页面的data对象中;

  把组件的事件“合并”到页面对象上。

  小程序文档中,关于数据和事件,是这么描述的:

  如bindtap,当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数。

  WXML 中的动态数据均来自对应 Page 的 data。

  模板拥有自己的作用域,只能使用 data 传入的数据。

  这样,想实现模版的数据绑定,只能想办法把组件上的数据“追加”到页面的 data 对象上去;同理,想实现组件的事件绑定,则需要把组件的事件也“传给”页面函数Page。同时,为了防止影响到其它组件,还要给数据和事件都限定了“命名空间”:

  1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283

  let _compData = { '__lgpanel__.isHide': true, '__lgpanel__.phoneNum': '', '__lgpanel__.verifyCode': '', '__lgpanel__.verifyText': '获取验证码', '__lgpanel__.phoneClass': '', '__lgpanel__.vcodeClass': ''}let _compEvent = { __lgpanel_timer: null, __lgpanel_countDown: 60, __lgpanel_close: function () { clearInterval(this.__lgpanel_timer) this.__lgpanel_countDown = 60 this.setData(_compData) }, __lgpanel_sendCode: function () { if (this.__lgpanel_countDown < 60) { return } this.setData({ '__lgpanel__.verifyText': this.__lgpanel_countDown + 's' }) this.__lgpanel_timer = setInterval(() => { this.__lgpanel_countDown-- if (this.__lgpanel_countDown <= 0) { clearInterval(this.__lgpanel_timer) this.__lgpanel_countDown = 60 this.setData({ '__lgpanel__.verifyText': '重新获取' }) return } this.setData({ '__lgpanel__.verifyText': this.__lgpanel_countDown + 's' }) }, 1000) typeof this.loginPannel._configs.sendCode == "function" && this.loginPannel._configs.sendCode() }}// 小程序最新版把原型链干掉了。。。换种写法let loginPannel = { show: function(data) { this.__page.setData({'__lgpanel__.isHide': false}) if (data) { Object.assign(this._configs, data) } }}function LoginPannel () { // 定义组件的一些回调 this._configs = { sendCode: null, closeCode: null, login: null } // 拿到当前页面对象 let pages = getCurrentPages() let curPage = pages[pages.length - 1] // 把组件的事件“合并到”页面对象上 Object.assign(curPage, _compEvent) this.__page = curPage Object.assign(curPage, loginPannel) // 小程序最新版把原型链干掉了。。。换种写法 // 附加到page上,方便访问 curPage.loginPannel = this // 把组件的数据“注入”到页面的data对象中 curPage.setData(_compData) return this}

  同时,在组件的构造函数的原型链上追加“启动”函数,(微信小程序最新版把原型链干掉了。。。)在构造函数中,把启动方法合并到LoginPannel对象上去,同时把LoginPannel暴露出去:

  1234567891011

  /* LoginPannel.prototype.show = function(data) { this.__page.setData({'__lgpanel__.isHide': false}) if (data) { Object.assign(this._configs, data) }} */module.exports = { LoginPannel}

  到这里,一个组件就写好了。

  以上就是小编整理的微信小程序原型组件是什么的内容,希望以上的内容能对您有帮助,如果您想了解更多精彩的微信素材,敬请多多的关注微素达网哦。更对精彩内容等着您。

相关推荐:

怎样用微信小程序赚钱背后隐藏着什么?  

微信小程序对创业者的创业思路有哪些影响?

微信小程序潜伏哪些商机?

发表评论
微微风
昵称

热门文章

更多

如何提高微信公众号文章点击量和转发量?

1

好看的微信男女头像,欧美男女头像分享

2

么么哒表情包分享,么么哒表情有哪些?

3

biu手指打枪爱心表情包分享,发送爱心表情包大全

4

微信支付勒索病毒是什么意思?什么是微信支付勒索病毒?

5

微信清理恶意账号是怎么回事?发生了什么?

6

微信卡包如何获得红包?怎样领红包?

7

微信公众号文章修改错别字规则是什么?有什么要注意的?

8

微信搜一搜如何做排名?优化排名的方法是什么?

9

微信如何开通公交车扫码付款?方法是什么?

10

最近更新

更多
1微信视频号直播场观购买平台
2如何防止微信群被封呢?
3微信直播的形式有哪些?
4绑定微信安全码有什么方法?
5微信怎么设置安全码?微信密码怎么修改?
6微信小程序怎样助力门店争抢红利市场?
7微信小程序怎样禁用?具体怎么操作?
8微信公众平台有什么作用?
9微信号怎么做推广?有哪些方法?
10如何关闭微信小程序?步骤是什么?