微信小程序开发教程之自定义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(黄先生)
在线留言:
微信扫码,关注我们
相关文章
  • 旅行社要不要开发微信小程序?可以怎么用?

    这是一份假装真心实意的问答调查情景式推文,总结一下旅行社与小程序之间剪不断理也不乱的关系,仔细看看还有点小用处。

  • 定制化微信小程序为何价格会高那么多

    无论是定制版本的微信小程序还是公众号、微商城,价格都会比模板制作的高出一些。那为什么会高?又高在哪里?这两个问题的回答就能让企业商家看出定制开发是否值得,所以小编得摩拳擦掌来好好夸大其词了。

  • 企业进行微信小程序开发,一定要考虑的那些方面

    企业在微信小程序开发之前以及过程之中,除了要考虑如何去满足企业本身的需求之外,还要考虑最终的成果是否能满足用户的体验需求,只有将这两个方面充分考虑到并且有充足的准备,才能在后续上线时能有较好的发展。而这两个方面又可以延伸出

  • 微信小程序开发技术教程:视图容器组件详解(二)

    接上次视图容器组建详解(一),我们今天继续来介绍两个组件样式。

  • 分享:微信小程序开发过程中,常用的功能代码总结

    开发者进行微信小程序开发的时候,有一些比较常用的功能代码是可以学习使用的,根据基础的功能代码进行小调小整,就能调整成自己想要的代码

  • 案例论证广州微信小程序开发后实现商业转化?

    微信小程序刚被开发出来的时候,是将其定位成为工具性的产品。而很多一开始开发的工具性小程序,是比较难去实现商业性转化的,很多开发者在初涉小程序的时候

河北快三 河北快三 河北快三 河北快三 河北快三 河北快三 河北快三 河北快三 河北快三 河北快三