微信小程序开发教程之自定义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以及“互联网+”的概念,所以逐渐被线上行业所接纳并应用到其中,形成一种“实体店+小程序”的组合

河北快3开奖结果 广西快3平台 pc蛋蛋28 pc蛋蛋 pc蛋蛋 pc蛋蛋28 广西快三 pc蛋蛋网站 pc蛋蛋网 河北快3