百度智能小程序弹窗自定义模板|小程序弹窗组件

百度小程序弹窗插件开发|智能小程序自定义model弹窗/toast提示框

百度智能小程序推出来也有一段时间，看官方提供的弹窗组件形式基本和微信小程序、支付宝小程序差不多。
如是自己就动手开发了个智能小程序自定义弹窗模板，自定义弹窗wcPop插件

/**
 * @title   百度小程序自定义弹窗demo
 * @Create  andy
 * @Timer   2018/11/29 23:50:45 GMT+0800 (中国标准时间)
 * @bolg    https://www.cnblogs.com/xiaoyan2017   Q：282310962  wx：xy190310
 */

// 引入插件js
import {wcPop} from '../../utils/component/wcPop/tpl.js';

Page({
    data: {},
    onLoad: function () {
        // 页面加载
    },


    /**
     * --------- 百度小程序弹窗演示函数.Start ---------
     */

    //msg提示(黑色背景)
    btnTap02: function(e) {
        wcPop({
        content: 'msg提示框测试（2s后窗口关闭）',
        shade: false,
        style: 'background: rgba(17,17,17,.7); color: #fff;',
        time: 2
        });
    },

    //信息框
    btnTap03: function(e) {
        var index = wcPop({
        content: '信息框 （这里演示信息框功能效果，这里演示信息框功能效果，这里演示信息框功能效果）',

        shadeClose: true,
        anim: 'rollIn',
        xclose: true,

        btns: [
            {
            text: '知道了',
            style: 'color: #999',
            onTap() {
                wcPop.close(index);
                console.log("知道了");
            }
            }
        ]
        });
    },

    //自定义多按钮
    btnTap05: function(e) {
        wcPop({
        title: '^-^悠然的时光',
        content: '漫长时光里流露出无限温柔で，要努力做好这一切，时刻准备向前，多年后必会感谢曾经努力的自己',
        style: 'border-top:5px solid #3388ff;max-width:90%', //自定义弹窗样式
        anim: 'fadeInUp',
        opacity: .85,

        btns: [
            {
            text: '发消息',
            style: 'color:#179b16;',
            onTap() {
                console.log('您点击了发消息！');
            }
            },
            {
            text: '评论他',
            style: 'color:#3388ff;',
            onTap() {
                console.log('您点击了发送该名片！');
            }
            },
            {
            text: '赞一下',
            onTap() {
                console.log('您点击了赞一下！');
                wcPop.close();
            }
            }
        ]
        });
    },

});