微信小程序自定义实用组件（对话框、指示器、五星评分...

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

<template is="backdrop" data="{{ ...$wux.backdrop }}"/>

<view class="page">
    <view class="page__hd">
        <view class="page__title">Backdrop</view>
        <view class="page__desc">背景幕</view>
    </view>
    <view class="page__bd">
        <view class="weui-btn-area ezpop">
            <button class="weui-btn" type="default" bindtap="retain">保持背景幕 retain</button>
            <button class="weui-btn" type="primary" bindtap="release">释放背景幕 release</button>
        </view>
        <view class="text-center">背景幕锁：{{ locks }}</view>
    </view>
</view>

const App = getApp()

Page({
    data: {
        locks: 0, 
    },
    onLoad() {
        this.$wuxBackdrop = App.wux(this).$wuxBackdrop
    },
    retain() {
        this.$wuxBackdrop.retain()
        this.setData({
            locks: this.$wuxBackdrop.backdropHolds
        })
    },
    release() {
        this.$wuxBackdrop.release()
        this.setData({
            locks: this.$wuxBackdrop.backdropHolds
        })
    }
})Dialog - 对话框

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

<template is="dialog" data="{{ ...$wux.dialog }}"/>

<view class="page">
    <view class="page__hd">
        <view class="page__title">Dialog</view>
        <view class="page__desc">对话框</view>
    </view>
    <view class="page__bd">
        <view class="weui-btn-area">
            <button class="weui-btn" type="default" bindtap="openConfirm">Confirm Dialog</button>
            <button class="weui-btn" type="default" bindtap="openAlert">Alert Dialog</button>
        </view>
    </view>
</view>

const App = getApp()

Page({
    data: {
        $wux: {
            aaa: 1
        }
    },
    onLoad() {
        this.$wuxDialog = App.wux(this).$wuxDialog
    },
    openConfirm() {
        const hideDialog = this.$wuxDialog.open({
            title: '弹窗标题',
            content: '弹窗内容，告知当前状态、信息和解决方法，描述文字尽量控制在三行内',
            confirm: () => console.log('confirm'),
            cancel: () => console.log('cancel'),
        })

        // setTimeout(hideDialog, 3000)
    },
    openAlert() {
        this.$wuxDialog.open({
            showCancel: !1,
            title: '弹窗标题',
            content: '弹窗内容，告知当前状态、信息和解决方法，描述文字尽量控制在三行内',
            confirm: () => console.log('confirm'),
        })
    }
})

Loading - 指示器

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

<template is="loading" data="{{ ...$wux.loading }}"/>

<view class="page">
    <view class="page__hd">
        <view class="page__title">Loading</view>
        <view class="page__desc">指示器</view>
    </view>
    <view class="