小程序

发表于   |   分类于   |     |  

文章出处，原创于 https://HawkingOuYang.github.io/

我的GitHub

小程序裸奔教程
https://zhuanlan.zhihu.com/p/37667537?utm_source=qq&utm_medium=social&utm_oi=800678243513569280

wepy
https://tencent.github.io/wepy/index.html
https://tencent.github.io/wepy/document.html#/

wepy this.$apply()

二维码B接口
https://developers.weixin.qq.com/blogdetail?action=get_post_info&lang=zh_CN&token=&docid=6a5dc8758ab1a33f6c6bd1a823a45617

小程序 资料 (good)
https://www.w3cschool.cn/weixinapp/

flex 浏览器 支持 ? 兼容查询
https://caniuse.com/#search=flex

小程序开发过程中常见问题 (good)
https://www.cnblogs.com/fastmover/p/9321504.html

谷歌也玩小程序了，2.8亿日活背后的新流量生态迁徙如何抓住新机会 |【经纬低调出品】
https://mp.weixin.qq.com/s?src=11&timestamp=1532783483&ver=1026&signature=lgZRk2W1YbYMxsxDRgP3C9j0yPxTPccDc4zdHW0BRMOhIhHb7f*FpRuaau5GJitWpZmqmnZOtzZtHc0w-ofanhp7cMK566wLSIEbFSb3p15QsP8Lql5c6en8bclJ0c7v&new=1

JDReact小程序双向转换工具介绍
https://mp.weixin.qq.com/s?src=11&timestamp=1532783083&ver=1026&signature=g34sKdG3u2PuzE81NLCfpznPi2Wxl4A6PDUQ5ZAhhkRvAChT9aUIQcRdDE7edd79XVxSpCRM9Yz7HdwmkOEmigfRH9cMUckRsCrCcXwN8Z9V5j3J*vcBzlbshm7f-IRF&new=1

小程序开发入门记录

一、先通读一遍小程序官方文档（https://developers.weixin.qq.com/miniprogram/introduction/index.html），了解小程序及小程序的组成，体验官方提供的DEMO，然后读一下示例或者写HelloWorld，之后大概就想知道wxml和wxss要怎么编写，因为小程序官方不会介绍这两个具体的规则和规范，所以出门左转去看HTML和CSS（http://www.runoob.com），WEB和小程序有相似有区别，比如没有WINDOW、DOM，DIV和VIEW的相似和区别等，其中FLEX布局（相对布局）相是主要运用的，之后会结合浮动定位布局（绝对布局）。CSS的前世今生了解一下（https://zh.wikibooks.org/wiki/CSS）另外这两篇文章讲的FLEX布局非常好（http://www.ruanyifeng.com/blog/2015/07/flex-examples.html）（http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html）

二、接下来作为很多年客户端开发的老司机，肯定会想了解小程序的底层架构和原理，如何写出性能更好的小程序，利用小程序天然的异步和延迟能做哪些勾当，这个官方文档会详细讲解（https://developers.weixin.qq.com/ebook?action=get_post_info&token=935589521&volumn=1&lang=zh_CN&book=miniprogram&docid=0008aeea9a8978ab0086a685851c0a）

三、至于JS，会纠结一下面向对象，忍一忍，边写边看文档就OK了

前端技术 http://www.runoob.com/

CSS维基百科 https://zh.wikibooks.org/wiki/CSS

Flex 布局教程：实例篇 http://www.ruanyifeng.com/blog/2015/07/flex-examples.html

Flex 布局教程：语法篇 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

JavaScript教程 https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000

onfire.js
https://github.com/hustcc/onfire.js/blob/master/README_zh.md

开发 | 小程序跨页传值的的问题，这个 JS 库就能解决（内附项目地址）
https://www.ifanr.com/minapp/878030

Flex 布局语法教程
http://www.runoob.com/w3cnote/flex-grammar.html

微信小程序组件化开发框架文档

http://www.hishop.com.cn/xiaocx/show_35435.html

运行环境差异
https://developers.weixin.qq.com/miniprogram/dev/devtools/details.html

博客:

CSS中的浮动和清除浮动，梳理一下！
https://www.jianshu.com/p/09bd5873bed4

CSS布局–浮动与定位
https://www.jianshu.com/p/2d286904fbce

文档流，浮动，定位及造成的影响文档流的知识点 (good)
https://www.cnblogs.com/tongtian17/p/6255777.html

1.浮动元素会从文档正常流中删除，但它仍会影响布局
2.浮动非替换元素必须为其指定width，否则元素的width会趋于0而导致浮动元素不能完整显示
3.一旦元素具有了浮动属性，它便成为了一个块级元素。
4.浮动元素的左右外边界不能超出包含块的左右内边界
5.浮动元素永不会重叠
6.浮动元素不会超过容器的上padding
7.后浮动的元素永不会超过先浮动元素的顶端
8.浮动元素会尽可能高地放置，便这个高受限于规则6和规则7
9.浮动元素的下边界没有要求，因此当容器不足以容下浮动元素时，浮动元素会向下延伸。但部分浏览器会采取增大容器高度以容下浮动元素，而对于符合CSS2.1规范的浏览器要想让容器容下浮动元素的一个可行方法是：让容器也浮动
10.浮动元素向下延伸时，不会影响正常文本的显示，文本会相对于浮动元素进行偏移。但部分文本背景会被浮动元素遮住
11.如果浮动元素设置了负的外边距、这将破坏规则4、6、7
12.当浮动元素的width>容器的width时，这会使得浮动元素超出容器的左右边界(超左超右依浮动方向而定)
13.浮动重叠规则：行内框(如strong)与浮动元素重叠时，其边框、背景、内容均位于浮动元素之上；块框与浮动元素重叠时，其边框、背景在浮动元素之下，而内容在浮动元素之上。
14.对某个元素应用clear:left，意味着这个元素的左边不能有浮动元素。
15.clear不能用于非块级元素，比如
，在大多数浏览器看来它是一个非块级元素，因此如果对br应用clear来清除浮动不会有任何效果，除非改变br的display:block。
16.如果某元素应用clear清除浮动，则此元素设置的上外边距值会被忽略，但会有一个重新计算的上外边距值(甚至可能为0).如果希望此元素与浮动元素之间有一个明确的间隔，可以在浮动元素上设置下外边距。

清除浮动的方法

　　如果一个父盒子中有一个子盒子，并且父盒子没有设置高，子盒子在父盒子中进行了浮动，那么将来父盒子的高度为0.由于将来父盒子的高度为0，下面的元素会自动补位，所以这个时候要进行浮动的清除。clear:both

　　1.使用额外标签法：

　　在浮动的盒子之下再放一个标签，在这个标签中使用clear:both,来清除浮动对页面的影响。

1
2
3
　　.clearfix {clear:both;}
　　<div class="clearfix"></div>

　　a.内部标签：会将这个浮动盒子的父盒子高度重新撑开

　　b.外部标签：会将这个浮动盒子的影响清除，但是不会撑开盒子。

　　注意：一般情况下不会使用这一种方式来清除浮动。因为这个清除浮动的方式会增加页面的标签。

　　2.使用overflow属性来清除浮动：

　　先找到浮动盒子的父元素，再在父元素中添加一个属性，就是清除这个父元素中的子元素浮动对页面的影响。

　　overflow：hidden；

　　3.使用伪元素(给父元素)来清除浮动：
　　

1
2
3
4
5
6
7
8
9
10
// fix: Object.values 在 iOS9 或者 其他机型 中 undefined
objectValues(mapObj) {
  var values = []
  var keys = Object.keys(mapObj)
  keys.forEach(k => {
    var v = mapObj[k]
    values.push(v)
  })
  return values
},

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.clearfix::after {
　　content: "";//添加内容为空
    height: 0;//内容高度为0
    line-height: 0;//内容文本的高度为0
    display: block;//将文本设置为块级元素
    clear: both;//清除浮动
    visibility: hidden;//将元素隐藏
}
.clearfix {
    zoom: 1;/*为了兼容ie6*/
}

像VUE一样写微信小程序-深入研究wepy框架
https://mp.weixin.qq.com/s/R2IlOzlA9Mb_XevDXAITdw

小程序wepy.js框架总结
http://www.cnblogs.com/cczlovexw/p/8461722.html

微信小程序详解——小程序的生命周期和页面的生命周期
https://blog.csdn.net/qq_26585943/article/details/54407202

微信小程序学习用demo：计算器；使用rpn.js实现eval函数功能
http://www.wxapp-union.com/forum.php?mod=viewthread&tid=1513

微信小程序使用第三方库（第三方js）问题
https://blog.csdn.net/u012421719/article/details/56676801

javascript/微信小程序中将String进行Base64编码并UTF-8格式输出
https://blog.csdn.net/huangmeimao/article/details/74905749

探索javascript中null和undefined的深渊 译
https://www.cnblogs.com/yiliweichinasoft/p/3700342.html

CSS3圆角详解
http://www.ruanyifeng.com/blog/2010/12/detailed_explanation_of_css3_rounded_corners.html

CSS 属性 will-change
https://developer.mozilla.org/zh-CN/docs/Web/CSS/will-change

使用CSS3 will-change提高页面滚动、动画等渲染性能
https://www.zhangxinxu.com/wordpress/2015/11/css3-will-change-improve-paint/

