微信小程序开发教程之自定义toast实例

2018/8/2 19:46:51
摘要: 自从小程序发布以后,越来越多的开发者投入到小程序的开发当中去,而且微信有着相当完善的API和组件,使用起来简单

自从小程序发布以后,越来越多的开发者投入到小程序的开发当中去,而且微信有着相当完善的API和组件,使用起来简单,但是无奈,官方对API和组件的限制太多,想将这些官方的组件或者API运用到实际当中不太可能,所以一下将介绍怎么去写一个自定义的toast组件。

首先,先看一下官方的API的展示形式

微信小程序开发教程

 用法很简单,直接拷贝官方代码就好,代码如下:

Wx.showToast({

Title:’成功’,

Icon:’success’,

duration:2000

})

下面我将分享怎么自定义toast组件

1、现在component目录下新建一个toastTest目录

2、在toasTest.wxml文件里面新建一个自定义组件模块template,代码如下:

<template name=”toast”>

<view class=”toast_content_box” wx:if=”{{isHide}}”>

<view class=”toast_content”>

<view class=”toast_content_text”>

{{content}}

</view>

</view>

</view>

</view>

</template>

3、接下来就是样式代码,代码如下:

.toast_content_box{

display:flex;

width:100%;

height:100%;

justify_content:center;

align-items:center;

position:fixed;

z-index:999;

}

.toast_conten{

width:50%;

padding:30rpx;

background:rgba(0,0,0,0.8);

broder-radius:20rpx;

}

.toast_conten_text{

width:100%;

height:100%;

color:#fff;

font-size:28rpx;

text-align:center;

}

4、toastTest.js代码如下:

let _compDate={

'_toast_.isHide':false,

'_toast_.content':''

}

let toastPannel={

show:function(data){

let self = this;

this.setData({ '_toast_.isHide':true, '_toast_.content':data});

setTimeout(function(){

self.setData({'_toast_.isHide':false})

},3000)

}

}

 

function ToastPannel(){

let pages = getCurrentPages();

let curPage = pages[pages.length - 1 ];

this._page=curPage;

Object.assign(curPage,toastPannel);

curPage.toastPannel=this;

curPage.setData(_compDate);

return this;

}

 

module.exprorts={

ToastPannel

}

其中的toastPannel对象中包含一些自定义方法,ToastPannel是一个构造函数

 

5、在app.js中将组件脚本注入全局

//app.js

import{ToastPannel} from './component/toastTest/toastTest'

app({

ToastPannel,

})

然后再全局中引入组件样式表:

@import "./component/toastTest/toastTest.wxss";

 

6、在需要该组件的页面将模块注入

<import src="../../component/toastTest/toastTest.wxml"/>

<template is="toast" data="{{..._toast_}}"/>

<view bindtap="openToastPannel">toastTest测试</view>

 

7、在当前的JS文件中实例构造函数

 Page({

data:{

content:'自定义toast组件'

},

onLoad:function(){

let app = getApp();

new app.ToastPannel();

},

openToastPannel:function(){

this.show(this.data.content);

}

})

 

8、这就是自定义toast的实现效果啦

微信小程序教程


声明:文章"微信小程序开发教程之自定义toast实例"为互诚科技—微信小程序开发公司的原创文章,转载请注明出处,谢谢合作!
标签:小程序干货
电话咨询:18011971195(黄先生)
在线留言:
微信扫码,关注我们
相关文章
  • 开发汽车行业微信小程序,打破汽车门店地域限制

    汽车行业中无论是汽车的售卖还是维修、保养等方面,都是比较低频的商业场景,且由于行业的一些价格、地域等限制,也让汽车行业的发展有了局限性。不过,由于互联网的发展,也出现了很多平台来争先恐后地想解决掉汽车行业的这种局限,微信小程序就是

  • 读懂广州微信小程序开发公司开发流程,识破微信开发骗局

    目前光柱市场上的微信小程序开发公司层出不穷,其中有正规的,当然相应的也存在骗局

  • 开发微信小程序的意义所在

    每一样新事物的出现都会有它该有的意义,就像微信小程序被开发之后一样,不仅对于微信官方有着重要意义,而且对市场上的开发者来说也有一定的意义。

  • 微信小程序与APP之间的优劣势具体是什么?

    自从微信小程序被开发出来之后,被称之为“原生App”,就一直与APP之间存在话题,类似小程序取代APP、开发小程序还是开发APP等话题层出不穷,但其实,两者并非全是优势或者全是劣势,需求开发者更是要对比两者的优劣势之后,才能做出开发APP还是小程序的决策。

  • 广州微信小程序开发前景如何,互诚科技来告诉你

    无论是开发微信小程序还是其他微信产品,除了要考虑其开发费用之外,还要考虑所开发的产品是否有持续发展的前景

  • 开发企业微信2.0,融合企业号统一管理再出发

    现在的微信开发市场常见的是公众号开发、小程序开发以及一些商城开发,而这些都是关于自媒体或者企业经营的产品开发,极少有关于企业管理的产品开发出现。