微信小程序开发之路⑧

微信用户交互方法

showToast
showModal
showloading
showActionSheet
hideToast
hideLoading

<view class="container">
    <view class="page-body" hidden="{{!showHidden}}">
        <view class="page-section">
            <view>动态设置导航条</view>
            <input bindinput="showNavigator" placeholder="请输入"></input>
            <button bindtap="setNavigationBarTite">设置导航条</button>
            {{ contentShow }}
        </view>
        <view class="page-section">
            <view>用户交互操作</view>
            <button bindtap="showToastEvent">showToast(消息提示框)</button>
            <button bindtap="showModelEvent">showModel(模态对话框)</button>
        </view>
        <view class="page-section">
            <view>loading提示框</view>
            <button bindtap="showLoading">loading提示框</button>
        </view>
        <view class="page-section">
            <view>操作菜单显示</view>
            <button bindtap="showActionSheet">弹出菜单</button>
        </view>
    </view>
    <view class="page-user" hidden="{{showHidden}}">
        <text>hello</text>
    </view>
</view>

Page({
    menuList: ['学校', '家庭', '公司', '酒吧', '隔离老王', '公园'],
    /**
     * 页面的初始数据
     */
    data: {
        contentShow: '',
        showHidden: true,
    },
    /**
     * 当输入框正在输入时，
     */
    showNavigator() {
        wx.showNavigationBarLoading()
        wx.setNavigationBarTitle({
            title: '用户正在输入',
        })
    },
    /**
     * 消息提示框 (一般是本地的操作)
     * icon: success/loading/none
     * mask:是否显示透明层，防止触摸穿透
     *
     * 注意事项：不需要人为参与
     */
    showToastEvent() {
        wx.showToast({
            title: '操作确认', //显示文本
            icon: 'success',
            // image: '/images/u7.png',
            duration: 3000,
            mask: true,
            success(res) {
                console.log('success', res)
            },
            fail(res) {
                console.log('fail', res)
            },
            complete(res) {
                console.log('complete', res)
            },
        })
    },
    /**
     * 模态对话框
     * showCancel  true 取消显示/false取消隐藏
     * 需要有用户交互操作
     */
    showModelEvent() {
        wx.showModal({
            title: '提示',
            content: '确定需要删除吗',
            showCancel: true,
            cancelText: '返回',
            cancelColor: '#f00',
            confirmText: '删除',
            confirmColor: '#0f0',
            success(res) {
                console.log('success', res)
            },
            fail(res) {
                console.log('fail', res)
            },
            complete(res) {
                console.log('complete', res)
            },
        })
    },
    /**
     * show loading 加载  (一般是网络的数据请求)
     * mask:是否显示透明层，防止触摸穿透
     */
    showLoading() {
        wx.showLoading({
            title: '正在数据查询...',
            mask: true,
            success(res) {
                console.log('success', res)
            },
            fail(res) {
                console.log('fail', res)
            },
            complete(res) {
                console.log('complete', res)
            },
        }),
            setTimeout(() => {
                wx.hideLoading({
                    success(res) {
                        console.log('hideLoading-success', res)
                    },
                    fail(res) {
                        console.log('hideLoading-fail', res)
                    },
                    complete(res) {
                        console.log('hideLoading-complete', res)
                    },
                })
            }, 3000)
    },
    /**
     * 数组长度最大为 6
     * showActionSheet显示操作菜单
     */
    showActionSheet() {
        let that = this
        let filePathName = ''
        wx.showActionSheet({
            itemList: this.menuList,
            itemColor: '#f00',
            success(res) {
                console.log('showActionSheet-success', res)
                if (res.tapIndex != 4) {
                    switch (res.tapIndex) {
                        case 0:
                            filePathName = 'school'
                            break
                        case 1:
                            filePathName = 'home'
                            break
                        default:
                            filePathName = 'other'
                    }
                    wx.navigateTo({
                        url: '/pages/' + filePathName + '/' + filePathName,
                    })
                } else {
                    that.setData({
                        showHidden: !that.data.showHidden,
                    })
                }
            },
            fail(res) {
                console.log('showActionSheet-fail', res)
            },
            complete(res) {
                console.log('showActionSheet-complete', res)
            },
        })
    },
    /**
     * 动态这是导航条
     */
    setNavigationBarTitle() {
        let that = this
        wx.showNavigationBarLoading()
        wx.setNavigationBarTitle({
            title: '用户正在输入...',
        })
        wx.setNavigationBarColor({
            frontColor: 'black',
            backgroundColor: '#ccc',
        })
        setTimeout(() => {
            wx.setNavigationBarTitle({
                title: '我的微信',
            }),
                that.setData({
                    contentShow: '新内容',
                })
            wx.hideNavigationBarLoading()
        }, 3000)
    },
})

###　动态改变 setTabBar

color tab 上的文字默认颜色

selectedColor tab 上的文字选中时的颜色

borderStyle tabBar 上边框的颜色， 仅支持 black/white

backgroundColor tab 的背景色

64、支付、授权、广告

微信支付
wx.requestPayment(Object object)

此接口调用需要有如下条件
微信公众号认证
绑定企业银行账户并签署协议
和微信服务器做合法验签并根据格式做签名算法
调用接口程序

授权
用户权限的请求
wx.authorize