CSS中position的absolute和relative用法
https://www.cnblogs.com/cdgxa/p/4600242.html (good)

overflow: hidden用法，不仅仅是隐藏溢出
https://www.cnblogs.com/Likebard/p/5899512.html

对象拷贝 与 深拷贝 Object.assign()
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/assign

通过$navigate跳转同一页面，点击back按钮造成页面的data与页面显示不一致 #1728
https://github.com/Tencent/wepy/issues/1728

两级页面为同一路由时，后者数据覆盖前者 #322
https://github.com/Tencent/wepy/issues/322

解决方案: onLoad(options) { this.loadWithOptions(options) }
loadWithOptions(options) {
// 一些代码
}

https://developers.weixin.qq.com/community/develop/doc/00086eae518d70f88ea7557fb56c00?highLine=%25E8%2583%25B6%25E5%259B%258A%25E4%25BD%258D%25E7%25BD%25AE

高适应性的自定义导航栏开发思路
https://developers.weixin.qq.com/community/develop/doc/0006c012dc8028f04b070dd0551004

小程序设置 navigationStyle 是 custom 的时候，胶囊定位
https://developers.weixin.qq.com/community/develop/doc/000a22e2510bb814e8278fbfb5b004?highLine=%25E8%2583%25B6%25E5%259B%258A%25E4%25BD%258D%25E7%25BD%25AE

胶囊按钮的大小和位置与官方描述不符，求教真实尺寸
https://developers.weixin.qq.com/community/develop/doc/000a2a589ccec861de677fba651000?highLine=%25E8%2583%25B6%25E5%259B%258A%25E4%25BD%258D%25E7%25BD%25AE

小程序 埋点(即 表单提交formSubmit)
小程序 + 服务端, 联调 经验证:
1、登入 绑定 button, 表单提交 绑定 button
2、冒泡事件, 用户一个点击, 可以同时触发 ‘登入’(获取code, userid、token) 和 ‘表单提交’(获取表单id)
3、时序: 一个点击 同时 触发 ‘登入’和‘表单提交’ –> 弹窗授权登入 —> 登入之后 token userid openid —> 给 服务器上报 表单id

1
2
3
4
5
6
7
8
9
// 收藏
<view class="unLogin-collect" wx:if="{{!isLogin}}" @tap.stop='unLoginCollectAction'>
    <form bindsubmit="formSubmit" report-submit="true">
        <button formType="submit" wx:if="{{shareShowFormSubmit}}"  id="{{item.id}}" class="formSubmitBtn" @tap="formSubmitBtnAction">
            <button id="{{item.id}}" class="button" open-type="getUserInfo" bindgetuserinfo="bindgetuserinfo">
            </button>
        </button>
    </form>
</view>
1
2
formSubmitBtnAction _class {active: true, name: "system", source: e, type: "tap", timeStamp: 12667, …}
post-item-share.js:271 unLoginCollectAction _class {active: true, name: "system", source: e, type: "tap", timeStamp: 12667, …}
1
2
3
4
5
6
7
8
9
10
11
// 嵌套: 外层button
// 收藏
<view class="unLogin-collect" wx:if="{{!isLogin}}" @tap.stop='unLoginCollectAction'>
    <!-- <form bindsubmit="formSubmit" report-submit="true"> -->
      <button id="{{item.id}}" class="button" open-type="getUserInfo" bindgetuserinfo="bindgetuserinfo">
        <button formType="submit" wx:if="{{shareShowFormSubmit}}"  id="{{item.id}}" class="formSubmitBtn" @tap="formSubmitBtnAction">
        </button>
      </button>
    <!-- </form> -->  
</view>
1
2
// 微信弹窗授权登入
unLoginCollectAction _class {active: true, name: "system", source: e, type: "tap", timeStamp: 5959, …}
1
2
3
4
5
6
7
8
9
10
11
12
// 嵌套: 外层button
// 收藏
<view class="unLogin-collect" wx:if="{{!isLogin}}" @tap.stop='unLoginCollectAction'>
    <form bindsubmit="formSubmit" report-submit="true">
      <!-- <button id="{{item.id}}" class="button" open-type="getUserInfo" bindgetuserinfo="bindgetuserinfo"> -->
        <button formType="submit" wx:if="{{shareShowFormSubmit}}"  id="{{item.id}}" class="formSubmitBtn" @tap="formSubmitBtnAction">
        </button>
      <!-- </button> -->
    </form>  
</view>
1
2
3
4
form发生了submit事件，携带数据为： {value: {…}, formId: "the formId is a mock one", target: {…}}
app.js:139 this.globalData.token.accessToken null
post-item-share.js:206 formSubmitBtnAction _class {active: true, name: "system", source: e, type: "tap", timeStamp: 5894, …}
post-item-share.js:271 unLoginCollectAction _class {active: true, name: "system", source: e, type: "tap", timeStamp: 5894, …}
1
2
3
4
5
6
7
8
9
// 收藏
<view class="unLogin-collect" wx:if="{{!isLogin}}" @tap.stop='unLoginCollectAction'>
    <form bindsubmit="formSubmit" report-submit="true">
      <!-- <button id="{{item.id}}" class="button" open-type="getUserInfo" bindgetuserinfo="bindgetuserinfo"> -->
        <button formType=" " wx:if="{{shareShowFormSubmit}}"  id="{{item.id}}" class="formSubmitBtn" @tap="formSubmitBtnAction">
        </button>
      <!-- </button> -->
    </form>  
</view>
1
2
formSubmitBtnAction _class {active: true, name: "system", source: e, type: "tap", timeStamp: 4467, …}
post-item-share.js:271 unLoginCollectAction _class {active: true, name: "system", source: e, type: "tap", timeStamp: 4467, …}
1
2
3
4
5
6
7
8
9
10
// 收藏
<view class="unLogin-collect" wx:if="{{!isLogin}}" @tap.stop='unLoginCollectAction'>
<form bindsubmit="formSubmit" report-submit="true">
      <button id="{{item.id}}" class="button" open-type="getUserInfo" bindgetuserinfo="bindgetuserinfo" formType="{{shareShowFormSubmit ? 'submit' : ''}}" @tap="formSubmitBtnAction"></button>
    </form>  
  </view>
  <!-- 收藏 -->
  <form bindsubmit="formSubmit" report-submit="true" wx:if="{{isLogin}}">
    <button formType="submit" wx:if="{{shareShowFormSubmit}}"  id="{{item.id}}" class="formSubmitBtn" @tap="formSubmitBtnAction"></button>
</form>
1
2
3
4
5
授权登入 | 提交表单 | 收藏
form发生了submit事件，携带数据为： {value: {…}, formId: "the formId is a mock one", target: {…}}
app.js:139 this.globalData.token.accessToken null
post-item-share.js:206 formSubmitBtnAction _class {active: true, name: "system", source: e, type: "tap", timeStamp: 4666, …}
post-item-share.js:271 unLoginCollectAction _class {active: true, name: "system", source: e, type: "tap", timeStamp: 4666, …}
1
2
3
4
5
6
7
8
<form bindsubmit="formSubmit" report-submit="true">
  <button formType="submit" class="followBtn" wx:if="{{showFollowBtn}}" style="{{hasShare ? 'margin-right: 0;':''}}" @tap='followAction'>
    <image class='follow-img' src='../../assets/icon_plus_white.png'/>
    <text class="follow-txt">关注</text>
  </button>
  <button formType="submit" class="unFollowBtn" wx:if="{{showUnFollowBtn}}" style="{{hasShare ? 'margin-right: 0;':''}}" @tap='unFollowAction'>取消关注</button>
  <button formType="submit" class="mutualFollowBtn" wx:if="{{showMutualFollowBtn}}" style="{{hasShare ? 'margin-right: 0;':''}}" @tap='mutualFollowAction'>互相关注</button>
</form>
1
2
3
4
5
6
7
<!-- '关注/取消关注' 需要先登录 -->
<view class="unLogin-follow" wx:if="{{!isLogin}}" @tap.stop='unLoginFollowAction'>
  <form bindsubmit="formSubmit" report-submit="true">
    <button class="button" open-type="getUserInfo" formType="submit" bindgetuserinfo="bindgetuserinfo"></button>
  </form>
</view>
<!-- '关注/取消关注' 需要先登录 -->
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
小程序 埋点(即 表单提交formSubmit) 统计: 在 不改变 原来逻辑的前提下, 新增逻辑:
一、视频分享页: 
	1、广告X按钮  -- ok -- 不强制登入; 如果已登入, 则 提交表单;
	2、弹窗‘关注’的 右边按钮 ‘关注Ta’ -- ok -- 强制登入, 登入之后, 自动 提交表单; 如果已登入, 则 提交表单;
	3、头像 名字 -- ok -- 不强制登入; 如果已登入, 则 提交表单;
	4、+关注 -- ok -- 强制登入, 登入之后, 自动 提交表单; 如果已登入, 则 提交表单;
	5、播放 -- ok -- 强制登入, 登入之后, 自动 提交表单; 如果已登入, 则 提交表单;
	6、分享至 微信好友 -- ok -- 不强制登入; 如果已登入, 则 提交表单;
	7、分享至 朋友圈 -- ok -- 强制登入, 登入之后, 自动 提交表单; 如果已登入, 则 提交表单;
	8、重播 -- ok -- 强制登入, 登入之后, 自动 提交表单; 如果已登入, 则 提交表单;
	9、收藏 -- ok -- 强制登入, 登入之后, 自动 提交表单; 如果已登入, 则 提交表单;
	10、我也要上传长视频  -- ok -- 不强制登入; 如果已登入, 则 提交表单;
	11、进入我的关注 --ok -- 不强制登入; 如果已登入, 则 提交表单;
