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

时间：2023-07-01 14:05 阅读数：80 人阅读分类：知识百科

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

　　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}

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

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