精华内容
下载资源
问答
  • wex5教程
    千次阅读
    2016-11-23 16:57:58

             随着视频播放器的制作需要,基于wex5的开源框架和遵循DOM规范的特性,对html5原生组件进行改装,配合attchmentsimple组件,实现web页面的视频上传与在线播放。

            演示工程:http://play-app.cloudx5.com

            演示效果图:

           1.上传封面图,视频

      2  点击封面图,跳转至播放页面。

      3.进入播放页面,实时播放。

     

     

     一  设计思路:

          wex5与框架与html不同,把标签源码,js,css,视频操作进行了分离,那我们就以html5的标签,js,css分离后,在wex5的基咄上重新组装,实现wex5与js逻辑的混用与配合。

    二 video标签封装:

            如下图所示,插入video标签,及相关属性描述。

        

           添加之后,在视图区出现自定义属性,id必须给值。其它相关属性均强参照html5标签。没有的属性都可以在js中重新进行设置。

             注意:1.实际测试中,autoplay自动播放,为空不能自动播放,只要有值,不管任何值,都会自动播放;

                        2.src属性为视频源,不能添加自定义属性,否则不能动态用变量赋给视频地址;

                        3.视频格式,经测试webm没有问题,所以用转换工具全部将视频转换成webm格式。毕竟提前花时间比浏览器渲染要划算。

                        4.muted静音和volume不起作用。

    三 代码逻辑与实现

          1.用wex5的shell跳转页面并传参

             

          2.播放器页面,接收参数

            

                 注意事项:1。接收后的参数重新装入data组件,便于利用wex5其它组件的绑定优势。

                                   2.。接收参数后立即执行function方法,不能在modeload中执行,实测数据数收在modeload之后,将取到空值。

                                  3 。player.setAttribute方法为属性设置,格式为("",""),变量从data中取出后进行了字符串拼接。

           3 播放.数据清零。

          

            4.播放器样式:

               h5播放器有很多不错的js文件,可以直接把css样式拿来,拼装,实现更丰富的效果。或者在wex5的框架时自已制作。

                 player.play()

                 player.pause()

                player.stop()

                调用播放器实例,可以实现控制,及相关时长,进步,大小,等属性的获取。

                 至此,h5 web播放器已经重新组装完成,开始完美的web播放吧。经测试,用attchmentsimple上传后的视频完美播放。关于上传,请看我的另一篇博文:http://blog.csdn.net/qq_27727681/article/details/53130105   或者优酷视频:http://v.youku.com/v_show/id_XMTc4NDAyMTY4OA==.html

               

              

                 

         

        

     

    更多相关内容
  • WeX5初级教程

    2016-10-08 13:59:41
    WeX5初级教程
  • wex5 教程

    2017-01-13 18:16:00
    相信很多wex5小白和初学者,在看完官方教程后都跃跃欲试,想做一个工程来检查一下学习成果。 那么,恭喜您,做一次商城,才是直正的检验。我自认为官方案例倒背如流,当面对商城制作时,不知从哪里下手。如果你是...

      商城设计系列基础  开发文档与页面流程

    一 前言

           相信很多wex5小白和初学者,在看完官方教程后都跃跃欲试,想做一个工程来检查一下学习成果。

           那么,恭喜您,做一次商城,才是直正的检验。我自认为官方案例倒背如流,当面对商城制作时,不知从哪里下手。如果你是初学者,那就可以跟我从商城基础开始,一步步一制作。

           先说开发文档与页面流程。商城的页面较多,功能复杂,对技术要求比较全面。如果没有合理的分析开发文档,分析页面流程,不夸张的说,你没法预见用多长的工期制作完成多少个页面,多少个功能,恐怕老板的任务,你自已都不晓得何年何月做完,只是埋头加班。可能最基础的数据库设计都是一团糟。有朋友问我问题,有很多是数据库的问题,非要在前端解决,真是自已给自已找不痛快。但是,一旦把文档分析透彻,可以预见到30个功能面面,以个人开发经验和代码效能来预测到工期,目标明确,分层制作,按部就班,水到渠成。这也是我学习一段时间后的感受。

           之所以说是商城系列基础,一方面是本人能力有限,一方面是商城对于商业制作来说,难度大,强度高,我们对于初学者,主要是以基本功着手。所以,基础系列适合刚接触软件开发的法外人士或者半路出家的爱好者,以及刚刚接触wex5的同学。

    二  文档功能划分

        

     

        根据商城的具体功能,借鉴淘宝,闲鱼,京东等,具体功能能细分如下:

       

    1.注册登陆:在这里我们可以注册我们的基本信息,用户可以通过填写注册信息成为会员,登陆后才能进行购物车管理和购买商品,未登陆的会员只能浏览商品。

    2.商品浏览:用户可以浏览商品的详细信息,如名称、图片、数量、价格等。

    3.商品查询:用户输入关键字,搜索出名称相关的商品。

    4.商品分类:用户能够分类浏览所有商品,以及购买。

    5.购物车功能:用户对想购买的商品,可以先选择要购买的数量,点击加入购物车,则所要购买的商品就被添加到购物车里。

    6.支付方式:支持微信支付或支付宝支付

    7.可以微信分享。

    8.用户能够留言评论。

    9.查看订单:用户在商品订单结算前,能够查看商品和收货地址是否正确。  

    10.修改个人信息:用户可以修改自己当初注册时的信息。

    11 快递收发:用户可以收发快递并填单。

    12 用户定位:定位用户当前地址

    三  页面流程

        1 注册登录:   

          用户在没有注册之前可以浏览商品,搜索商品,但是不可以购买商品。当进入注册界面,需填写注册所需的用户名、密码、联系电话、送货地址等信息,注册成功后,才可以登录系统购买商品。

        

       2 商品信息:

         用户可以对所展现的商品进行浏览,可以浏览商品的详细信息,如名称、图片、数量、价格等。

         

       3 商品查询:

           当主页的商品不能满足用户的要求时,用户可以在主页进行商品搜索。

          

        4 商品分类:

          用户能够分类浏览所有商品,或分类搜索商品,在分类搜索中,选择一个商品的品牌并可实现多重查询。

          

        5 购物车模块:

          用户喜欢的商品可以选择放进购物车里,可以在购物车里产看用户选择的商品的名称价格以及购物车商品的总价,用户可以对购物车中的商品进行操作,修改购买数量,删除商品,清空购       物车,提交购物车等。

          

       6 订单模块:   

         当完成所有的商品选择之后,就可以在购物车页面单击“确认订单”按钮进入订单信息确认界面以及对所买商品进行结算。

         

      7 支付模块:

        完成订单后,用户根据购买信息,选择支付方式进行支付

        

     8 物流模块

        根所提示,完成收货及运费填写

       

    四  页面设计框架

        当把设计需求与开发文档分析透彻后,对设计目标和个人能力,就有了比较客观的认知。接下来要预测页面数量和设计难度,完工时间

        根据以上功能需求,页面如下:

       1 登陆页

       2 注册页

       3 个人信息页

       4 头像上传页

       5 地址薄选择页

       6 地址薄编辑页

       7 物流编辑页

       8 商品首页

       9 商品分类页

       10 商品详情页

       11 购物车页

       12 订单页

       13 评论页

       14 支付页面

       15 后台商品管理页面

       16 后台图片上传页

       17 后台图片管理页面

       

        

    五 总结:

        如果想技术提升,学习商城设计,不论成果如何,一定能复习你的所有技能,查漏补缺。接下来的基础系列中,我将一步步实现上述页面设计与代码编写。 文档功能分析明白,接下来的数据库设计,理解起来就简单了。

       

    相关视频制作完成,上传优酷。教学app制作中。我是邯郸戏曲开发,tel:15175073123,qq:1017945251

     

     

     扫描二维码,看高清教学视频。

     

     

       

    转载于:https://www.cnblogs.com/fangziffff123/p/6283725.html

    展开全文
  • 一 前言wex5作为前端利器,开发好的项目如何正确、快速、高效、稳定、安全的部署到服务器上,作为初学开发人员,有必要选择一种操作简单,便于运维的方案。今天我以教学视频网站为例,选择宝塔服务器面板,一键安装...

    一 前言

    wex5作为前端利器,开发好的项目如何正确、快速、高效、稳定、安全的部署到服务器上,作为初学开发人员,有必要选择一种操作简单,便于运维的方案。今天我以教学视频网站为例,选择宝塔服务器面板,一键安装linux+ngix+mysql+php服务器环境,从建站到部署wex5项目,完成整个操作过程。

    效果见我教学网站:http://chinese.sow8.com:10

    2396e7202c8ccbca31409ef177485f11.png

    宝塔面板效果如下,简单,实用,直观。

    c2ae7e8a6438a338f788ba4e89536de5.png

    二  linux系统安装

    我选择CentOS,7.3 64位。实测低版本会导致宝塔安装失败。

    7ec821e84c92e2d054df5e99063f08f2.png

    三 宝塔面板安装与环境部署

    1  进行linux视窗,输入root密码和帐号

    ea317e2f7e79cd86737c8429c95ad1d5.png

    2  宝塔安装,参考官网

    bb85dcec6ea483fadf1a840329c2a762.png

    c342263a3e2bec792982288545377535.png

    在linux视窗,输入下面这一行命令,系统开始安装,耗时大约5-10分钟,网速好时2分钟就能完成安装。.

    yum install -y wget && wget -O install.sh http://download.bt.cn/install/install.sh && sh install.sh

    df15db22272e83be9ebbfffd0e464f0b.png

    宝塔面板安装成功如下:

    dcba63f4b08153068691b18550ef9f2a.png

    3 登陆面板

    如红线提示,浏览器进入http://122.144.199.106.8888   输入帐号和密码(帐号和密码在面板设置里可以重新自定义)。

    79494e1f7171c6dee5aa126b6d8a13b6.png

    4  一键安装LNMP服务器环境,具体版本可以自选。

    7fccef647db8639327835757e1a02002.png

    4434758aa809daacb093119a8c33eb9d.png

    5 安装tomcat 7.wex5项目依赖于tomcat,实测最高版本支持tomcat7。tomcat8 和tomcat9会出现sevrlet不支持或java无法编译。

    19be7cb16952d4d9ebdf95658904127a.png

    66f14596adc2ecf79bc3427d6e7560c0.png

    需要一提的是,宝塔面板会自动安装jdk.如下图所示,安装tomcat7之前,java环境不存在。

    d623cf2a01ec37858dbd4150778ecb05.png

    tomcat 7安装完成后,测试如下图,java也同时安装成功,版本为1.7。也就是说,不需要另外安装jdk环境,否则双java环境,服务器会死掉的。

    394a86ac3b6db3d47c64d06a780fe32b.png

    四  建站与部署

    1  一键建站,在网站管理项,选择 添加站点,弹出建站对话框。

    663b5c2e15b01f743232a44a8b85ca9d.png

    建站提示如下:

    每行填写一个域名,默认为80端口

    泛解析添加方法 *.domain.com

    如另加端口格式为 www.domain.com:88

    表示必须有效域名才可以正常建站,ip地址加端口的建站方法不可行。

    477529e90efc2c300a535baebb59321a.png

    进入网站设置,打开网站,测试是否建站成功。

    ca90c4412a10c7ce774c38af598e3920.png

    0d74a46d20686802c2489088d25c1a7e.png

    2 上传wex5项目

    在电脑上安装ftp客户端,如FileZilla,输入建站时的创建的ftp地址,密码,端口

    f2d68559b71f5967d9988b9326449ac9.png

    ftp连接成功后,会出现本地站点目录和远程站点目录。

    00bee7fac68767af28289cd1c28c6d81.png

    删除建站目录下所有文件,上传前端www目录下的文件到建站目录下,本例中建站目录为wex5 (具体wex5前端文件参考我其它博客)

    5842a95f18b87d954146672806ebbb31.png

    上传baas文件到当前建站目录wex5下

    a0230140f1c66df290df2b059c83989c.png

    上传mysql-connector-java-5.1.36-bin文件到服务器下,并拷贝到服务器tomcat的lib包下

    e4b52e75c45cb76ba469b7cc9a26bd5f.png

    5d515c5aab8a8b2944a86c2732978707.png

    3 网站设置

    index.w页设置。在网站设置项里添加index.w页,并保存.

    76b847f90ceb124ac213a2d7314f8f97.png

    展开全文
  • 前几天帮人设计了一个手机版(做... 1 wex5官方教程,必看  2 数据库,必学  3 js 必学  4 html5,css必学  这4种相关,缺一不可。如果你想做完一个小项目,哪怕是个演示性的小东东,开始努力吧。

              前几天帮人设计了一个手机版(做了屏幕适配,电脑使用也正常)的考题框架,供学习交流使用,今天把设计思路与技巧命整理一下。

    一 效果演示:

        1 登陆后台

          

        题库管理

     

         试卷管理

     

        考生管理


      科目管理

      2 考生注册

        

       考生登陆

        

        进入考试界面

       

      开始答题

       

          交卷保存即可

    二  开发思路:

         充分利用baasdata数据绑定与data临时组件的存储特性,实现数据同步,绑定思想贯穿整个考题模块设计。

    三 页面逻辑与代码实现:

        1 数据库设计

           数据库设计模型基础:

           

                (注)数据模型,是整个开发过程中对数据相关业务的描述,根据开发经验,根据以上四种分类,可以快速创建所需的基本表。

                  考题模块基本表如下:

                  学生表,描述学生基本信息及登陆状态

             题库表,把所有题目和答案放到一个题库中,类似于仓库,注意,我把题目,正确答案和4个选项放在一条记录中,前台会进行拼接处理。

         

          学科表,用于将试题分类

               

             试卷名称表

           

         试题集合表,是一个中间表,将多个题抽出来组成试卷。一个科目里有多个试卷。多对多的表关联,需要中间表来进行角色操作,便于前端取值方便

       

          答题卡表,答完题后,将答案提交到答案库中,便于后台分析整理。

         

         (注意事项)1  表名前缀t_  ,没有特别的间义,只是为了在数据库中,上百张表,把当前工程用到的表放到一起,找起来方便

                               2 字段前缀t_ ,虽然也没有特别意义,但是非常重要,可以避免操作数据库时与数据库的保留字段冲突,导致保存失败。

    2.登陆,注册,页面跳转,传参,后台管理

           大家看我博文里的详细讲解,这里不做累述。

    3.考题模块

           开始答题对话框

          

            加载试题

          

           页面与组件设计

          

     

     

     

         (注)1  题目,就是一个output,绑定到当前行

                    2  四个选项,利用radiogroup来实现,选项用前端data装载数据,然后用radiogroup来绑定

      

         切换试题,用当前行切换,并装载选项到临时data中去,并在点击切换后,把正误span对像隐藏。

        

           正误判断与显示,利用radiogroup的change事件,触发判断并根据判断结果,用js方法控制正误span元素的隐藏与显示

              

      四  总结:

           1 指导思想: 绑定技术,是所有设计核心。代替大量代码,高效,易于维护

           2 开发顺序:数据库--页面逻辑--代码实现

                   数据库,是对项目中对像的数据描述,数据模型的设计优劣,直接关系到前后端开发的优劣。很多看完官方视频的同学感觉还是什么也设计不了,那么,看看数据库吧,因为你对数据模型还没有概念。

           3 问题解决:

                开发过程中会遇到各种各样的问题,向别人请教固然好,解决不了就是bug。这成了很多新手的直觉。任何框架都有bug,世上没有完美无缺的软件。有bug不可怕,可怕的是站在bug面前束手无策。正确思路是,换总思维和角度,看看问题的本质是什么,从数据库开始到页面再到逻辑,一环一环测试,看看是哪里的问题,是符号错误,标点缺失,还是传参失败。100次的测试,代表的是你对错误的认识。

            4 测试方法:

                   1 alert:大量的临时测试,做一步,测一步,不要走远了再测。 不仅仅是输出字符,可以用来测试页面加载事件,data取值事件,可观察对像的作用域,event事件是否执行,等等。

                   2 谷歌开发工具: 大家都在喊开发文档少,没有教程,麻烦大家把开发工具打开,看看里面的方法,成片片的方法,事件,监听器,属性,对像,元素,对像是谁,怎么获取对像,如何得到值,事件发生在谁身上,触发了哪些命令。wex5没有提供的api,谷歌里面有这么多用不完的方法,哈哈,js才是万能之王啊。

           5.给初学者的忠告:

               作为一个初学者,给初学者的忠告:

                     1 wex5官方教程,必看

                     2 数据库,必学

                     3 js 必学

                     4  html5,css必学

              这4种相关,缺一不可。如果你想做完一个小项目,哪怕是个演示性的小东东,开始努力吧。

    展开全文
  • 效果预览:1 调用attchmentSimple组件,打开文件管理器,并选中,显示选中照片名称 2 图片上传成功,并在img组件中预览 3 数据库写入成功,并成功被其它页面引用源码初探附件组件attachmentSimple是wex5文件上传与...
  •  数据库写入操作,对于wex5来说相对简单,这里只说触发器的使用与注意事项  1.创建触发器:  在wex5提供的heidiSQL数据库管理工具里,用右键。    2 .编写sql语句    说明:1.名称,即...
  • 一 前言: wex5官方教程里,开篇即以一个input输入,output即时输出的例子,为我们展现了一个概念:可观察对象。在以后我的项目开发中,将大量运用可观察对象。 ...
  • 视频教程地址:http://v.youku.com/v_show/id_XMTgyMDE5NjEyOA==.html?from=s1.8-1-1.2&spm=a2h0k.8191407.0.0 一 效果演示 1.点击头像,弹出图片裁剪框 2...
  • 视频教程地址:http://v.youku.com/v_show/id_XMTc3OTE0Nzg0NA==.html 效果预览: 登陆页面 首页用windowContaine...
  • 由于制作播放器需要,经过...很多刚刚接触wex5的朋友,对js以及css相对操作不熟练,本文尽量以简单的思路来说明。 效果演示:     一.总体思路:  用js通过对鼠标和操作对像的坐标位置的逻辑判断,改变对像的css样
  • 视频教程地址:http://v.youku.com/v_show/id_XMTgwOTAyMTkyMA==.html?from=s1.8-1-1.2&spm=a2h0k.8191407.0.0 一.效果演示: 管理员登陆 演示地址:http://ch-app.c...
  • 刚刚做完wex5与html5 视频的集成,测试之余,突然想到了截图与本地保存,原来以为是很复杂的文件格式与流操作,其实,搞明白canvas,几行代码就能搞定。 一 演示效果:  播放过程中截图,并小窗提示,强制下载到...
  • 视频教程地址:http://v.youku.com/v_show/id_XMTc3OTExNTUwNA==.html 效果预览: 一键部署cloudx5三要领 1.数据源命名为x5 ...
  • app跨平台开发之WeX5使用教程合集 WeX5 App开发教程 WeX5和BeX5比较 和WeX5完全一样的兑品 轻松看透WeX5产品能力和技术 WeX5平台生成App包过程详解
  • 在用wex5制作页面时,会遇到页面左右晃动的问题。如下图: 还有字符超过宽度后的问题: 总之页面晃来晃去,会影响手指触摸。下面分析并解决这个问题。 二,问题分析与解决: 页面晃动总的分为两类: ...
  • wex5 adminlte

    2016-12-06 00:26:18
    案例使用说明: 使用前确保UI2/demo/pcSample下的案例文件都存在(X5平台自带) 将资源解压后放在相应的目录下(UI2/portal) 启动tomcat右键运行index.w文件即可
  • wex5前端UI在云部署后能否在云端进行二次编辑,而不需要在wex5编辑器里修改后再次上传?? 带着这些问题,重新认识wex5的UI设计与编译原理,有助于我们分离前端开发。 二 页面结构分析: wex5页面由w....
  • 3.ajax与wex5组件的通用性 写到这里就会产生疑问,ajax的回调里能不能直接写wex5组件方法呢?? 在界面上放一个lableoutput,在ajax的success回调里写上wex5的方法。 测试成功!也就是说,ajax方法在页面中是全局的...

空空如也

空空如也

1 2 3 4 5 ... 19
收藏数 365
精华内容 146
关键字:

wex5教程

友情链接: Tree.rar