二、其他页面(非 视频分享页) 视频列表
	1、播放 --ok -- 登入之后才能看到 列表, 才能播放, 所以 此处 提交表单 无需 判断 登入
三、个人主页
	1、关注 -- ok -- 强制登入, 登入之后, 自动 提交表单; 如果已登入, 则 提交表单;
	2、取消关注 -- ok -- 强制登入, 登入之后, 自动 提交表单; 如果已登入, 则 提交表单;
1
2
3
4
5
6
7
8
检查方法: 
首先: 打开 调试
然后: 点 上面各种按钮
再: 看日志, 会出现: 
 form发生了submit事件，携带数据为： {value: {…}, formId: "the formId is a mock one", target: {…}}
app.js:139 this.globalData.token.accessToken 9dd961964ec547e2bd5836712bdaaee91536829166758
request.js:657 formID:the formId is a mock one
app.js:378 intercept: {url: "https://域名/message/spot/save", method: "POST", data: {…}
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
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
globalData = {
    userInfo: null,
    loginInfo: null,
    token: {accessToken: null},
    systemInfo: null,
    screenWidth: 0,
    screenHeight: 0,
    platform: '',
    model: '',
    config: null,
    versionInfo: null,
    followUserIDs: new Set(),   // 关注的用户, 用户id
    collectVideoIDs: new Set(), // 收藏的视频, 视频id
    deleteVideoIDs: new Set(), // 删除的视频, 视频id
    editVideoItems: new Set(),   // 修改的视频, 比如 修改 标题/封面/可见/视频集
    videoFolderIDs: new Set(),    // 视频集 id
    favoriteFolderIDs: new Set(), // 收藏夹 id
    whoSeeArray: [], // 可见
    videoColletionArray: [], // 视频集
    videoFavoriteArray: [], // 收藏夹
}
wepy.$instance.globalData.favoriteFolderIDs.add(item.id)
wepy.$instance.globalData.favoriteFolderIDs.delete(option.id)
computed = {
        if (this.isLogin) {
          return wepy.$instance.globalData.screenHeight - this.topViewHeight - 30
        }
        return wepy.$instance.globalData.screenHeight - this.topViewHeight - 30 - 43
      },
      isLogin () {
        return wepy.$instance.globalData.token.accessToken !== null
      },
      userNickName () {
        if (wepy.$instance.globalData.loginInfo) {
          return wepy.$instance.globalData.loginInfo.nickName
        }
        return null
      },
      userAvatarUrl() {
        if (wepy.$instance.globalData.loginInfo) {
          return wepy.$instance.globalData.loginInfo.avatarUrl
        }
        return null
      },
      collectVideoIDs () {
        return Array.from(wepy.$instance.globalData.collectVideoIDs)
      },
      deleteVideoIDs () {
        return Array.from(wepy.$instance.globalData.deleteVideoIDs)
      },
      editVideoItems () {
        return Array.from(wepy.$instance.globalData.editVideoItems)
      },
      videoFolderIDs () {
        return Array.from(wepy.$instance.globalData.videoFolderIDs)
      }
    }
    
watch = {
      isLogin (curVal, oldVal) {
        console.log(`旧值：${oldVal}，新值：${curVal}`)
        if (oldVal === false && curVal === true) {
          this.$broadcast('login-event')
          this.$apply()
          this.loadData()
          this.loadUserVideoCollections(false)
        }
      },
      userNickName (curVal, oldVal) {
        console.log(`旧值：${oldVal}，新值：${curVal}`)
        if (curVal && curVal.length > 0) {
          this.datalist.forEach(
            item => {
              item.user.nickName = curVal
            })
          this.$apply()
        }
      },
      userAvatarUrl (curVal, oldVal) {
        console.log(`旧值：${oldVal}，新值：${curVal}`)
        if (curVal && curVal.length > 0) {
          this.datalist.forEach(
            item => {
              item.user.avatarUrl = curVal
            })
          this.$apply()
        }
      },
      collectVideoIDs (curVal, oldVal) {
        console.log(`旧值：${oldVal}，新值：${curVal}`)
        var tempOld = Object.assign([], oldVal)
        var tempCur = Object.assign([], curVal)
        var shouldUpdate = false
        if (Array.isArray(tempOld)) {
          curVal.forEach(
            aID1 => {
              var index1 = tempOld.indexOf(aID1)
              if (index1 > -1) {
                tempOld.splice(index1, 1)
              }
            })
          if (tempOld.length > 0) {
            // 收藏的视频 已经变化
            tempOld.forEach(
              aID2 => {
                console.log('收藏的视频 已经变化: 删除 ', aID2)
                var unCollects = this.datalist.filter(item2 => item2.id == aID2)
                unCollects.forEach(
                  item22 => {
                    item22.favorited = false  // 取消收藏
                    shouldUpdate = true
                  })
              })
          }
        }
        if (Array.isArray(tempCur)) {
          oldVal.forEach(
            aID3 => {
              var index3 = tempCur.indexOf(aID3)
              if (index3 > -1) {
                tempCur.splice(index3, 1)
              }
            })
          if (tempCur.length > 0) {
            console.log('收藏的视频 已经变化: 新增 ', tempCur)
            // 收藏的视频 已经变化
            tempCur.forEach(
              aID3 => {
                console.log('收藏的视频 已经变化: 新增 ', aID3)
                var collects = this.datalist.filter(item3 => item3.id == aID3)
                collects.forEach(
                  item33 => {
                    item33.favorited = true  // 收藏
                    shouldUpdate = true
                  })
              })
          }
        }
        if (Array.isArray(curVal) && curVal.length === 0) {
          // 收藏的视频 已经变化
          this.datalist.forEach(
            item => {
              item.favorited = false  // 取消收藏
              shouldUpdate = true
            })
        }
        if (shouldUpdate === true) {
          this.$apply()
        }
      },
      deleteVideoIDs (curVal, oldVal) {
        console.log(`旧值：${oldVal}，新值：${curVal}`)
        var tempCur = Object.assign([], curVal)
        var shouldUpdate = false
        if (Array.isArray(tempCur)) {
          var dataCount1 = this.datalist.length
          tempCur.forEach(id => {
            this.datalist = this.datalist.filter(item => item.id != id)
          })
          if (this.datalist.length > 0) {
            this.datalist[0].isFirstItem = true
          }
          var dataCount2 = this.datalist.length
          if (dataCount1 - dataCount2 > 0) {
            shouldUpdate = true
            this.videoCount -= (dataCount1 - dataCount2)
          }
        }
        if (shouldUpdate === true) {
          this.$apply()
          this.loadData()
          this.loadUserVideoCollections(true)
        }
      },
      editVideoItems (curVal, oldVal) {
        console.log(`旧值：${oldVal}，新值：${curVal}`)
        var tempCur = Object.assign([], curVal)
        if (tempCur && tempCur.length > 0) {
          var find = false
          var updateCover = false
          tempCur.forEach(video => {
            var item = this.getItemWithID(video.id)
            if (item && (typeof item.hasChanged == 'undefined' || item.hasChanged === true)) {
              find = true
              if (item.hasChanged === true) {
                item.hasChanged = false
              }
              if (typeof video.coverImg.coverImgPath != 'undefined' && item.coverImg.coverImgPath != video.coverImg.coverImgPath) {
                updateCover = true
                item.coverImg.coverImgPath = video.coverImg.coverImgPath // 封面
              }
              if (typeof video.title != 'undefined') {
                item.title = video.title // 标题
              }
              if (typeof video.viewStatus != 'undefined') {
                item.status = video.viewStatus // 可见
              }
              if (typeof video.videoCollectionIds != 'undefined') {
                item.videoCollectionIds = video.videoCollectionIds // 视频集
              }
              if (typeof video.videoFavoriteIds != 'undefined') {
                item.videoFavoriteIds = video.videoFavoriteIds // 收藏夹
              }
              if (typeof video.favorited != 'undefined') {
                item.favorited = video.favorited // 收藏
              }
              if (typeof video.playCount != 'undefined') {
                item.playCount = video.playCount // 播放数
              }
            }
          })
          if (find === true) {
            this.$apply()
            if (updateCover === true) {
              // 刷新 视频集列表 (为了 更新 视频集的封面)
              this.loadUserVideoCollections(false)
            }
          }
        }
      },
      videoFolderIDs  (curVal, oldVal) {
        console.log(`旧值：${oldVal}，新值：${curVal}`)
        if (this.watchCollectionFolder_NoLoadData === false) { // 监听 视频集: 不加载数据 ?
          this.loadUserVideoCollections(true)
        }
      }
    }
    
