模版建网站分哪几类-【E企盈微信小程序开发教程

2021-04-15 00:32| 发布者: | 查看: |

--------

模版建网站分哪几类

------- 摘要:自身封裝的一个比较简易手机微信弹窗小组件,关键就是教会大伙儿对手机微信小组件的用法和了解,由于手机微信小程序对组件详细介绍非常少,因此我就把自身的了解共享给大伙儿。

概述

自身封裝的一个比较简易手机微信弹窗小组件,关键就是教会大伙儿对手机微信小组件的用法和了解,由于手机微信小程序对组件详细介绍非常少,因此我就把自身的了解共享给大伙儿。

一序言

坚信大伙儿在开发设计小程序时会遇到某个作用数次应用的状况,例如弹出框。这个情况下大伙儿最先想到的是组件化开发设计,就是把弹出框封裝成一个组件,随后哪里应用哪里就启用,对,来看大伙儿都是有思路的人,可是要如何完成呢。将会你会去看官方文本文档,可是手机微信的官方文本文档也是说的不太清晰,因此写起来也是是非非常痛楚。今日就和大伙儿一起开发设计手机微信组件,坐稳了,老司机要开车了。

二实际完成

大家先完成个简易的弹窗组件,

ponent文档夹储放大家的组件,里面储放的就是大家所用的组件,大家今日要做的事弹出框,ponent,就会全自动转化成组件的模版wxss、wxml、json、js,如图

2.大家能够写一些组件款式和合理布局,跟网页页面写法相近,就很少说了,

款式和合理布局和合理布局早已写好了接下来要详细介绍的就是

Component结构器

Component结构器可用于界定组件,启用Component结构器时能够特定组件的特性、数据信息、方式等。

Ti凡科抠图:

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)    },

//开启取得成功回调函数

this.ess);

}

}})

上边会用到一个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();

},

//确定恶性事件

console.log(\ 你点一下了明确\ );

this.popup.hidePopup();

}})

至此,一个弹窗组件就进行了。

手机微信小程序专题强烈推荐: 漫画小程序   门票小程序

---------

模版建网站分哪几类

------------
<
>

 
QQ在线咨询
售前咨询热线
18720358503
售后服务热线
18720358503
返回顶部