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

Midori · 发表于 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插件来获取视频的应用内路径。
=========================================================================

界面截图：

摩羯座 · 发表于 2016-10-28 17:35:50

lz请问为什么我按照你的教程操作之后会出现这样的问题呢

fcci · 发表于 2016-8-21 15:09:13

顶起

ecoolper · 发表于 2016-8-21 18:16:18

做的太好啦！！！

biyaooo · 发表于 2016-8-21 18:23:30

这是我想要的

ysk007 · 发表于 2016-9-15 11:55:10

起步平台的案例越来越丰富了，顶起

wex81997167 · 发表于 2016-9-15 15:33:49

这个太好了，希望以后能用到

dcsbbs · 发表于 2016-9-16 17:45:36

牛得不能再牛，果断收藏。

jareking · 发表于 2016-9-20 12:02:55

赞一个，学习一下

郭德成 · 发表于 2016-9-29 23:41:15

收藏了

lanjackg2003 · 发表于 2016-10-13 13:33:14

收藏先

		自动登录	找回密码
密码			注册

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

评分

点评