computed = {
      isLogin () {
        return wepy.$instance.globalData.token.accessToken !== null
      },
      userNickName () {
        if (wepy.$instance.globalData.loginInfo) {
          return wepy.$instance.globalData.loginInfo.nickName
        }
        return null
      },
      userAvatarUrl() {
        if (wepy.$instance.globalData.loginInfo) {
          return wepy.$instance.globalData.loginInfo.avatarUrl
        }
        return null
      },
      collectVideoIDs () {
        return Array.from(wepy.$instance.globalData.collectVideoIDs)
      },
      deleteVideoIDs () {
        return Array.from(wepy.$instance.globalData.deleteVideoIDs)
      },
      editVideoItems () {
        return Array.from(wepy.$instance.globalData.editVideoItems)
      },
      favoriteFolderIDs () {
        return Array.from(wepy.$instance.globalData.favoriteFolderIDs)
      }
    }
    
    watch = {
      isLogin (curVal, oldVal) {
        console.log(`旧值：${oldVal}，新值：${curVal}`)
        if (oldVal === false && curVal === true) {
          this.$broadcast('login-event')
          this.$apply()
          this.loadData()
        }
      },
      userNickName (curVal, oldVal) {
        console.log(`旧值：${oldVal}，新值：${curVal}`)
        if (curVal && curVal.length > 0) {
          this.datalist.forEach(
            item1 => {
              if (Util.isSelf(item1.user.uid)) {
                item1.user.nickName = curVal
              }
            })
          this.datalistLeft.forEach(
            item2 => {
              if (Util.isSelf(item2.user.uid)) {
                item2.user.nickName = curVal
              }
            })
          this.datalistRight.forEach(
            item3 => {
              if (Util.isSelf(item3.user.uid)) {
                item3.user.nickName = curVal
              }
            })
          this.$apply()
        }
      },
      userAvatarUrl (curVal, oldVal) {
        console.log(`旧值：${oldVal}，新值：${curVal}`)
        if (curVal && curVal.length > 0) {
          this.datalist.forEach(
            item1 => {
              if (Util.isSelf(item1.user.uid)) {
                item1.user.avatarUrl = curVal
              }
            })
          this.datalistLeft.forEach(
            item2 => {
              if (Util.isSelf(item2.user.uid)) {
                item2.user.avatarUrl = curVal
              }
            })
          this.datalistRight.forEach(
            item3 => {
              if (Util.isSelf(item3.user.uid)) {
                item3.user.avatarUrl = curVal
              }
            })
          this.$apply()
        }
      },
      collectVideoIDs (curVal, oldVal) {
        console.log(`旧值：${oldVal}，新值：${curVal}`)
        var tempOld = Object.assign([], oldVal)
        var tempCur = Object.assign([], curVal)
        if (Array.isArray(tempOld)) {
          curVal.forEach(
            aID1 => {
              var index1 = tempOld.indexOf(aID1)
              if (index1 > -1) {
                tempOld.splice(index1, 1)
              }
            })
          if (tempOld.length > 0) {
            // 收藏的视频 已经变化
            tempOld.forEach(
              aID2 => {
                console.log('收藏的视频 已经变化: 删除 ', aID2)
                this.removeUnCollectUserVideos(aID2)
              })
            // 刷新 收藏夹列表 (为了 更新 收藏夹的封面)
            this.loadUserAllFavorites(true)
          }
        }
        if (Array.isArray(tempCur)) {
          oldVal.forEach(
            aID3 => {
              var index3 = tempCur.indexOf(aID3)
              if (index3 > -1) {
                tempCur.splice(index3, 1)
              }
            })
          if (this.watchCollect_NoLoadData === false && tempCur.length > 0) {
            console.log('收藏的视频 已经变化: 新增 ', tempCur)
            // 收藏的视频 已经变化
            this.loadData()
            // 刷新 收藏夹列表 (为了 更新 收藏夹的封面)
            this.loadUserAllFavorites(true)
          }
        }
        if (this.watchCollect_NoLoadData === false && Array.isArray(curVal) && curVal.length === 0) {
          // 收藏的视频 已经变化
          this.loadData()
        }
      },
      deleteVideoIDs (curVal, oldVal) {
        console.log(`旧值：${oldVal}，新值：${curVal}`)
        var tempCur = Object.assign([], curVal)
        var shouldUpdate = false
        if (Array.isArray(tempCur)) {
          var dataCount1 = this.datalist.length
          tempCur.forEach(id => {
            this.datalist = this.datalist.filter(item => item.id != id)
          })
          var dataCount2 = this.datalist.length
          if (dataCount1 - dataCount2 > 0) { // 数据源 有变化
            shouldUpdate = true
            this.clearListLeftRightData()
            this.handleGridDatalist(this.datalist)
          }
        }
        if (shouldUpdate === true) {
          this.$apply()
        }
      },
      editVideoItems (curVal, oldVal) {
        console.log(`旧值：${oldVal}，新值：${curVal}`)
        if (curVal && curVal.length > 0) {
          var find = false
          var updateCover = false
          curVal.forEach(video => {
            var item = this.getItemWithID(video.id)
            if (item) {
              find = true
              item.title = video.title
              if (item.coverImg.coverImgPath != video.coverImg.coverImgPath) {
                updateCover = true
                item.coverImg.coverImgPath = video.coverImg.coverImgPath
              }
              if (typeof video.favorited != 'undefined') {
                item.favorited = video.favorited
              }
              if (typeof video.playCount != 'undefined') {
                item.playCount = video.playCount
              }
            }
          })
          if (find === true) {
            this.$apply()
            if (updateCover === true) {
              // 刷新 收藏夹列表 (为了 更新 收藏夹的封面)
              this.loadUserAllFavorites(true)
            }
          }
        }
      },
      favoriteFolderIDs (curVal, oldVal) {
        console.log(`旧值：${oldVal}，新值：${curVal}`)
        if (this.watchFavoriteFolder_NoLoadData === false) { // 监听 收藏夹: 不加载数据 ?
          this.loadUserAllFavorites(true)
        }
      }
    }
    
computed = {
      isLogin () {
        return wepy.$instance.globalData.token.accessToken !== null
      },
      followUserIDs () {
        return Array.from(wepy.$instance.globalData.followUserIDs)
      },
      collectVideoIDs () {
        return Array.from(wepy.$instance.globalData.collectVideoIDs)
      }
    }
    
