认识WeX5

/**
 * WeX5:将HTML打包成手机app
 */
Web应用:浏览器和微信中运行的app
本地应用:手机中直接运行的app
打包:利用 Web应用 生成 本地应用 的过程

  

/**
 * WeX5的本质
 */
本质上开发出来的是Hybrid App,也就是常说的混合应用
混合应用下有WebView,WebView下有网页应用

  

/**
 * 下载开发素材
 */
创新学院
http://weh5.org/
资源下载
WeX5初级教材配套素材

  

/**
 * 开发工具简介
 */
启动WeX5开发工具
XCloud登录,也就是输入WeX5的账号和密码
UI2目录下,存放页面模型
Native目录下,存放本地app

  

/**
 * 打包简介
 */
启动WeX5开发工具
XCloud登录,也就是输入WeX5的账号和密码
UI2目录下,存放页面模型
Native目录下,存放本地app
Native -> 右键 -> 新建 -> 创建本地app -> 输入app名
-> 需要的话输入服务器地址 -> 输入项目中的首页地址 -> 选择需要打包的资源文件
-> 版本号:1.0.0
-> 应用包名:类似com.wewezhang.ad
-> 输入开发者信息和证书
-> 设置应用图标和欢迎图

  

/**
 * 双向数据绑定
 */
输入组件 和输出组件 之间的关联关系: input 和 output 的 bind-ref 属性  $model.data.ref(‘name‘);

  

时间: 2024-09-30 14:38:27

认识WeX5的相关文章

wex5 实战 手写签名与上传

之前做过一个物流演示模块,有一个功能没做完,就是收件人收货后,可以手写签名并上传,替代传统纸张的签名.今天终于做完了. 一 效果演示: 后台图片上传成功 二 设计思路: 运用canvas插件jq-signature,制作手写签名,并通过二进制流方式上传图片 三 代码实现: 1 .下载引入插件jq-signature 手写签名插件,网上有很多,经过多种插件的逐步尝试,只有插件jq-signature达到了我想要的效果; 原因有二:1,支持手机触摸,web,鼠标.其它有的不支持手机触摸. 2,直接转

wex5 实战 微信6位数字密码输入设计

微信支付使用是6位数字输入,用wex5能不能制作这种效果呢? 答案是肯定的. 根据网上提供的数字插件,研究源码后,与wex5进行整后修改,便于利用wex5框架优势. 一 效果演示: 弹出密码框 输入 错误提示 密码错误,重新加载页面 二 设计思路: 根据jQuery数字插件源理,改变dom结构和js,将值取到wex5的页面中 三 代码实现 1 jQuery插件简介与缺点 输入效果没问题,后端是ajax,且全部封装到js中,没有对外开放一些方法和参数,直接引入到wex5中,无法直接调用,也没有相关

WeX5学习笔记 - 01

了解WeX5,有朋友突然自己开始学习WeX5,我了解后觉得挺不错的实用范围广,现在手机上的主流软件基本都可以采用WeX5进行开发,如淘宝,美团.手机银行等,所以自己也开始学习WeX5,WeX5是Eclipse的一个优化改进版本,实用Eclipse的同学,完全可以无压力实用WeX5. 个人理解WeX5相当于一个B/S的应用,可以跨平台在安卓.IOS以及手机电脑浏览器上使用,前台使用HTML5,JS,CSS3等技术,后台可以使用Java,PHP,.Net等: WeX5提供了界面可视化操作,界面设计完

wex5实战之管理收货地址(一)

今天要与大家分享的是实战项目之管理收货地址,现在各种电商app管理收货地址样式越来越多,效果也越来越好.本次项目步骤有这么几个: 1.list迭代json数据,初始化默认收货地址. 2.list数据增.删.改.查. 首先展示效果图,如下: 图一为管理地址页 图二为新增收货地址页 图三为选择城市地区 下面进行详细代码讲解: 1.初始化list数据 Model.prototype.addressDataCustomRefresh = function(event){ var addressData

wex5 教程 前端UI编译原理与记事本编辑

一 前言 wex5页面,与html页面有何差异?两者之前的关系是什么?是如何完成转译的? 能否像编辑html那样用记事本来修改w页面? wex5前端UI在云部署后能否在云端进行二次编辑,而不需要在wex5编辑器里修改后再次上传?? 带着这些问题,重新认识wex5的UI设计与编译原理,有助于我们分离前端开发. 二 页面结构分析: wex5页面由w.js,css三个页面构成,具体功能与对应关系如下: 三 编译后页面结构 1 在公有云部署时,要将wex5页面进行编译,得到部署需要的Native下的ww

wex5 教程 页面左右晃动的处理

一 前言: 在用wex5制作页面时,会遇到页面左右晃动的问题.如下图: 还有字符超过宽度后的问题: 总之页面晃来晃去,会影响手指触摸.下面分析并解决这个问题. 二,问题分析与解决: 页面晃动总的分为两类: 1 boostrap超出页面 以row和boostrap row为例 经过对比,boostrap row比row要宽一些,且超出页面. 为boostrap row 设置样式margin:0;  页面左右晃动问题解决 .row{margin:0; } 2 英文字符超出容器宽度(中文在h标签下都可

wex5 教程 之 web网站android原生模式打包

如果有成型的web网站,想做成手机app,如何用wex5来打包成apk呢?比如说百度视频,我想打包成自已的apk安装到手机上,怎么做呢? 官方提供了四种打包模式,都需要提供服务地址,也就是说要有一台服务器来提供服务.我只是要把web地址封装一下,apk打开后跳转到网页就行,显然服务地址是不需要的. 那如果用wex5的页面frame组件加载一个web页面呢? 经测试,这种方法可行,问题是,w页面是wex5自创的页面,不是html的document页面,会出现视频格式不能播放,无falsh插件问题.

wex5 实战 百度地图JavaScript API 集成

wex5里提供了一个bMap组件来调用百度地图,在百度地图api里,有许多版本的api供开发者调用.在wex5开发里,JavaScript API 集成,经过测试,成功.今天从0开始一步一步操作,将来会制作更复杂的地图与定位效果,大家共同学习,共同进步. 一 演示效果: 二 设计思路: 用html页面,装入百度地图,再将html页面放入iframe页中. 三 代码实现: 1  申请百度会员,并申请百度api ak(开发者密钥) 所有的第三方集成都需要密钥,相当于为当前的用户请求分配的一个id,服

wex5实战之管理收货地址(二)

接着上一张管理收货地址,这章主要讲解新增,编辑,选择省市区功能,主要有windowReceiver.windowDialog.tree组件的使用. 1.新增.编辑地址,页面. 在页面中放入windowReceiver.windowDialog组件 windowReceiver:用于接收地址参数,判断是否为新增或编辑. windowDialog:用于打开选择省市区弹窗,返回选择数据. Model.prototype.windowReceiver1Receive = function(event){

WeX5学习笔记

目录 WeX5学习笔记... 1 1.轻松看透WeX5产品能力和技术... 1 2.WeX5可以怎么玩?... 3 一.纯本地App. 3 二.关联一个网站,希望默认就打开某页... 4 三.UI设计器... 4 四.打包神器... 4 五.标准玩法... 4 3.WeX5 App与服务端交互原理... 4 4.Account示例程序... 5 5.Takeout示例程序... 7 5.1Index.w.. 7 5.2mapActivity.w.. 13 问题... 13 6.页面间交互视频..