精华内容
下载资源
问答
  • 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作为前端利器,开发好的项目如何正确、快速、高效、稳定、安全的部署到服务器上,作为初学开发人员,有必要选择一种操作简单,便于运维的方案。今天我以教学视频网站为例,选择宝塔服务器面板,一键安装linux+...

    一 前言

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

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

           

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

    二  linux系统安装

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

         

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

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

          

      2  宝塔安装,参考官网

         

         

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

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

           

          宝塔面板安装成功如下:

          

        3 登陆面板

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

       

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

        

      

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

       

      

     

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

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

     

    四  建站与部署

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

           

    建站提示如下:    
         每行填写一个域名,默认为80端口
         泛解析添加方法 *.domain.com
         如另加端口格式为 www.domain.com:88

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

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

     

    2 上传wex5项目

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

        

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

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

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

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

     3 网站设置

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

        

     

     

     

     

     

     

        

     

     

     

     

     

     

     

      

     

      

     

        

     

     

     

     

         

     

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

    展开全文
  • 随着视频播放器的制作需要,基于wex5的开源框架和遵循DOM规范的特性,对html5原生组件进行改装,配合attchmentsimple组件,实现web页面的视频上传与在线播放。  演示工程:http://play-app.cloudx5.com  演示效果...

             随着视频播放器的制作需要,基于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 教程之 图文讲解 Cloudx5一键部署

    千次阅读 2016-11-09 14:49:14
    视频教程地址:http://v.youku.com/v_show/id_XMTc3OTExNTUwNA==.html 效果预览:  一键部署cloudx5三要领 1.数据源命名为x5   2.数据库命名为x5   3.数据库初始化语句sql的生成与上传

    视频教程地址:http://v.youku.com/v_show/id_XMTc3OTExNTUwNA==.html

    效果预览:http://play-app.cloudx5.com

               

         

                                                    一键部署cloudx5三要领

    1.数据源命名为x5

        

    2.数据库命名为x5

       

    3.数据库初始化语句sql的生成与上传

         

          工具栏下,选择导出数据库脚本

    注意事项:

           1.数据库与表的创建必段选择。否则不能创建数据库与表。

            

            2.数据选项含义依次为:无数据(即空表),插入与删除,插入,忽略插入(不允许插入数   据),覆盖数据。选项直接决定将来对数据库的操作权限。

            

            3.输出文件格式为:sql.file

           

            4.选中数据库,并保存,导出。

                     

            5.替换工程Baas目录下的sql下的sql文件。

                

          6.生成本地app,并一键部署。

    展开全文
  • 刚刚做完wex5与html5 视频的集成,测试之余,突然想到了截图与本地保存,原来以为是很复杂的文件格式与流操作,其实,搞明白canvas,几行代码就能搞定。 一 演示效果:  播放过程中截图,并小窗提示,强制下载到...
  • 视频教程地址: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 效果预览:  登陆页面 首页用windowContainer装载
  • 一 前言: wex5官方教程里,开篇即以一个input输入,output即时输出的例子,为我们展现了一个概念:可观察对象。在以后我的项目开发中,将大量运用可观察对象。 ...
  • 视频教程地址:http://v.youku.com/v_show/id_XMTgwOTAyMTkyMA==.html?from=s1.8-1-1.2&spm=a2h0k.8191407.0.0  一.效果演示:   管理员登陆 演示地址:http://ch-app.cloudx5.com  帐号:admin 密码:admin    ...
  • 视频教程地址:http://v.youku.com/v_show/id_XMTc4NDAyMTY4OA==.html 效果预览: 1 调用attchmentSimple组件,打开文件管理器,并...
  • 由于制作播放器需要,经过...很多刚刚接触wex5的朋友,对js以及css相对操作不熟练,本文尽量以简单的思路来说明。 效果演示:     一.总体思路:  用js通过对鼠标和操作对像的坐标位置的逻辑判断,改变对像的css样
  • 前几天帮人设计了一个手机版(做... 1 wex5官方教程,必看  2 数据库,必学  3 js 必学  4 html5,css必学  这4种相关,缺一不可。如果你想做完一个小项目,哪怕是个演示性的小东东,开始努力吧。
  • wex5没有提供拾色器组件,能不能把拾色器组装到fwex5的编辑页面中呢?这样可以把颜色值写到数据库里,供前后台动态调用与修改颜色的值。经过一番研究,测试,可以的。  一 、效果演示:  点击拾色器,弹出拾色器...
  •  数据库写入操作,对于wex5来说相对简单,这里只说触发器的使用与注意事项  1.创建触发器:  在wex5提供的heidiSQL数据库管理工具里,用右键。    2 .编写sql语句    说明:1.名称,即...
  • wex5作为网页开发利器,在前台UI数据交互设计中大量使用了绑定技术,即官方视频教学中也提到了KO,实质是数据绑定与追踪。在前台组件的属性中,为我们提供了两个重要的样式绑定属性,bind-css和bind-style.这两个属性...
  • 一 先说说,这两个概念是什么意思  全局可观察变量?没听说过,只听过全局变量,那你out了,因为我要充分发挥绑定技术来控制页面部局,组件的隐藏与显示,文字内容,样式改变。看我博文大家知道,我想用绑定技术...
  • 在用wex5制作页面时,会遇到页面左右晃动的问题。如下图: 还有字符超过宽度后的问题: 总之页面晃来晃去,会影响手指触摸。下面分析并解决这个问题。 二,问题分析与解决: 页面晃动总的分为两类: ...
  • wex5前端UI在云部署后能否在云端进行二次编辑,而不需要在wex5编辑器里修改后再次上传?? 带着这些问题,重新认识wex5的UI设计与编译原理,有助于我们分离前端开发。 二 页面结构分析: wex5页面由w....
  • 有一个订单,需要取出不同的客户名称,且只显示一次名称。效果如下图: 一 思路:自定义action,用sql语句的group by分组,将名称返回前端,用list显示出来。 二 制作步骤: 1 新建service ...
  • 如果有成型的web网站,想做成手机app,如何用wex5来打包成apk呢?比如说百度视频,我想打包成自已的apk安装到手机上,怎么做呢? 官方提供了四种打包模式,都需要提供服务地址,也就是说要有一台服务器来提供...

空空如也

空空如也

1 2 3 4 5 ... 18
收藏数 342
精华内容 136
关键字:

wex5教程