微信小程序组件—wxui的使用

比较简单 直接上码

Toast框

<import src="../../components/toast.wxml"/>

<!-- is="toast" 匹配组件中的toast提示  如果用dialog的话这就是dialog -->
<template is="toast" data="{{ ...$wux.toast }}"/>

<view class="page">
<view class="page_title">
    <view class="page_desc" style="text-align:center">提示框</view>
</view>
<view>
    <view class="weui-btn-area">
        <button class="weui-btn" type="primary" bindtap="showToast">成功提示</button>
            <button class="weui-btn" type="primary" bindtap="showToastCancel">取消提示</button>
            <button class="weui-btn" type="primary" bindtap="showToastErr">禁止提示</button>
            <button class="weui-btn" type="primary" bindtap="showToastText">文本提示</button>
    </view>
</view>
</view>

js

const App = getApp()

Page({
    data: {},
    onLoad() {
        this.$wuxToast = App.wux(this).$wuxToast
    },
    showToast() {
        const _this =this;
        _this.$wuxToast.show({
            type: 'success',
            timer: 1500,
            color: '#fff',
            text: '已完成',
            // 成功之后的返回,想当于下面的success
            success: () => console.log('已完成')
            // success: function(){
            //     console.log('已完成')
            // }
        })
    },
    showToastCancel() {
        const _this =this;
        _this.$wuxToast.show({
            type: 'cancel',
            timer: 1500,
            color: '#fff',
            text: '取消操作',
            success: () => console.log('取消操作')
        })
    },
    showToastErr() {
        const _this =this;
        _this.$wuxToast.show({
            type: 'forbidden',
            timer: 1500,
            color: '#fff',
            text: '禁止操作',
            success: () => console.log('禁止操作')
        })
    },
    showToastText() {
        const _this =this;
        _this.$wuxToast.show({
            type: 'text',
            timer: 1500,
            color: '#fff',
            text: '文本内容',
            success: () => console.log('文本内容')
        })
    },
})
  

注意点

在app.js中要引入wxui

   import wux from 'components/wux'

App({
    onLaunch() {
        console.log('onLaunch')
    },
    onShow() {
        console.log('onShow')
    },
    onHide() {
        console.log('onHide')
    },
    // 通过scope来引入wux函数
    wux: (scope) => new wux(scope)
})      

][2]

demo地址

https://github.com/tengwei30/xiaochengxu-modal.git