watch = {
      isLogin (curVal, oldVal) {
        console.log(`旧值：${oldVal}，新值：${curVal}`)
        if (oldVal === false && curVal === true) {
          this.$broadcast('login-event')
          this.setViewStateByFollow()
          var hasShowModalHitRecommend = wepy.getStorageSync('hasShowModalHitRecommend')
          this.showModalHitRecommend = !hasShowModalHitRecommend
          this.$apply()
        }
      },
      followUserIDs (curVal, oldVal) {
        console.log(`旧值：${oldVal}，新值：${curVal}`)
        var tempOld = Object.assign([], oldVal)
        var tempCur = Object.assign([], curVal)
        if (Array.isArray(tempOld)) {
          curVal.forEach(
            aID1 => {
              var index1 = tempOld.indexOf(aID1)
              if (index1 > -1) {
                tempOld.splice(index1, 1)
              }
            })
          if (tempOld.length > 0) {
            // 关注的用户 已经变化
            tempOld.forEach(
              aID2 => {
                console.log('关注的用户 已经变化: 删除 ', aID2)
                this.removeUnFollowedUserID(aID2)
              })
          }
        }
        if (Array.isArray(tempCur)) {
          oldVal.forEach(
            aID3 => {
              var index3 = tempCur.indexOf(aID3)
              if (index3 > -1) {
                tempCur.splice(index3, 1)
              }
            })
          if (this.watchFollow_NoLoadData === false && tempCur.length > 0) {
            console.log('关注的用户 已经变化: 新增 ', tempCur)
            // 关注的用户 已经变化
            this.loadData(false)
          }
        }
        if (this.watchFollow_NoLoadData === false && Array.isArray(curVal) && curVal.length === 0) {
          // 关注的用户 已经变化
          this.loadData(false)
        }
      },
      collectVideoIDs (curVal, oldVal) {
        console.log(`旧值：${oldVal}，新值：${curVal}`)
        var tempOld = Object.assign([], oldVal)
        var tempCur = Object.assign([], curVal)
        var shouldUpdate = false
        if (Array.isArray(tempOld)) {
          curVal.forEach(
            aID1 => {
              var index1 = tempOld.indexOf(aID1)
              if (index1 > -1) {
                tempOld.splice(index1, 1)
              }
            })
          if (tempOld.length > 0) {
            // 收藏的视频 已经变化
            tempOld.forEach(
              aID2 => {
                console.log('收藏的视频 已经变化: 删除 ', aID2)
                var unCollects = this.datalist.filter(item2 => item2.id == aID2)
                unCollects.forEach(
                  item22 => {
                    item22.favorited = false  // 取消收藏
                    shouldUpdate = true
                  })
              })
          }
        }
        if (Array.isArray(tempCur)) {
          oldVal.forEach(
            aID3 => {
              var index3 = tempCur.indexOf(aID3)
              if (index3 > -1) {
                tempCur.splice(index3, 1)
              }
            })
          if (tempCur.length > 0) {
            console.log('收藏的视频 已经变化: 新增 ', tempCur)
            // 收藏的视频 已经变化
            tempCur.forEach(
              aID3 => {
                console.log('收藏的视频 已经变化: 新增 ', aID3)
                var collects = this.datalist.filter(item3 => item3.id == aID3)
                collects.forEach(
                  item33 => {
                    item33.favorited = true  // 收藏
                    shouldUpdate = true
                  })
              })
          }
        }
        if (Array.isArray(curVal) && curVal.length === 0) {
          // 收藏的视频 已经变化
          this.datalist.forEach(
            item => {
              item.favorited = false  // 取消收藏
              shouldUpdate = true
            })
        }
        if (shouldUpdate === true) {
          this.$apply()
        }
      }
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<web-view wx:if="{{webView && src !== null}}" src="{{src}}" bindmessage="bindmessage"></web-view>
 methods = {
      bindmessage(e) {
      	
      }
}
html5:
window.wx.miniProgram.postMessage({
    data: result
})
window.wx.miniProgram.navigateBack() // 小程序: 返回 上级页面
// let build = this.$route.query.build || 0
// if (build < 10) {
//   window.wx.miniProgram.navigateBack() // 小程序: 返回 上级页面
// } else {
//   window.wx.miniProgram.redirectTo({ // 小程序: 重定向到 ‘发布视频’ 页
//     url: `post/post-page`
//   })
// }
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
扫描 小程序 码
// 格式: id=169682&tp=share&su=45
onLoad(options) {
   if (typeof (options.scene) != 'undefined') { // 扫码
        var scene = decodeURIComponent(options.scene)   // 格式: id=169682&tp=share&su=45
        var params = {}
        scene.split('&').forEach(element => {
          var key = element.split('=')[0]
          var value = element.split('=')[1]
          params[key] = value
        })
        
	
} else { // 转发url 跳转
        // 格式: id=169682&tp=share&su=45
        console.log(`options. +  options.id ` + options.id + 'options.from ' + options.from + 'options.type ' + options.type + 'options.tp ' + options.tp + 'options.su ' + options.su)
        }
        
}
// 转发
onShareAppMessage (option) {
	if (option.from == 'button') {
		return {
          title: nickName + '分享给你一个视频，点击查看～',
          imageUrl: imageUrl,
          path: '/pages/user-page?id='参数')
        }
	} else {
	}
}
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
// 旋转 按钮
.refresh_tip {
    width: 100%;
    height: 98rpx;
    background-color: rgba(0, 0, 0, .8);
    color: white;
    font-size: 28rpx;
    font-weight: bold;
    position: fixed;
    top: 0;
    text-align: center;
    line-height: 98rpx;
    z-index: 100;
  }
  .refreshBtn {
    position: fixed;
    right: 40rpx;
    bottom: 40rpx;
    width: 80rpx;
    height: 80rpx;
  }
  .circleLoading {
    position: fixed;
    right: 40rpx;
    bottom: 40rpx;
    width: 80rpx;
    height: 80rpx;
    .icon_refresh_bg{
      width: 80rpx;
      height: 80rpx;
    }
    .icon_refresh_arrow {
      position: absolute;
      left: 20rpx;
      top: 16rpx;
      width: 40rpx;
      height: 40rpx;
      animation: circleLoad 0.5s linear infinite;
    }
    @keyframes circleLoad {
      100%{
        transform: rotate(360deg);
      }
    }
  }
  
<image class="refreshBtn" src='../assets/icon_refresh.png' @tap.stop="refreshAction" wx:if="{{showRefreshBtn === true && showCircleLoading===false}}"/>
  <view class="circleLoading" wx:if="{{showCircleLoading}}">
    <image class="icon_refresh_bg" src='../assets/icon_refresh_bg.png' wx:if="{{showCircleLoading===true}}">
      <image class="icon_refresh_arrow" src='../assets/icon_refresh_arrow.png' wx:if="{{showCircleLoading===true}}"></image>
    </image>
  </view>
  
isiPhoneX() {
      if (wepy.$instance.globalData && wepy.$instance.globalData.model) {
        var model = wepy.$instance.globalData.model
        var isX = model.indexOf('iPhone X') !== -1
        return isX
      }
      return false
    },
```

Request.modifyVideo({
id: that.item.id,
item: that.item, // wepy的bug, 需要这样修改 数据item
title: title, // 视频标题
success: function (res) {
wepy.hideLoading()
wepy.showToast({
title: “编辑成功”
})
setTimeout(() => {
wepy.navigateBack({
})
}, 500) // 因为: 弹出toast, 所以: 延迟0.5秒
},
fail: function (e) {
wepy.hideLoading()
wepy.showModal({
title: “编辑失败”,
content: JSON.stringify(e),
showCancel: false,
confirmText: “确定”
})
},
complete: function () {

  }
})

1
2

wepy.setKeepScreenOn({
keepScreenOn: false
})

judgeNameEmpty (strToJudge) {
var str = strToJudge
var s = Util.allTrim(str)
console.log(‘name: {‘ + s + ‘}’)
if (s.length === 0) {
return true
}
return false
}

copyPCWebPath(e) {
var path = ‘https://网址‘
wepy.setClipboardData({
data: path,
success: function(res) {
wepy.showModal({
content: path + ‘ 网址已复制，可在PC登录’,
showCancel: false,
confirmText: ‘确定’
})
}
})
},

1
2

<text class='fans-detail-text' style="{{(wepy.$instance.globalData.platform == 'android') ? 'margin-bottom: 6rpx;' : 'margin-bottom: 1rpx;'}}">{{fans}}</text>

1
2

// 小程序客服
.contactButton {
width: 100%;
height: 115rpx; // 115
background-color: transparent;
}
.contactButton::after {
border: 0;
}


1
2
3
4
5
6
7
      
```      
wepy.hideTabBarRedDot({
          index: 3,
        })
Number.isNaN(yesterdayPlayCount)

1
2
wepy 静态组件
repeat for 中的组件, 组件的数据 与 父组件 绑定, 不能与 组件自身绑定, 否则 复用 出问题
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
// 去左空格;
  lTrim(s) {
    return s.replace(/(^\s*)/g, '')
  },
  // 去右空格;
  rTrim(s) {
    return s.replace(/(\s*$)/g, '')
  },
  // 去左右空格;
  lrTrim(s) {
    return s.replace(/(^\s*)|(\s*$)/g, '')
  },
  allTrim(s) {
    var str = s.replace(/(^\s*)|(\s*$)/g, '')
    return str.replace(/\s/g, '')
  },
  // 是否包含 emoji
  isEmojiCharacter(substring) {
    for (var i = 0; i < substring.length; i++) {
      var hs = substring.charCodeAt(i)
      if (0xd800 <= hs && hs <= 0xdbff) {
        if (substring.length > 1) {
          var ls = substring.charCodeAt(i + 1)
          var uc = ((hs - 0xd800) * 0x400) + (ls - 0xdc00) + 0x10000
          if (0x1d000 <= uc && uc <= 0x1f77f) {
            return true
          }
        }
      } else if (substring.length > 1) {
        var ls = substring.charCodeAt(i + 1)
        if (ls == 0x20e3) {
          return true
        }
      } else {
        if (0x2100 <= hs && hs <= 0x27ff) {
          return true
        } else if (0x2B05 <= hs && hs <= 0x2b07) {
          return true
        } else if (0x2934 <= hs && hs <= 0x2935) {
          return true
        } else if (0x3297 <= hs && hs <= 0x3299) {
          return true
        } else if (hs == 0xa9 || hs == 0xae || hs == 0x303d || hs == 0x3030
                  || hs == 0x2b55 || hs == 0x2b1c || hs == 0x2b1b
                  || hs == 0x2b50) {
          return true
        }
      }
    }
  },
  // 过滤 emoji
  filterEmoji(emojiInput) {
    var ranges = [
        '\ud83c[\udf00-\udfff]', 
        '\ud83d[\udc00-\ude4f]', 
        '\ud83d[\ude80-\udeff]'
    ]
    var emojireg = emojiInput
    emojireg = emojireg.replace(new RegExp(ranges.join('|'), 'g'), '')
    return emojireg
  },
  // 截取 字符, 不含 emoji
  substrNoEmoji(str, start, end) { // str 字符串, start 整型, end 整型
    var string = str
    if (string.length > end && Util.isEmojiCharacter(string)) { // 处理 emoji
      string = Util.filterEmoji(string)
    }
    string = string.length > end ? string.substr(start, end) : string
    return string
  },
  
  formatSecondsAsTime (secs) {
    var hr = Math.floor(secs / 3600)
    var min = Math.floor((secs - (hr * 3600))/60)
    var sec = Math.floor(secs - (hr * 3600) -  (min * 60))
    if (hr < 10)   { hr    = "0" + hr }
    if (min < 10) { min = "0" + min }
    if (sec < 10)  { sec  = "0" + sec }
    if (hr == 0)  { hr   = "" }
    if (hr.length > 0) {
      return hr + ':' + min + ':' + sec
    }else {
      return min + ':' + sec
    }
  },
  formatTime(time, fmt) {
    var date = new Date(time)
    var curTime = new Date().getTime() / 1000
    var interval = curTime - time / 1000
    if (interval < 60) {
      return '刚刚'
    } else if (interval < 3600) {
      return Math.ceil(interval / 60) + '分钟前'
    } else if (interval < 3600 * 24) {
      return Math.ceil(interval / 60 / 60) + '小时前'
    } else {
      var o = {
        'M+': date.getMonth() + 1,
        'd+': date.getDate(),
        'h+': date.getHours(),
        'm+': date.getMinutes(),
        's+': date.getSeconds(),
        'q+': Math.floor((date.getMonth() + 3) / 3),
        'S': date.getMilliseconds()
      }
      if (/(y+)/.test(fmt)) {
        if (date.getFullYear() === new Date().getFullYear()) {
          fmt = fmt.replace(RegExp.$1 + '-', '')
        } else {
          fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
        }
      }
      for (var k in o) {
        if (new RegExp('(' + k + ')').test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)))
      }
      return fmt
    }
  },
  // 格式时间
  formatCreateDate(timeStamp = 0) {
    let fmt
    let date = new Date(timeStamp)
    let nowadays = new Date()
    let diffSecond = Math.ceil((nowadays.getTime() - date.getTime()) / 1000)
    const week = ['日', '一', '二', '三', '四', '五', '六']
    if (nowadays.getFullYear() > date.getFullYear()) {
      // 一年前
      fmt = 'yyyy-MM-dd hh:mm'
    } else if (diffSecond > 7 * 24 * 3600) {
      // 一周前
      fmt = 'MM-dd hh:mm'
    } else if (diffSecond < 1 * 24 * 3600) {
      // 今天凌晨
      var morningTimeStamp = new Date().setHours(0, 0, 0, 0)
      let diffSecondMorning = Math.ceil((morningTimeStamp - date.getTime()) / 1000)
      if (diffSecondMorning > 0) {
        // 昨天
        fmt = '昨天' + ' ' + 'hh:mm'
      } else {
        // 今天
        fmt = 'hh:mm'
      }
    } else if (diffSecond < 2 * 24 * 3600) {
      // 昨天
      fmt = '昨天' + ' ' + 'hh:mm'
    } else {
      fmt = '星期' + week[date.getDay()] + ' ' + 'hh:mm'
    }
    let o = {
      'M+': date.getMonth() + 1, // 月份
      'd+': date.getDate(), // 日
      'h+': date.getHours(), // 小时
      'm+': date.getMinutes(), // 分
      's+': date.getSeconds(), // 秒
      'q+': Math.floor((date.getMonth() + 3) / 3), //  季度
      'S': date.getMilliseconds() // 毫秒
    }
    if (/(y+)/.test(fmt)) {
      if (date.getFullYear() === new Date().getFullYear()) {
        fmt = fmt.replace(RegExp.$1 + '-', '')
      } else {
        fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
      }
    }
    for (var k in o) {
      if (new RegExp('(' + k + ')').test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)))
    }
    return fmt
  },
