微信小程序开发之路⑧

微信用户交互方法

showToast
showModal
showloading
showActionSheet
hideToast
hideLoading
1
2
3
4
5
6

<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>hellotext>
    view>
view>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

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)
    },
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164

###　动态改变 setTabBar

color tab 上的文字默认颜色

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

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

backgroundColor tab 的背景色

64、支付、授权、广告

微信支付
wx.requestPayment(Object object)

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

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