forked from IT-xzy/WEB-NEW
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path1020-js-11.html
301 lines (284 loc) · 12.6 KB
/
1020-js-11.html
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
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>葡萄藤PPT</title>
<link rel="stylesheet" href="./css/reveal/reveal.css">
<!-- PPT主题，可以在/css/reveal/theme/中选择其他主题，目前暂时只能使用该模板 -->
<link rel="stylesheet" href="./css/reveal/theme/ptt.css">
<!-- syntax highlighting 代码高亮主题 -->
<link rel="stylesheet" href="./lib/reveal/css/zenburn.css">
<!-- 打印和PDF输出样式 -->
<script>
var link = document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = window.location.search.match(/print-pdf/gi) ? './css/reveal/print/pdf.css' : './css/reveal/print/paper.css';
document.getElementsByTagName('head')[0].appendChild(link);
</script>
<style type="text/css">
h3 {
font-family: 'Microsoft Yahei';
}
p {
font-size: 30px !important;
letter-spacing: 2px;
line-height: 50px !important;
text-align: left;
}
B {
color: rgb(195, 255, 219);
font-size: 40px !important;
font-weight: 500 !important;
}
a {
color: #fff !important;
}
</style>
</head>
<body>
<img src="./img/demo/logo.png" alt="" usemap="#pttmap" class="base-logo">
<map name="pttmap">
<area shape="rect" coords="0,0,276,58" href="http://www.jnshu.com" alt="" target="_blank"/>
</map>
<div class="reveal">
<div class="slides">
<section>
<h2>【JS-task11】</h2>
<h3>小程序的授权机制</h3>
<h3>小课堂</h3>
分享人：黄诚翰
</section>
<section>
<p style="text-align: center;">目录</p>
<p style="text-align: center;">1.背景介绍</p>
<p style="text-align: center;">2.知识剖析</p>
<p style="text-align: center;">3.常见问题</p>
<p style="text-align: center;">4.解决方案</p>
<p style="text-align: center;">5.编码实战</p>
<p style="text-align: center;">6.扩展思考</p>
<p style="text-align: center;">7.参考文献</p>
<p style="text-align: center;">8.更多讨论</p>
</section>
<!--1.背景介绍-->
<section>
<section>
<h3>1.背景介绍</h3>
</section>
<section>
<p>说到这，我们需要先了解一下微信小程序是啥？简单说，它就是一个可以实现之前只能是原生态APP可以实现的效果和功能。比如说，一些酷炫的页面与转场，一些可以直接和手机硬件交互的功能，录音啊，拍视频啊，调用手机的重力感应啊，GPS啊等等。
</p>
<p>
从目前来讲，APP比手机网页好，手机网页比电脑网页好。手机网页在电脑上看起来还行，但需要我们输入网址域名，这在电脑上还好操作，在手机上，简单是让人抓狂。
</p>
<p>
虽然APP在体验上非常突出，但需要安装，需要消耗流量，占用手机有限的桌面空间。这种麻烦程序，甚至超出了APP的优势本身。
</p>
</section>
<section>
<p>
从这里就能看出微信小程序的好处了</br>
1，不用安装，即开即用，用完就走。省流量，省安装时间，不占用桌面；</br>
2，体验上虽然没法完全媲美原生APP，但综合考虑还是更优；</br>
3，对于小程序拥有者来说，开发成本更低，他们可以更多财力，人力，精力放在如何运营好产品，做好内容本身；</br>
4，对于用户来说，相较于各种APP，微信小程序UI和操作流程会更统一。这也会降低用户的使用难度；</br>
5，对于小程序拥有者来说，相较于原生APP，推广更容易更简单，更省成本。</br>
</p>
</section>
</section>
<!--2.知识剖析-->
<section>
<h3>2.知识剖析</h3>
</section>
<!--2.1 JS有哪些数据类型？-->
<section>
<section><B>2.1 授权</B></section>
<section>
<p>部分接口需要获得用户授权同意后才能调用。此类接口调用时：</p>
<p>
如果用户未接受或拒绝过此权限，会弹窗询问用户，用户点击同意后方可调用接口；</br>
如果用户已授权，可以直接调用接口；</br>
如果用户已拒绝授权，则短期内不会出现弹窗，而是直接进入接口 fail 回调。请开发者兼容用户拒绝授权的场景。
</p>
</section>
<section>
<div style="text-indent:2em">
<p style="text-align: left">
获取授权信息
</p>
<p style="text-align: left">
开发者可以使用 wx.getSetting 获取用户当前的授权状态。</p>
<p style="text-align: left">
wx.getSetting(OBJECT)获取用户的当前设置。</br>
注：返回值中只会出现小程序已经向用户请求过的权限。</p>
<p>
Object 参数说明：<br/>
success Function 不是必要 接口调用成功的回调函数，返回内容详见返回参数说明。<br>
fail Function 否 接口调用失败的回调函数<br/>
complete Function 否 接口调用结束的回调函数（调用成功、失败都会执行）
</p>
</div>
</section>
<section>
<div style="text-indent:2em">
<p style="text-align: left">
success返回参数说明：
<p style="text-align: left">
authSetting Object 用户授权结果，其中 key 为 scope 值，value 为 Bool 值，表示用户是否允许授权，详见 scope 列表</p>
<pre>
<code>
wx.getSetting({
success: (res) => {
/*
* res.authSetting = {
* "scope.userInfo": true,
* "scope.userLocation": true
* }
*/
}
})
</code>
</pre>
</div>
</section>
<section><B>2.2 scope表</B></section>
<section>
<div style="text-indent:2em">
这里介绍8种：用户信息、地理位置、通讯地址、发票抬头、微信运动步数、录音功能、保存到相册、摄像头
</div>
</section>
<section>
<p style="text-align: center;">用户信息</p>
<p>scope: scope.userInfo <br/> 对应接口 wx.getUserInfo</p>
</section>
<section>
<p style="text-align: center;">地理位置</p>
<p>scope:scope.userLocation <br/> 对应接口wx.getLocation, wx.chooseLocation </p>
</section>
<section>
<p>通讯地址</p>
<p>scope: scope.address <br/> 对应接口wx.chooseAddress</p>
</section>
<section>
<p>发票抬头</p>
<p>scope:scope.invoiceTitle <br/> 对应接口wx.chooseInvoiceTitle</p>
</section>
<section>
<p>微信运动步数</p>
<p>scope:scope.werun <br/> 对应接口wx.getWeRunData</p>
</section>
<section>
<p>录音功能</p>
<p>scope:scope.record<br/> 对应接口 wx.startRecord</p>
<p>保存到相册</p>
<p>scope.writePhotosAlbum<br>wx.saveImageToPhotosAlbum, wx.saveVideoToPhotosAlbum</p>
<p> 摄像头</p>
<p>scope.camera</p>
</section>
</section>
<!--3.常见问题-->
<section>
<h3>3.常见问题</h3>
</section>
<section>
<B>如果用户拒绝授权该怎么办？</B>
</section>
<!--4.解决方案-->
<section>
<h3>4.解决方案</h3>
</section>
<section>
<pre>
<code>
fail:function(){
wx.showModal({
title: '警告',
content: '你点击了拒绝授权将无法显示你的位置信息，点击确定重新获取授权。',
success: function(res){
if(res.confirm) {
wx.openSetting({
success:(res) => {
if (res.authSetting["scope.userLocation"]){
wx.getLocation({
success: function(res) {
that.setData({
position: res
})
},
})
}
}
})
}
}
})
}
</code>
</pre>
<p>当用户拒绝授权时，弹出模态框来引导用户进入设置授权页面</p>
</section>
<!--5.编码实战-->
<section>
<h3>5.编码实战</h3>
</section>
<!--6.拓展思考-->
<section>
<h3>6.拓展思考</h3>
</section>
<section>
<p>可以在什么地方安置获取授权的按钮？</p>
<p>比如在直播小程序中，可以设置当用户发表评论时，获取用户的头像信息和名称，然后调用发表。</p>
</section>
<section>
<h3>7.参考文献</h3>
<p>微信公共平台——授权：https://developers.weixin.qq.com/miniprogram/dev/api/authorize-index.html</p>
<P>用户拒绝授权CSDN：https://blog.csdn.net/qq_28189091/article/details/75417073</P>
</section>
<section>
<h3>8.更多讨论</h3>
</section>
<section>
<p style="text-align: center">感谢大家观看
<p style="text-align: center">
<small>BY : 黄诚翰</small>
</section>
<script src="./lib/reveal/js/head.min.js"></script>
<script src="./lib/reveal/reveal.js"></script>
</div>
</div>
<script>
// 以下为常见配置属性的默认值
// {
// controls: true, // 是否在右下角展示控制条
// progress: true, // 是否显示演示的进度条
// slideNumber: false, // 是否显示当前幻灯片的页数编号，也可以使用代码slideNumber: 'c / t' ，表示当前页/总页数。
// history: false, // 是否将每个幻灯片改变加入到浏览器的历史记录中去
// keyboard: true, // 是否启用键盘快捷键来导航
// overview: true, // 是否启用幻灯片的概览模式，可使用"Esc"或"o"键来切换概览模式
// center: true, // 是否将幻灯片垂直居中
// touch: true, // 是否在触屏设备上启用触摸滑动切换
// loop: false, // 是否循环演示
// rtl: false, // 是否将演示的方向变成RTL，即从右往左
// fragments: true, // 全局开启和关闭碎片。
// autoSlide: 0, // 两个幻灯片之间自动切换的时间间隔（毫秒），当设置成 0 的时候则禁止自动切换，该值可以被幻灯片上的 ` data-autoslide` 属性覆盖
// transition: 'default', // 切换过渡效果，有none/fade/slide/convex/concave/zoom
// transitionSpeed: 'default', // 过渡速度，default/fast/slow
// mouseWheel: true, //是否启用通过鼠标滚轮来切换幻灯片
// }
// 初始化幻灯片
Reveal.initialize({
history: true,
dependencies: [
{src: './plugin/markdown/marked.js'},
{src: './plugin/markdown/markdown.js'},
{src: './plugin/notes/notes.js', async: true},
{src: './plugin/highlight/highlight.js', async: true, callback: function () {
hljs.initHighlightingOnLoad();
}
}
]
});
</script>
</body>
</html>