1
2
wepy 静态页面?
fix: 视频详情页进入两层后，删除视频返回再删除视频，无法删除了 --- wepy.navigateTo 改成 wepy.redirectTo (关闭当前页面，跳转到应用内的某个页面，但是不允许跳转到 tabbar 页面。)
1
2
3
4
5
6
7
8
9
10
let fromPage = 'user-videos-Share'
        if (this.shareType == 'share' || this.fromPage == fromPage) {
          wepy.navigateTo({
            url: `user-videos?id=${e.currentTarget.id}&from=1&fromPage=${fromPage}`
          })
        } else {
          wepy.redirectTo({
            url: `user-videos?id=${e.currentTarget.id}&from=1`
          })
        }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
onLoad(options) {
	this.from = options.from // 首页进来
    this.fromPage = options.fromPage // 从 哪个页面 进入 当前页面
    
}
that.scrollToView = 'video-colletion-cover-item-' + element.id  // 值应为某子元素id（id不能以数字开头）
<scroll-view scroll-x class="video-colletion-scrollView" id="video-colletion-scrollView" scroll-into-view="{{scrollToView}}" bindscroll="scrollViewScrollAction" bindtap="scrollViewClickedAction">
      <repeat for="{{videoColletionArray}}" item="videoColletion" index="index" key="key">
        <video-colletion-cover-item class="video-colletion-cover-item" :videoColletion.sync="videoColletion" :pointImagePath.sync="pointImagePath" @tapMoreItem-emit.user="tapMoreCallback" @didSelectItem-emit.user="didSelectItem"></video-colletion-cover-item>
      </repeat>
  </scroll-view>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 小程序 之 键盘
部分机型软键盘遮挡input输入问题
https://developers.weixin.qq.com/community/develop/doc/000eaefb9288507177378ab365b800?highLine=%25E9%2594%25AE%25E7%259B%2598%25E9%25AB%2598%25E5%25BA%25A6
机型  model 
键盘阈值  keyboardHeightThreshold 
键盘小于阈值的误差 beforeThresholdDelta
键盘大于阈值的误差 afterThresholdDelta
底部tab条的高度  tabbarHeight
比如 小米Mix2
model 为 MIX 2
keyboardHeightThreshold 为 244
beforeThresholdDelta  为  58
afterThresholdDelta 为 48
tabbarHeight 为 49
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
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
// 播放进度
import {setVideoProgress, getVideoProgress, removeVideoProgress} from '@/store-config'
continueVideo(item, duration) {
    console.log('continueVideo' + item + duration)
    if (item !== null) {
      var videoID = '' + item.id
      this.videoContext = wepy.createVideoContext(videoID, this)
      this.videoContext.play(videoID)
      this.videoContext.seek(duration)
      console.log(`continue play + ${videoID}`)
      wepy.$instance.playTopic(videoID)
      item.play = true
      this.$apply()
    }
  }
  
stopVideo(item) {
    console.log('stopVideo' + item);
    if (item !== null) {
      var videoID = '' + item.id;
      this.videoContext = wepy.createVideoContext(videoID);
      this.videoContext.pause();
      this.videoContext.seek(0);
      this.videoContext = null;
      item.play = false;
      this.$apply();
    }
  }
videoWaiting(e) {
      console.log('videoWaiting', e.detail)
    },
    videoError(e) {
      console.log('videoError', e.detail)
      wepy.$instance.log('VideoPlayError', JSON.stringify(e.detail))
    },
    bindplay(e) {
      console.log(`bindplay + ${e.currentTarget.id}`);
      this.$emit('play-emit', e.currentTarget.id);
      // 显示播放进度 ?
      var videoId = e.currentTarget.id
      var totalTime = e.currentTarget.dataset.totaltime
      var that = this
      // 播放进度
      var value = getVideoProgress(videoId)
      if (value) {
        var currentTime = value['currentTime']
        if (currentTime) {
          that.playDurationContinue = currentTime  // 继续播放时长
          that.playDurationStrContinue = Util.formatSecondsAsTime(currentTime)  // 继续播放时长
          if (currentTime > 0 && currentTime < totalTime) {
            that.showVideoProgressContinue = true
          } else {
            that.showVideoProgressContinue = false
          }
        } else {
          that.playDurationContinue = null  // 继续播放时长
          that.playDurationStrContinue = ''
          that.showVideoProgressContinue = false
        }
      } else {
        that.playDurationContinue = null  // 继续播放时长
        that.playDurationStrContinue = ''
        that.showVideoProgressContinue = false
      }
      // 显示播放进度 ?
      this.showVideoExitImage = false
      this.item.showReplay = false
      this.$apply()
      // 5秒后 隐藏 继续播放条
      if (this.showVideoProgressContinue === true) {
        setTimeout(() => {
          this.showVideoProgressContinue = false
          this.$apply()
        }, 5000)
      }
      // 5秒后 隐藏 继续播放条
    },
    bindtimeupdate(e) {
      this.playCurrentTime = parseInt(e.detail.currentTime)
      this.playDuration = e.detail.duration
    },
    bindfullscreenchange(e) {
      this.$emit('bindfullscreenchange-emit', e);
      var that = this;
      if (e.detail.fullScreen === true) {
        if (this.playDuration <= 0) {
          that.showVideoExitImage = true;
          this.$apply();
        }
      } else {
        this.showVideoExitImage = false;
        this.$apply();
        if (
          Util.isSelf(this.item.user.uid) === false &&
          this.item.user.followed === false &&
          this.isShareType
        ) {
          // 退出全屏 弹窗提示关注
          this.$emit('exitFullScreenFollowUser-emit', this.item.user.uid, this.item.id)
        }
      }
    },
    bindpause(e) {
      console.log(`bindpause + ${e.currentTarget.id}`)
      this.$emit('bindpause-emit', e)
      // 播放进度
      var currentTime = this.playCurrentTime
      var videoId = e.currentTarget.id
      var totalTime = e.currentTarget.dataset.totaltime
      if (currentTime < totalTime - 2) { // 播放完毕, 不记录 播放记录, 误差 2秒
        setVideoProgress(videoId, currentTime)
      }
      // 播放进度
    },
    bindended(e) {
      console.log(`bindended + ${e.currentTarget.id}`);
      this.$emit('bindended-emit', e);
      this.item.play = false;
      this.item.showReplay = true
      // 播放进度
      this.showVideoProgressContinue = false
      this.playDurationContinue = null
      this.playDurationStrContinue = ''
      var videoId = e.currentTarget.id
      removeVideoProgress(videoId)
      // 播放进度
      this.$apply();
    },
    
tapAction (e) {
        this.$emit('tap-emit', e.currentTarget.id)
        // this.item.play = !this.item.play;
        console.log(`tapAction: ${e.currentTarget.id} itemID + ${this.item.id}`)
        let self = this
        var videoID = '' + e.currentTarget.id
        console.log(`videoID in postItem + ${videoID}`)
        this.videoContext = wepy.createVideoContext(videoID,this)
        setTimeout(() => {
          console.log(self.item.videoPath)
          self.videoContext.play(e.currentTarget.id)
          self.videoContext.seek(0)//解决Android播放器再次播放同一个视频不播放的问题
          console.log(`start play + ${videoID}`)
          wepy.$instance.playTopic(e.currentTarget.id)
        }, 500)
      },
      
