微信小程序开发教程之自定义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(黄先生)
在线留言:
微信扫码,关注我们
相关文章
  • 微信小程序开发,线程架构与开发步骤解析

    在进入到微信小程序开发阶段之前,首先我们可以通过了解它的线程架构,来分析得出创建一个小程序功能也大概的开发

  • 广州微信小程序商城开发,O2O引领微商发展

    在微信小程序高调开发过后,小程序商城也随之出现,结合线上线下的产品与服务定位,加上即用即走的轻量化设计,将小程序商城设计成为一种轻量化的、贴近O2O商业模式的移动商城。

  • 开发微信小程序商城系统,形成O2O场景互动格局

    在微信小程序开发技术的支持上,衍生出一种叫微信小程序商城系统的产品

  • 旅行社要不要开发微信小程序?可以怎么用?

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

  • 微信小程序新增四项能力,信息展示开发越强大

    微信官方在小程序功能的开放之路真的是越走越远,现在又就着信息展示模块来开放了四项新能力,来提升用户的体验以及小程序运营者的管理体验,小编只能说这次的事情搞得依旧深得人心。按照写作流程,在夸完新能力深得人心之后,小编就要来介绍一下这四项新能力了。

  • 微信小程序开发是什么?如何开通微信小程序

    微信小程序,简称小程序,洋气名曰mini program,过去式名称曰”小应用“。其实,微信小程序就是一种微信版本的轻应用