-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathmini-program.html
409 lines (352 loc) · 17.8 KB
/
mini-program.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
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
<!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>番外篇：小程序</title>
<link rel="stylesheet" href="css/reveal.css">
<link rel="stylesheet" href="css/theme/wx.css">
<!-- Theme used for syntax highlighting of code -->
<link rel="stylesheet" href="lib/css/zenburn.css">
<style media="screen">
ul,small{
width: 100%;
}
</style>
<!-- Printing and PDF exports -->
<script>
var link = document.createElement( 'link' );
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = window.location.search.match( /print-pdf/gi ) ? 'css/print/pdf.css' : 'css/print/paper.css';
document.getElementsByTagName( 'head' )[0].appendChild( link );
</script>
</head>
<body>
<div class="reveal">
<div class="slides">
<!-- 章节 -->
<section>
<h1>纪元</h1>
<p>
<ul>
<li>第一纪 <span class="fragment highlight-red">宇宙魔方</span> 微信</li>
<li>第二纪 <span class="fragment highlight-green">奥创纪元</span> 小程序</li>
<li>第三纪 <span class="fragment highlight-red">无限战争</span> 框架</li>
<li>第四纪 <span class="fragment highlight-blue">无限未来</span> 未来</li>
</ul>
</p>
</section>
<section>
<section data-markdown>
<script type="text-template">
### 第一纪 宇宙魔方
# *微信*
- 2010年：筹划启动<!-- .element: class="fragment"-->
- 2011年：初版诞生<!-- .element: class="fragment"-->
- 2012年：用户突破1亿、2亿<!-- .element: class="fragment"-->
- 基础特点：通讯、交友、朋友圈<!-- .element: class="fragment"-->
- 服务用户生活，丰富的公众号（2012/8）<!-- .element: class="fragment"-->
</script>
</section>
<section>
<img src="img/wx-regist.jpeg" alt="" style="width: 360px;">
</section>
</section>
<section>
<section data-markdown>
<script type="text-template">
### 公众号网页
- 微信浏览器（x5内核）的h5网页
- 性能/体验差：硬件、代码、网络
- 原生能力缺失
</script>
</section>
<section data-markdown>
<script type="text-template">
### 微信 jssdk(2015)
早期只是内部使用，未公开api：
``` javascript
document.addEventListener("WeixinJSBridgeReady", function () {
audio.play();
}, false);
WeixinJSBridge.invoke('imagePreview', {}, function(res){ });
wx.xxx
```
</script>
</section>
<section data-markdown>
<script type="text-template">
### h5无法完全解决
- 性能
- 体验
</script>
</section>
</section>
<section data-markdown>
<script type="text-template">
### 第二纪 奥创纪元
# *小程序*
- 快速的加载<!-- .element: class="fragment"-->
- 更强大的能力<!-- .element: class="fragment"-->
- 原生的体验<!-- .element: class="fragment"-->
- 易用且安全的微信数据开放<!-- .element: class="fragment"-->
- 高效和简单的开发<!-- .element: class="fragment"-->
</script>
</section>
<section data-markdown>
<script type="text-template">
### 不足
- 不能使用css预处理器（less/sass/stylus）<!-- .element: class="fragment"-->
- ES6/7支持不全（async/await）<!-- .element: class="fragment"-->
- 没有状态管理（app.js globalData, getApp()）<!-- .element: class="fragment"-->
- 没有自定义组件（现在已经有了）<!-- .element: class="fragment"-->
- 不支持npm包管理（现在已经有了）<!-- .element: class="fragment"-->
- 接口仍然是callback（本身支持promise）<!-- .element: class="fragment"-->
- 像vue又不完全像：强制分离WXSS, WXML和JS、没有双向绑定<!-- .element: class="fragment"-->
- 多端需求（h5, 微信, 支付宝, 百度, 头条）<!-- .element: class="fragment"-->
- 希望有react, vue的开发体验<!-- .element: class="fragment"-->
</script>
</section>
<section data-markdown>
<script type="text-template">
### 第三纪 无限战争
# *框架*
- wepy<!-- .element: class="fragment"-->
- mpvue<!-- .element: class="fragment"-->
- mpx<!-- .element: class="fragment"-->
- taro(react, 仅此一家)<!-- .element: class="fragment"-->
- uni-app<!-- .element: class="fragment"-->
- chameleon<!-- .element: class="fragment"-->
</script>
</section>
<section data-markdown>
<script type="text-template">
### 概览
- 增强式
> wepy、mpx
- 编译型
> mpvue、taro、uni-app、chameleon
- 用户规模、成功案例、周边生态
> Wepy、taro、uni-app > mpvue > mpx、chameleon
</script>
</section>
<section data-markdown>
<script type="text-template">
### [wepy](https://wepyjs.github.io/wepy-docs/#/)、[mpx](https://didi.github.io/mpx/)
- 类vue（vue子集）<!-- .element: class="fragment"-->
> wepy还有自己的语法，比如repeat
<!-- .element: class="fragment"-->
- wepy不支持多端, mpx2.0已支持<!-- .element: class="fragment"-->
> 不支持h5, app, 从wx小程序源码转换成其他的小程序, 差异抹平不够<!-- .element: class="fragment"-->
- 两者已不那么有吸引力<!-- .element: class="fragment"-->
</script>
</section>
<section>
<section data-markdown>
<script type="text-template">
### [mpvue](https://github.com/Meituan-Dianping/mpvue)、[uni-app](https://uniapp.dcloud.io/)
- 修改 vue的 runtime 和 compiler<!-- .element: class="fragment"-->
- vue技能树几乎全部点满<!-- .element: class="fragment"-->
- 2.0开始支持支付宝、百度、头条小程序（mpvue）<!-- .element: class="fragment"-->
- 7个月以上已无更新（mpvue）<!-- .element: class="fragment"-->
</script>
</section>
<section data-markdown>
<script type="text-template">
### uni-app
- h5+ -> nvue -> uni-app<!-- .element: class="fragment"-->
- app（h5+、weex）、h5、各种小程序（mpvue）、快应用<!-- .element: class="fragment"-->
- 借鉴C：#ifdef, #ifndef, #endif<!-- .element: class="fragment"-->
- hbuilder编辑器、插件市场<!-- .element: class="fragment"-->
</script>
</section>
<section data-markdown>
<script type="text-template">
### about
- 小程序限制：wxml只能静态，需要预编译好<!-- .element: class="fragment"-->
- 动态组件不支持：component :is<!-- .element: class="fragment"-->
- 无状态组件不支持：functionnal: only render<!-- .element: class="fragment"-->
- 异步组件不支持：() => import<!-- .element: class="fragment"-->
- inline-templte, X-Templates<!-- .element: class="fragment"-->
</script>
</section>
</section>
<section data-markdown>
<script type="text-template">
### taro
- 唯一一个react系
> 与mpvue不同，基于小程序的 Component 构造器，没有 Page
<!-- .element: class="fragment" -->
- react[技能树](https://taro-docs.jd.com/taro/docs/best-practice.html)几乎全部点满
> v1.3.0-beta.0后只剩下一条：不能使用 Array#map 之外的方法操作 JSX 数组
<!-- .element: class="fragment" -->
- 多端支持广
> h5, 小程序, app, 快应用，统统支持
<!-- .element: class="fragment" -->
</script>
</section>
<section data-markdown>
<script type="text-template">
### chameleon
- 前辈们基于react/vue语法，wx小程序api，chameleon更激进<!-- .element: class="fragment"-->
- 自己的语法：CMSS, CML，自己的接口<!-- .element: class="fragment"-->
- 鼓励开发者将差异api封装成统一的接口<!-- .element: class="fragment"-->
- [多态协议](https://cmljs.org/doc/framework/polymorphism/api.html)<!-- .element: class="fragment"-->
</script>
</section>
<section data-markdown>
<script type="text-template">
### taro 安装
``` bash
$ npm install -g @tarojs/cli
$ taro init xxx
```
</script>
</section>
<section data-markdown>
<script type="text-template">
prepare
- cli版本保持一致
<!-- .element: class="fragment" -->
- 目录结构（redux+ts）
<!-- .element: class="fragment" -->
- dist目录
<!-- .element: class="fragment" -->
- 环境变量
<!-- .element: class="fragment" -->
</script>
</section>
<section data-markdown>
<script type="text-template">
lifecycle
```
Page.onLoad componentWillMount
onShow componentDidShow
onHide componentDidHide
onReady componentDidMount
onUnload componentWillUnmount
onError componentDidCatchError
App.onLaunch componentWillMount
Component.created componentWillMount
attached componentDidMount
ready componentDidMount
detached componentWillUnmount
```
</script>
</section>
<section data-markdown>
<script type="text-template">
hooks
```
useDidShow
useDidHide
usePullDownRefresh
useReachBottom
usePageScroll
useResize
useShareAppMessage
useTabItemTap
useRouter
```
</script>
</section>
<section data-markdown>
<script type="text-template">
内置组件不支持...
```javascript
<Button {...props} />
```
</script>
</section>
<section data-markdown>
<script type="text-template">
state, props属性不要重复
```javascript
// state和props都挂在小程序的data上，会以后设置的值为准
```
</script>
</section>
<section data-markdown>
<script type="text-template">
style中的px不会被编译成rpx
```javascript
<View style={{marginBottom: '16px'}}>
```
</script>
</section>
<section data-markdown>
<script type="text-template">
不能setState undefined
```javascript
this.setState({a: undefined}) // 小程序的data不能设置undefined
```
</script>
</section>
<section data-markdown>
<script type="text-template">
constuctor与render会多调用一次
```javascript
// 提前调用一次，收集数据，生成小程序组件的data
```
</script>
</section>
<section data-markdown>
<script type="text-template">
疑难杂症
- 首次修改redux，步数授权弹窗仍不显示
- return null不管用，兑换结果弹窗仍然不关闭
</script>
</section>
<section data-markdown>
<script type="text-template">
### 无限未来
- [小程序标准](https://www.w3.org/TR/mini-app-white-paper/)
- [会议纪要](https://www.w3.org/2019/05/11-chinese-web-mobile-web-apps-summary.html)
</script>
</section>
<section>
<section data-markdown>
<script type="text-template">
快应用
<small>九大国产手机厂商（仅安卓）</small>
<img src="img/quick-app.png" class="logo" style="width: 600px;height: auto" />
</script>
</section>
<section data-markdown>
<script type="text-template">
pwa
- A2HS：添加到桌面
- 推送：Notification API
- 离线缓存：Service Worker
在iphone体验达不到android（苹果远没有谷歌支持）<!-- .element: class="fragment"-->
</script>
</section>
</section>
<section style="text-align: left;">
<h1>THE END</h1>
<p>
<a href="https://github.com/hakimel/reveal.js">reveal.js</a><br>
<a href="https://github.com/Thyiad/tech-share">src</a><br>
<a href="https://www.docker.com">docker</a>
</p>
</section>
</div>
</div>
<script src="lib/js/head.min.js"></script>
<script src="js/reveal.js"></script>
<script>
// More info https://github.com/hakimel/reveal.js#configuration
Reveal.initialize({
history: true,
// More info https://github.com/hakimel/reveal.js#dependencies
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>