exitVideoFullScreenAction(e){
        var videoID = '' + e.currentTarget.id
        console.log(`videoID in postItem + ${videoID}`)
        this.videoContext = wepy.createVideoContext(videoID,this)
        this.videoContext.exitFullScreen({
        })
      },
      
bindImageError(e){
        console.log(JSON.stringify(e.detail))
        if (this.item) {
          if (this.item.imageRetryCount && this.item.imageRetryCount > 3) {// 重试请求3次
            return
          }
          if (this.item.imageRetryCount) {
            this.item.imageRetryCount = this.item.imageRetryCount + 1
          } else {
            this.item.imageRetryCount = 1
          }
            var t = new Date().getTime()
            this.item.coverImg.coverImgPath = this.item.coverImg.coverImgPath + '&t=' + t
            this.$apply()
        }
      },
videoProgressCloseAction(e) {
      console.log('videoProgressCloseAction', e)
      // 移除 播放进度
      this.showVideoProgressContinue = false
      this.playDurationContinue = null
      this.playDurationStrContinue = ''
      var videoId = e.currentTarget.id
      removeVideoProgress(videoId)
      // 移除 播放进度
      this.$apply()
    },
    videoProgressContinueAction(e) {
      console.log('videoProgressContinueAction', e)
      if (this.playDurationContinue) {
        this.playDuration = this.playDurationContinue
        this.continueVideo(this.item, this.playDurationContinue)
      }
      // 移除 播放进度
      this.showVideoProgressContinue = false
      this.playDurationContinue = null
      this.playDurationStrContinue = ''
      var videoId = e.currentTarget.id
      removeVideoProgress(videoId)
      // 移除 播放进度
      this.$apply()
    },
    
 
<!-- 分享至 好友 -->
<form bindsubmit="formSubmit" report-submit="true">
  <button id="{{item.id}}" class="transparentButton" open-type="share" @tap="shareReportAction" formType="{{shareShowFormSubmit ? 'submit' : ''}}"></button>
</form>
<!-- 分享至 好友 -->
            
<!-- 朋友圈分享图 -->
  <view class="unLogin-shareWeChatCircle" wx:if="{{!isLogin}}" @tap.stop='unLoginShareWeChatCircleAction'>
    <form bindsubmit="formSubmit" report-submit="true">
      <button id="{{item.id}}" class="button" open-type="getUserInfo" bindgetuserinfo="bindgetuserinfo" formType="{{shareShowFormSubmit ? 'submit' : ''}}" @tap="formSubmitBtnAction"></button>
    </form>    
  </view>
<!-- 朋友圈分享图 -->
          
<view class="contentcontainner" style="height:{{item.height}}px;width:{{item.width}}px;">
          <view class="image_loading_bg">
            <text class="image_loading_tip">封面加载中</text>
          </view>
          <image lazy-load="true" class="video-image-1" id="{{item.id}}" src="{{item.coverImg.coverImgPath}}" mode="scaleToFill" catchtap="tapAction" style="height:{{item.height}}px;width:{{item.width}}px;">
            <form bindsubmit="formSubmitPlay" report-submit="true">
              <button formType="submit" wx:if="{{shareShowFormSubmit}}"  id="{{item.id}}" class="formSubmitPlayBtn1" @tap="formSubmitPlayAction"></button>
            </form>
           </image>
          <view id="{{item.id}}" @tap.stop="tapAction" class="video_icon_bg" style="background-color: {{ item.transcodeStatus === 2 ? 'rgba(0, 0, 0, .5)' : 'rgba(0, 0, 0, 0)' }};" wx:if="{{item.uploadFileStatus == 2 || item.uploadFileStatus == 0 || item.uploadFileStatus == undefined}}">
            <view class="video_icon_content" >
              <image wx:if="{{!item.play}}" class="video_icon"  src="/assets/icon_video_play.png"></image>
              <text class="video_icon_tip" wx:if="{{item.transcodeStatus === 2}}">为保证最佳观看体验，视频正在转码中</text>
                <text class="video_icon_tip" wx:if="{{item.transcodeStatus === 2}}">如遇到不能正常播的情况，请下拉刷新</text>
            </view>
            <form bindsubmit="formSubmitPlay" report-submit="true">
              <button formType="submit" wx:if="{{shareShowFormSubmit}}"  id="{{item.id}}" class="formSubmitPlayBtn2" @tap="formSubmitPlayAction"></button>
            </form>
          </view>
          <video show-center-play-btn="{{showCenterPlayBtn}}" direction="{{item.width>item.height?90:0}}" wx:if="{{item.play}}" id="{{item.id}}" data-totaltime="{{item.totalTime}}" class="video" custom-cache="{{false}}" style="height:{{item.height}}px;width:{{item.width}}px;" src="{{item.videoPath}}" autoplay="{{item.autoplay}}" bindwaiting="videoWaiting" binderror="videoError" bindplay="bindplay" bindtimeupdate="bindtimeupdate" bindfullscreenchange="bindfullscreenchange" bindpause="bindpause" bindended="bindended">
            <cover-view id="{{item.id}}" class="video_progress_continue-bg" wx:if="{{showVideoProgressContinue}}">
              <cover-view id="{{item.id}}" class="video_progress_close" @tap.stop="videoProgressCloseAction">
                <cover-image id="{{item.id}}" class="video_progress_close_img" src="/assets/icon_video_progress_close.png"></cover-image>
              </cover-view>
              <cover-view id="{{item.id}}" class="video_progress">上次播放至 {{playDurationStrContinue}}</cover-view>
              <cover-view id="{{item.id}}" class="video_progress_continue" @tap.stop="videoProgressContinueAction">
                <cover-view id="{{item.id}}" class="video_progress_continue_txt">继续播放</cover-view>
              </cover-view>
            </cover-view>
            <cover-view id="{{item.id}}" class='video_exit_image-bg'
              style="top: {{isiPhoneX ? (item.width>item.height?0: 70) :0}}rpx; right: {{isiPhoneX ? (item.width>item.height? 100 :0) :0}}rpx;"
              wx:if="{{showVideoExitImage}}"
              @tap.stop="exitVideoFullScreenAction">
            <cover-image id="{{item.id}}" class='video_exit_image' src="/assets/icon_video_wrong.png">
            </cover-image>
            </cover-view>
          </video>
          <view class="uploading" wx:if="{{item.uploadFileStatus == 1}}">
              <text class="progress">{{item.progress == undefined ? 0 : item.progress}}%</text>
              <view class="circleProgress"></view>
          </view>
          <view class="uploadFail" wx:if="{{item.uploadFileStatus == 3}}">
              <button class="reuploadButton" @tap="reuploadFileAction">重新上传</button>
          </view>
          <view class = "title_bg" wx:if="{{!item.isEdit && (item.title.length > 0)}}">
            <view class="title">
              {{item.title}}
            </view>
          </view>
          <view class = "input_bg" wx:if="{{item.isEdit}}">
              <input  value="{{item.tempTitle}}" style="color:white;" focus="true" maxlength="20" cursor-spacing="100" placeholder="为视频添加个标题..." placeholder-style="color:white"  bindinput="textValueChanged"/>
              <view class="line"/>
              <view class="edit">
                <view class="buttons">
                  <view class="coverButton" catchtap="updateCoverAction">上传封面</view>
                  <view class="line"></view>
                  <view class="coverButton" catchtap="useDefaultCoverAction">用默认封面</view>
                  </view>
                <view class="doneButton" catchtap="editTitleDoneAction">完成</view>
              </view>
          </view>
          <!-- '播放' 需要先登录 -->
          <view class="unLogin-play" wx:if="{{!isLogin}}" @tap.stop='unLoginPlayAction'>
            <form bindsubmit="formSubmitPlay" report-submit="true">
              <button id="{{item.id}}" class="button" open-type="getUserInfo" bindgetuserinfo="bindgetuserinfo" formType="{{shareShowFormSubmit ? 'submit' : ''}}" @tap="formSubmitBtnAction"></button>
            </form>
          </view>
          <!-- '播放' 需要先登录 -->
          <view class="replay_bg" wx:if="{{item.showReplay && isShowWeChatCircleShareButton}}">
            <view class="containner">
              <view class="share-tip">
              <image class="left-line" src="/assets/icon_line_left.png"/>
              <text class="tip">分享到</text>
              <image class="right-line" src="/assets/icon_line_right.png"/>
              </view>
              <view class="share">
                <view class="wechat-friend">
                  <image class="wechat-friend-image" src="/assets/icon_video_wechat.png"/>
                  <button id="{{item.id}}" class="button" open-type="share" @tap="shareReportAction"></button>
                  <text class="wechat-friend-tip">微信</text>
                  <form bindsubmit="formSubmit" report-submit="true">
                    <button formType="submit" wx:if="{{shareShowFormSubmit}}"  id="{{item.id}}" class="formSubmitBtn" @tap="formSubmitBtnAction"></button>
                  </form>
                </view>
                <view class="wechat-circle" >
                  <image id="{{item.id}}" class="wechat-circle-image" src="/assets/icon_video_pyq.png" @tap.stop="tapShareToWeChatCircleAction"/>
                  <text class="wechat-circle-tip">朋友圈</text>
                  <button id="{{item.id}}" wx:if="{{!isLogin}}" class="button" open-type="getUserInfo" bindgetuserinfo="bindgetuserinfo"></button>
                  <form bindsubmit="formSubmit" report-submit="true">
                    <button formType="submit" wx:if="{{shareShowFormSubmit}}"  id="{{item.id}}" class="formSubmitBtn" @tap="formSubmitBtnAction"></button>
                  </form>
                </view>
              </view>
              <view class="replay-item-share">
                <image class="replay-border" src="/assets/replay-boder.png"/>
                <view id="{{item.id}}" class="replay-tip-containner"  @tap.stop="tapAction">
                  <image class="replay-image" src="/assets/icon_video_refresh.png"/>
                  <text class="replay-tip">重播</text>
                   <form bindsubmit="formSubmit" report-submit="true">
                    <button formType="submit" wx:if="{{shareShowFormSubmit}}"  id="{{item.id}}" class="formSubmitBtn" @tap="formSubmitBtnAction"></button>
                  </form>
                </view>
                <form bindsubmit="formSubmit" report-submit="true">
                  <button id="{{item.id}}" wx:if="{{!isLogin}}" class="button" open-type="getUserInfo" bindgetuserinfo="bindgetuserinfo" formType="{{shareShowFormSubmit ? 'submit' : ''}}" @tap="formSubmitBtnAction"></button>
                </form>
              </view>
            </view>
          </view>
          
