范围:深圳亚博app开发,软件定制开发,亚博app软件开发公司,深圳软件外包公司.TEL:3447249690
当前位置:首页 > app小程序

亚博-微信小程序组件封装开发教程

06-25 亚博APP
摘要:本身封装的一个比力简单微信弹窗小组件,首要就是教会大师对微信小组件的用法和理解,由于微信小法式对组件介绍特殊少,所以我就把本身的理解分享给大师。

概述

本身封装的一个比力简单微信弹窗小组件,首要就是教会大师对微信小组件的用法和理解,由于微信小法式对组件介绍特殊少,所以我就把本身的理解分享给大师。

一媒介

相信大师在开辟小法式时会碰到某个功能屡次利用的环境,好比弹出框。这个时辰大师起首想到的是组件化开辟,就是把弹出框封装成一个组件,然后哪里利用哪里就挪用,对,看来大师都是有思绪的人,可是要如何实现呢。可能你会去看官方文档,可是微信的官方文档也是说的不太清晰,所以写起来也长短常疾苦。今天就和大师一路开辟微信组件,坐稳了,老司机要开车了。

二具体实现

我们先实现个简单的弹窗组件,详情图以下:

/

1.新建component文件夹寄存我们的组件,里边寄存的就是我们所用的组件,我们今天要做的事弹出框,新建文件夹popup寄存我们的组件模板,点击右键选择新建component,就会主动生成组件的模板wxss、wxml、json、js,如图

/

2.我们可以写一些组件样式和结构,跟页面写法近似,就不多说了,

样式和结构和结构已写好了接下来要介绍的就是

Component组织器

Component组织器可用在界说组件,挪用Component组织器时可以指定组件的属性、数据、方式等。

/

Tips:

Component组织器组织的组件也能够作为页面利用。

利用this.data可以获得内部数据和属性值,但不要直接点窜它们,应利用setData点窜。

生命周期函数没法在组件方式中经由过程this拜候到。

属性名应避免以 data 开首,即不要定名成dataXyz如许的情势,由于在 WXML 中,data-xyz=会被作为节点 dataset 来处置,而不是组件属性。

在一个组件的界说和利用时,组件的属性名和data字段彼此间都不克不及冲突(虽然它们位在分歧的界说段中)。

component介绍完后就是最为要害的js了

popup.js:

Component({

options: {

multipleSlots: true // 在组件界说时的选项中启用多slot撑持

},

/** * 组件的属性列表 */

properties: {

title: {

// 属性名 type: String,

// 亚博类型(必填),

今朝接管的类型包罗:String, Number, Boolean, Object, Array, null

(暗示肆意类型)

value: \'题目\' // 属性初始值(可选),假如未指定章会按照类型选择一个

}, // 弹窗内容

content: {

type: String,

value: \'内容\'

}, // 弹窗打消按钮文字

btn_no: {

type: String,

value: \'打消\' },

// 弹窗确认按钮文字

btn_ok: {

type: String,

value: \'肯定\' } },

/** * 组件的初始数据 */

data: {

flag: true,

},

/** * 组件的方式列表 */

methods: {

//埋没弹框

hidePopup: function () {

this.setData({

flag: !this.data.flag

}) },

//展现弹框

showPopup () {

this.setData({

flag: !this.data.flag

}) },

/* * 内部私有方式建议以下划线开首 * triggerEvent 用在触发事务 */

_error () {

//触发打消回调

this.triggerEvent(error) },

_success () {

//触发成功回调

this.triggerEvent(success);

}

}})

上边会用到一个triggerEvent下面我们就来介绍下:

自界说组件触发事务时,需要利用triggerEvent方式,指定事务名、detail对象和事务选项。

触发事务的选项包罗:

/

此刻一个弹窗的组件就封装好了接下来就是挪用了。挪用的时辰需要在挪用的页面新建一个json文件,json文件里需要设置装备摆设usingComponents就是援用组件,看代码:

index.json

{

usingComponents: {

popup: /component/popup/popup

}}

此刻根基上完成了需要的就是在首页援用了,设置装备摆设index.js加上点击事务

//index.js//获得利用实例

const app = getApp()

Page({

onReady: function () {

//取得popup组件

this.popup = this.selectComponent(#popup);

},

showPopup() {

this.popup.showPopup();

},

//打消事务

_error() {

console.log(\'你点击了打消\');

this.popup.hidePopup();

},

//确认事务

_success() {

console.log(\'你点击了肯定\');

this.popup.hidePopup();

}})

至此,一个弹窗组件就完成了。

微信小法式专题保举:漫画小法式门票小法式

版权保护: 本文由 亚博app开发 原创
转载请保留链接: http://www.jiayuanLi.com

关于我们      深圳亚博app定制开发软件有限公司,自2013年成立以来,为上千家企业提供软件外包、系统软件开发、亚博app开发、微信公众号开发、深圳亚博小程序开发等各种优秀的软件定制开发服务.关键词:软件外包公司、手机软件开发、app制作开发、手机亚博app开发、小程序开发公司【TEL】:3447249690 微信:3447249690 QQ:3447249690
  • 1578文章总数
  • 13访问次数
  • 建站天数