下面自定义一个action：用来实现两个整数的和 UI层 1.界面操作：先创建一个.w文件，放置两个input和一个button，点击button用来发送请求： 代码： //获取intput值，发送请求 Model.prototype.button1Click = function(event) { var me = this; var aa = this.comp("input1").val(); var bb = this.comp("input2").val(); justep.Baas.sendRequest({ "url" : /action/action", "action" : "action", "async" : false, "params" : { [...]
以自定义一个action：用来实现求两个数的和 1.下载bex5版本并解压 2，打开stusio开发工具 3.在BIZ层新建一个应用（对biz进行右键点击新建应用（customAction））如下图所示： 4.在新建的应用（customAction）中右键选择新建业务模块（action），如下图所示 7.在logic中右键点击新建Action文件创建一个自定义action。如下图： 8.操作custom.action.m文件，点击添加可进行设置自定义action的名称，点击生成会生成procedure文件（自定义action的动作），点击代码会自定义一个类，然后可编写代码去实现自定义action的功能。如下图所示 9.在process中右键新建Process文件，如下图所示。 操作自定义的process文件（actionProcess.process.m），在动作设置中进行添加自定义action的动作。 UI层操作 1.右键BIZ层的process下的文件夹，然后选择切换到UI2，会在UI2下生成对应的目录。然后进行界面操作。如下图所示 界面操作：在目录下面右键选择需要的模版向导或是自己设置界面，切记：UI2下文件名字要和BIZ层中的process下的名字一致否则访问不到自定义action。如下图所示： mainActivity.w设计：如下图所示： js代码：（点击button按钮，获取intput中的值，然后发送请求） //要先引用biz: var biz = require("$UI/system/lib/biz"); //获取intput的值，发送请求 Model.prototype.button1Click = function(event) { var me = this; var a = this.comp("input1").val(); var b [...]
android可以用调试方式看： 环境准备 看app运行日志：需要用到真机调试： 首先打包的时候注意事项： 需要打调试包：打包时一定不要勾选“发布模式”选项。android4.4以及以上版本，勾选或不勾选增强型浏览器选项都可调试，android4.4以下版本必须勾选增强型浏览器选项才可调试。 进入真机调试界面之前的操作 安装chrome32以及以上版本。3.2.1版本开始，已经自带浏览器，点批处理“启动Chrome浏览器”即可启动，或者studio中选中.w用浏览器运行会自动启动。 2.打开手机的USB调试选项，在系统设置的开发人员选项里面 。android 4.2以及以上版本如果系统设置里面没有开发人员选项，可以找到设置内关于里面的“版本号”，并连续点击N次，这样设置里会多出开发人员选项。 用数据线把手机和电脑进行链接，系统会识别出手机，可以在我的电脑管理里面看看设备管理器中有没有未识别的USB设备，如果没有，那说明驱动正常，如果有感叹号，建议安装XX助手、豌豆荚之类的，会自动安装驱动。 打开手机内安装好的应用，并打开需要调试页面。 在启动好的chrome内输入：chrome://inspect/#devices 1)如果驱动没问题，页面中会列出手机型号和显示打开的页面，点inspect就可以打开监控页面，这样就和调试普通web页面一样调试WeX5写的页面了。如下图所示： 2)如果驱动没问题，页面没有如上图所示，出现手机型号和显示打开的页面，需要科学上网。 科学上网可选择XX-Net工具或其他，可参考学习：http://www.wtoutiao.com/p/199pj4O.html 查看app运行日志的操作（真机调试界面）： 点击“Elements”，这个界面会显示你当前所打开的页面的实现代码，选择下方放大镜一样的工具，然后点击自己想查看的地方，就好跳转到相应的实现代码，如下图： 点击"NetWork",在Network框内会有所有的请求流，可以看到当前页面加载的脚本和资源的时间，还可以看到某些没有被加载成功的资源，如下图： 点击"Sources"可以查看运行的脚本，调试一般都是在Sources调试的，这个界面可以跟踪每一行代码的运行已经数据的传递（需要开启断点） 在studio开发工具（也就是IDE工具）中的js内所需要调试的部分打上断点，然后点击下面的按钮，查看app运行情况。如下图： 点击"Console"可以查看网页运行后提示的消息，错误或者警告以及输出内容等，类似于eclipse里的控制台输出。如下图： 点击一条提到的消息，查看错误发生的具体位置以及产生这个错误的具体愿意。如下图： ios也可以用真机调试查看app运行日志： 环境准备 看app运行日志：需要用到真机调试： 首先打包的时候注意事项： 需要打调试包：打包时，在配置开发者信息和证书环节：一定要选择ios开发证书且证书文件也要用开发证书文件，在选择本地应用平台环节一定不要勾选“发布模式”选项。 进入真机调试界面之前的操作 IOS必须使用Mac OS X下的Safari，在Windows下的Safari在2012已经停止开发，不支持调试。 设置手机允许调试。在手机的设置里面 关闭：设置\Safari\不跟踪 [...]
此清单包含了wex5/bex5中的大部分案例，供学习参考。 学习资源清单-案例 标题 URL 路径 摘要 标签 wex5\bex5 下载及播放音频视频案例 下载/查看 用了cordova.file和cordova.fileTransfer组件实现文件（音频，视频，图片）的下载和存入相册的功能 音频、视频、图片的下载和存入相册 通用 云ide开发登录页面 下载/查看 基于cloudX5的简单注册登录功能。实现了手机号码验证、邮箱验证、是否重复等功能 云ide开发 通用 Wex5新adminLTE风格门户 下载/查看 这是使用WeX5开发的AdminLTE风格的案例，本案例整合了官方PC端界面的100案例，并且可以很容易的使用AdminLTE提供的widgets，方便，简单，快捷 AdminLTE界面风格 通用 仿闲鱼 下载/查看 这是使用WeX5移动应用开发工具开发的一个H5App，功能仿闲鱼。1）登录及注册； 2）用户头像的上传 ； 3）鱼塘的创建（鱼塘都是百度地图定位到的周边建筑）；4）加入其它鱼塘；5）想要卖出的商品的发布（可选择发布到的鱼塘及商品的分类）；6）鱼塘的人气以及发布数；7）买商品；8）对自己所发布、买到及卖出商品的统计 基于地理位置、商品交易 通用 仿一本时光 下载/查看 这是使用WeX5移动应用开发工具开发的一个H5App，功能仿一本时光。1、进入APP首页，展示相册两个成品效果，查看详情可以查看相册的功能介绍；2、APP右上角，进入我的页面，点击登录，手机验证登录，但是由于参考考虑，默认的验证码为4为数字，输入正确格式的手机号，和任意四位数字，即可登录。登陆后可以使用全部功能；3、返回首页，点击创建，开始创建自己的第一本相册，支持多选图片，由于图片上传效率考虑，一次最多只能上传15张图片；4、上传图片之后，进入编辑图片页面，成相册的形式，可以翻页，主要有风格、页面版式、编辑照片、编辑文字，4个主要功能。编辑完成后，可以选择下单或者保存；5、下单页功能，编辑地址，保存地址功能， 图片上传、在线编辑图文 [...]
前端框架图图形展示： 如上图所示，WeX5前端框架（UI2）分以下部分： 基础库 WeX5前端依赖的两个基础库：数据感知MVVM和jQuery，其中数据感知MVVM基于Knockoutjs改进的。 模块框架 UI2遵循AMD模块标准，采用RequireJS实现。模块化是UI2的基础，UI2的所有资源（包括js、css和html等）都是模块，都采用模块化方式引入，采用模块化方式管理依赖。 组件框架 组件化框架提供组件规范、组件生命周期管理能力和丰富的组件体系。组件化框架的实现本身也是基于js模块化，并且依赖基础库中的数据感知体系MVVM（基于Knockoutjs实现）和jQuery。 页面框架 WeX5的页面模式支持单页模式（Single-page Application）和多页模式（Multi-page Appliction），默认实现是单页模式。 WeX5的前端是由若干个页面构成的，每个页面由三个文件（.w文件、.js文件和.css文件）组成，除了这三个文件之外，页面也可以引用其它的js模块、css模块和图片等资源。在逻辑上， 每个页面由若干个组件构成，同时页面也可以包含若干个子页面（类似HTML中的iframe）。 Studio开发工具 WeX5是一个开发手机应用和Web应用的快速开发平台，提供了强大的Studio开发工具，辅助用户开发，主要包括：页面可视化设计工具、丰富的页面模板向导、代码自动提示、页面编译工具、LESS工具、资源合并工具、手机APP打包工具等等。
wex5框架 开源免费 WeX5采用Apache许可证开源模式，商业友好，完全免费。基于WeX5开发出来的应用，每一行代码都在你手里，发布部署无任何限制，完全自由免费。 基于主流技术和标准 WeX5前端采用HTML5 + CSS + JS标准，使用AMD规范的requirejs、bootstrap、jquery等技术；WeX5手机APP基于phonegap（cordova）采用混合应用（hybrid app）开发模式；WeX5支持多种类型的后端，包括Java、PHP和.NET等，同时也支持云API。 前端跨“端” WeX5对跨平台多前端支持极好，一次开发，多平台运行。目前，WeX5支持的前端有： 1、移动APP（苹果APP和安卓APP）； 2、微信应用（包括公众号、服务号和企业应用号）； 3、PC浏览器； 4、其它轻应用（如百度直达号）； 后端跨“端” WeX5坚决走开源和开放的道路，WeX5在支持后端技术和后端部署上，体现出极端彻底的开放性： 1、开放的后端技术支持：WeX5的后端完全开放，可通过http和websocket等协议连接各种后端中间件或云服务（Java、PHP、.NET等）； 2、WeX5的部署完全开放自由，无任何限制，可以部署在任何公有云或私有云服务器上。 可视化设计 WeX5的IDE基于eclipse，提供了一个完全可视化、组件化、拖曳式开发环境，完全所见即所得；向导化和模板化等工具，快速生成常见应用场景界面，下图是WeX5可视化设计器图像展示。 丰富的组件体系和向导 WeX5的UI组件体系完全基于HTML5 + CSS + JS，使用requirejs、jquery和bootstrap技术，内置支持大量丰富的UI组件；针对一些常用的场景，WeX5提供了丰富的向导，便于快速构建应用。 1）WeX5丰富的组件体系 2）WeX5丰富的向导 设备访问 WeX5基于phonegap（cordova）采用混合应用（hybrid app）开发模式，可以轻松调用手机设备和硬件能力，如相机、地图、LBS定位、指南针、通话录、文件、语音、电池等等，针对设备的本地能力，WeX5提供了丰富的cordova插件。 扩展能力 WeX5一直坚持开放的态度，在WeX5上，不仅可以使用内置的组件、向导和cordova插件，你也可以根据自己的需要，扩展定义自己的组件、向导和cordova插件；如果你觉得bootstrap样式不是你想要的，你也可以在WeX5上做出一套基于别的样式库（例如Semantic UI）的组件和向导。 全能力调试和智能代码提示 开发手机APP，模拟调试是关键能力，对开发者极端重要，而这也是业务现有hybrid app开发工具的软肋。WeX5对hybrid app开发提供了业务最强大的调试支持： 1、提供全能力、一站集成的模拟调试支持 开发手机APP，日常的高度几乎都是模拟调试，使用频繁程度远超真机调试，WeX5提供全面、完备的模拟调试支持，表现真正完美。 2、WeX5的模拟调试效果和真机运行效果几乎相同 由于WeX5的界面技术基于HTML5 + CSS + JS，并采用高仿真本机设备APP模拟，模拟调试运行效果和真机运行效果几乎完全相同，杜绝模拟运行和真机运行不一致的问题。 3、WeX5开放所有的UI框架和组件源码 开发者能在调试时跟踪进入每个组件的每一行代码，找到和排查到真正的底层原因，系统调试彻底透明、无墨盒、无死角！ 4、支持真机调试 提供全真机和快捷真机调试模式，为开发者提供最大方便。 [...]
随着互联网的飞速发展，前端开发越来越复杂，导致开发经常出现两个问题： 恼人的命名冲突 烦琐的文件依赖 针对这两个问题，可以使用js模块化技术来解决。当前主流的js模块化有两大规范CMD（Seajs）和AMD规范（RequireJS）。WeX5采用RequireJS（AMD规范）来实现，关于RequireJS的详细说明参考：http://www.requirejs.org/ 接下来我们介绍在WeX5中，如何使用模块化？ 2.3.1 定义模块 在WeX5中，定义模块时需要符合以下规则： 一个文件定义一个模块； 所有模块都定义为匿名模块，按模块路径的方式引用，例如“$UI/system/lib/justep”表示“/UI2/system/lib/justep.js”文件； 在WeX5中，最常用的是一个模块定义一个js类，例如： define(function(require){ var $ = require("jquery"); var justep = require("$UI/system/lib/justep"); var Model = function(){ this.callParent(); }; return Model; }); 如上所示，这个模块定义了一个js类Model。 关于定义模块的详细说明请参考：http://www.requirejs.org/docs/api.html#define 2.3.2 引用模块 [...]