.contentcontainner-parent {
    padding: 24rpx 12px 0rpx 12px;
    position: relative;
    .contentcontainner {
      position: relative;
      overflow: hidden;
      box-sizing: border-box;
      border-radius: 12rpx;
      .video-image-1 {
        position: absolute;
        left: 0;
        top: 0;
        .formSubmitPlayBtn1 {
          top: 0;
          left: 0;
          position: absolute;
          width: 100%;
          height: 100%;
          padding-left: 0;
          padding-right: 0;
          background-color: transparent;
        }
        .formSubmitPlayBtn1::after {
          border: 0;
        }
      }
      .video {
        position: absolute;
        left: 0;
        top: 0;
        border-radius: 12rpx;
        display: flex;
        .video_exit_image-bg{
            position: absolute;
            top: 0rpx;
            right: 0rpx;
            width: 100rpx;  // 51 + 24*2
            height: 100rpx; // 51 + 24*2
            display: flex;
            align-items: center;
            justify-content: center;
            .video_exit_image{
              width: 51rpx;
              height: 51rpx;
            }
        }
        .video_progress_continue-bg {
          background-color: rgba(0,0,0,0.5);
          border-top-right-radius: 8rpx;
          border-bottom-right-radius: 8rpx;
          will-change: transform;
          position: absolute;
          left: 0rpx;
          bottom: 134rpx;
          display: flex;
          align-items: center;
          .video_progress_close {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 60rpx;
            width: 59rpx;
            .video_progress_close_img {
              width: 23rpx;
              height: 24rpx;
            }
          }
          .video_progress {
            height: 30rpx;
            color: white;
            font-size: 26rpx;
            text-align: center;
          }
          .video_progress_continue {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 61rpx;
            width: 152rpx;
            .video_progress_continue_txt {
              height: 30rpx;
              color: #08B706;
              font-size: 26rpx;
              font-weight: bold;
              text-align: center;
            }
          }
        }
      }
      .video_icon_bg {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        background-color: rgba(0, 0, 0, 0.5);
        .video_icon_content {
          display: inline-flex;
          align-items: center;
          flex-direction: column;
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -40%);
          .video_icon {
            width: 55rpx;
            height: 64rpx;
          }
          .video_icon_tip {
            white-space: nowrap;
            font-size: 30rpx;
            color: white;
          }
        }
        .formSubmitPlayBtn2 {
          top: 0;
          left: 0;
          position: absolute;
          width: 100%;
          height: 100%;
          padding-left: 0;
          padding-right: 0;
          background-color: transparent;
        }
        .formSubmitPlayBtn2::after {
          border: 0;
        }
      }
      .image_loading_bg {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        .image_loading_tip {
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, 100%);
          font-weight: bold;
          font-size: 30rpx;
        }
      }
      .uploading {
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        background-color: #f7f7f7;
        position: absolute;
        .progress {
          left: 50%;
          top: 50%;
          position: absolute;
          transform: translate(-50%, -40%);
          width: 100rpx;
          text-align: center;
          color: #333;
        }
        .circleProgress {
          left: 50%;
          top: 50%;
          position: absolute;
          transform: translate(-50%, -40%);
        }
        .circleProgress::after {
          display: block;
          content: '';
          width: 45px;
          height: 45px;
          border: 5px solid #333;
          border-radius: 50%;
          will-change: transform;
          animation: circleProgressLoad 0.8s linear infinite;
          border-top: 5px solid transparent;
        }
        @keyframes circleProgressLoad {
          100% {
            transform: rotate(-360deg);
          }
        }
      }
      .uploadFail {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        background-color: white;
        .reuploadButton {
          left: 50%;
          top: 50%;
          position: absolute;
          transform: translate(-50%);
          width: 208rpx;
          height: 80rpx;
          color: white;
          font-size: 30rpx;
          background-color: #ff4159;
          border-radius: 40rpx;
          will-change: transform;
        }
      }
      .replay_bg
        {
          position: absolute;
          height: 100%;
          width: 100%;
          left: 0;
          top: 0;
          border-top-left-radius: 12rpx;
          border-top-right-radius: 12rpx;
          border-top-style: solid;
          border-color: #EAEAEA;
          border-left-width: 1px;
          border-right-width: 1px;
          border-top-width: 1px;
          border-right-width: 1px;
          border-left-width: 1px;
          border-left-style: solid;
          border-right-style: solid;
          background-color: rgba(0,0,0,0.9);
          display: flex;
          justify-content: center;
          align-items: center;
          .containner {
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            .share-tip {
              display: flex;
              justify-content: center;
              align-items: center;
              .tip {
                width: 192rpx;
                font-size: 30rpx;
                line-height: 30rpx;
                text-align: center;
                color: white;
              }
              .left-line {
                width: 180rpx;
                height: 2rpx;
              }
              .right-line {
                width: 180rpx;
                height: 2rpx;
              }
            }
            .share{
              display: flex;
              margin-top: 40rpx;
              .wechat-friend {
                display: flex;
                flex-direction: column;
                position: relative;
                .wechat-friend-image{
                  width: 70rpx;
                  height: 70rpx;
                }
                .wechat-friend-tip{
                  width: 70rpx;
                  margin-top: 25rpx;
                  font-size: 22rpx;
                  line-height: 22rpx;
                  text-align: center;
                  color: white;
                }
              }
              .wechat-circle {
                display: flex;
                margin-left: 60rpx;
                flex-direction: column;
                position: relative;
                .wechat-circle-image{
                  width: 70rpx;
                  height: 70rpx;
                }
                .wechat-circle-tip{
                  width: 70rpx;
                  margin-top: 25rpx;
                  font-size: 22rpx;
                  line-height: 22rpx;
                  text-align: center;
                  color: white;
                }
              }
            }
            .replay-item-share {
              display: flex;
              margin-top: 40rpx;
              margin-bottom: 2rpx;
              position: relative;
              justify-content: center;
              align-items: center;
              width: 120rpx;
              height: 50rpx;
              .replay-border {
                position: absolute;
                left: 0;
                top: 0;
                width: 120rpx;
                height: 50rpx;
              }
              .replay-tip-containner {
                display:flex;
                position: absolute;
                left: 0;
                top: 0;
                width: 120rpx;
                height: 50rpx;
                justify-content: center;
                align-items: center;
                .replay-image {
                  width: 22rpx;
                  height: 22rpx;
                }
                .replay-tip {
                  margin-left: 12rpx;
                  color: white;
                  font-size: 24rpx;
                  line-height: 24rpx;
                }
              }
            }
          }
        }
      .unLogin-play {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        background-color: transparent;
      }
    }
    .post-bottom-bar-bg-1 {
      display: flex;
      width: 100%;
      flex-direction: row-reverse;
      align-items: center;
      position: absolute;
      height: 30rpx;
      bottom: 24rpx;
      .right {
        margin-right: 24rpx;
        box-sizing: border-box;
        display: flex;
        .post-bottom-bar-content {
          display: flex;
          flex-direction: row;
          background-color: rgba(0, 0, 0, 0.5);
          border-radius: 8rpx;
          margin-left: 24rpx;
          align-items: center;
          padding: 12rpx 12rpx 12rpx 12rpx;
        }
        .post-bottom-bar-right-content {
          font-size: 22rpx;
          font-weight: bold;
          color: white;
          text-align: center;
          line-height: 15rpx;
          margin-left: 8rpx;
        }
        .icon_eyes_white {
          width: 30rpx;
          height: 22rpx;
        }
        .icon_play_white {
          width: 21rpx;
          height: 26rpx;
        }
      }
    }
  }
1
2
3
4
5
6
7
8
9
<view id="{{item.id}}" @tap.stop="tapAction">
  <form bindsubmit="formSubmitPlay" report-submit="true">
      <button formType="submit" id="{{item.id}}" class="formSubmitPlayBtn2" @tap="formSubmitPlayAction"></button>
  </form>
  <video> </video>
</view>