起步软件技术论坛
搜索
 找回密码
 注册

QQ登录

只需一步,快速开始

查看: 7231|回复: 15

WeX5制作的简单案例——仿b站(视频网站)客户端

  [复制链接]

1

主题

1

帖子

20

积分

新手上路

Rank: 1

积分
20
QQ
发表于 2016-8-18 13:48:15 | 显示全部楼层 |阅读模式
本帖最后由 Midori 于 2016-8-19 12:00 编辑

本案例是使用WeX5制作的app,界面模仿b站(哔哩哔哩弹幕视频网)客户端。


功能介绍:
①模仿b站app的首页展现、话题/游戏中心等页面展现、多栏目侧滑查看、左侧边栏、搜索栏等。
②视频详细信息展现,示意性分享与收藏功能。
③自带播放插件,可播放在线的示例视频。
④示意性登录功能,输入不为空即可登录成功。

app及源代码下载(内附使用说明)
http://pan.baidu.com/s/1jH8EhO6

服务地址:http://bilicopy.app.cloudx5.com
可以在线体验案例界面及功能。但视频播放在浏览器运行中不能使用,需在app中体验该功能。
注:初次打开app或在线体验时,由于服务端的原因有可能会报错HTTP Status 500,重启app或重新打开页面即可。


=========================================================================
在制作过程中也遇到过一些小问题,后基本解决。
现把解决或避免这些问题的要点列出,以供参考。

①JS有一个语法getElementById,是通过元素的ID属性来获取元素;但在WeX5开发工具中的组件并没有id属性,而是有一个xid;因此将组件作为元素来获取时,语法要改写为getElementByXid。

②数据库中存储的图片路径,图片文件后缀名大写,可能导致打开发包后图片无法加载。

③组件中引用图片时大多使用绝对路径。数据库中有图片路径时,手动输入绝对路径,格式上极其容易出错且费时费力。建议善用JS中的简单代码来实现图片路径转换(该段代码教程中有讲解)。

④很多组件默认是有边距(padding和margin)的,例如row组件。该边距在样式中不会显示出来,但可以通过浏览器运行中的审查元素看出。边距影响图标大小等细节样式时,可在css中书写代码取消,也可直接在style中将方框一栏手动修改为0观察效果。

⑤图片轮播组件中的ol部分,摆放位置及大小不合适,可能导致页面横向溢出。

⑥本案例使用到了cordova的视频播放插件(WeX5开发工具中自带),播放在线视频只需链接地址即可;但播放本地视频使用绝对路径,且必须是全路径,不能使用刚才提到的JS代码方法,还可能产生iOS和安卓兼容问题。因此播放本地视频,建议配合cordova-plugin-file插件来获取视频的应用内路径。

=========================================================================


界面截图:


image1.jpg

image2.jpg

image3.jpg

image4.jpg

image5.jpg

image6.jpg

image7.jpg












评分

参与人数 1威望 +15 收起 理由
kenminkajp + 15 很给力!

查看全部评分

59

主题

277

帖子

434

积分

中级会员

Rank: 3Rank: 3

积分
434
QQ
发表于 2016-10-28 17:35:50 | 显示全部楼层

lz请问为什么我按照你的教程操作之后会出现这样的问题呢
QQ截图20161028173335.png
回复 支持 1 反对 0

使用道具 举报

96

主题

364

帖子

1105

积分

金牌会员

QQ:1262363236

Rank: 6Rank: 6

积分
1105
QQ
发表于 2016-8-21 15:09:13 | 显示全部楼层
顶起
QQ:1262363236
回复

使用道具 举报

763

主题

3428

帖子

6805

积分

论坛元老

Rank: 8Rank: 8

积分
6805
QQ
发表于 2016-8-21 18:16:18 | 显示全部楼层
做的太好啦!!!
孤舟蓑笠翁,独钓寒江雪。
x5Demo:www.ecoolper.com
X5交流民间第一群:30057529
回复 支持 反对

使用道具 举报

33

主题

210

帖子

1115

积分

金牌会员

Rank: 6Rank: 6

积分
1115
QQ
发表于 2016-8-21 18:23:30 | 显示全部楼层
这是我想要的
X5新手解答
QQ:30722212
回复 支持 反对

使用道具 举报

167

主题

587

帖子

2360

积分

金牌会员

Rank: 6Rank: 6

积分
2360
QQ
发表于 2016-9-15 11:55:10 | 显示全部楼层
起步平台的案例越来越丰富了,顶起
轻量化ERP--企业邦  网址:meiprocess.cn
qq:8269301
手机:13801998595
回复 支持 反对

使用道具 举报

92

主题

397

帖子

632

积分

高级会员

Rank: 4

积分
632
QQ
发表于 2016-9-15 15:33:49 | 显示全部楼层
这个太好了,希望以后能用到
欢迎各位加群讨论:http://bbs.wex5.com/forum.php?mod=viewthread&tid=105046&page=1&extra=#pid165306780
回复 支持 反对

使用道具 举报

4

主题

14

帖子

27

积分

新手上路

Rank: 1

积分
27
QQ
发表于 2016-9-16 17:45:36 | 显示全部楼层
牛得不能再牛,果断收藏。

点评

已收藏!! www.shubaol.com/book/4/4069/ 儿媳秀婷  发表于 2017-3-18 19:10
回复 支持 反对

使用道具 举报

7

主题

22

帖子

44

积分

新手上路

Rank: 1

积分
44
QQ
发表于 2016-9-20 12:02:55 | 显示全部楼层
赞一个,学习一下
回复 支持 反对

使用道具 举报

190

主题

1132

帖子

2041

积分

金牌会员

Rank: 6Rank: 6

积分
2041
QQ
发表于 2016-9-29 23:41:15 | 显示全部楼层
收藏了
WEX5初学者,欢迎初学者交流
QQ:597558229
tel:15857336322
回复

使用道具 举报

29

主题

138

帖子

352

积分

中级会员

Rank: 3Rank: 3

积分
352
QQ
发表于 2016-10-13 13:33:14 | 显示全部楼层
收藏先
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

小黑屋|手机版|X3技术论坛|Justep Inc.   

GMT+8, 2017-7-27 04:35 , Processed in 0.242528 second(s), 30 queries .

Powered by Discuz! X3.1

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表