• WeX5移动开发参考代码

    2020-06-03 23:33:35
    WeX5开源免费跨端开发工具,主流APP开发工具,html5开发工具,支持html5 app开发、android开发、安卓开发、ios开发、微信开发、java web开发等,WeX5是高性能HTML5 App的开发工具,框架遵循Apache协议彻底开源免费。...
  • 使用 plugman 创建cordova 插件的demo工程 教程地址: http://blog.csdn.net/b2259909/article/details/52471178
  • Crosswalk 入门 http://www.mobibrw.com/p=1934 Crosswalk XWalkCookieManager 介绍 http://code.taobao.org/p/crosswalk_browser/diff/3/trunk/XWalkEmbed/src/com/huosu/qingapp ...package co

    Crosswalk 入门

    http://www.mobibrw.com/p=1934


    Crosswalk   XWalkCookieManager 介绍

    http://code.taobao.org/p/crosswalk_browser/diff/3/trunk/XWalkEmbed/src/com/huosu/qingapp



    package com.test;
    
    import android.annotation.SuppressLint;
    import android.app.Activity;
    import android.content.Intent;
    import android.os.Bundle;
    import android.util.Log;
    import android.view.View;
    import android.widget.RelativeLayout;
    import android.widget.TextView;
    
    import com.tool.http.HttpSend;
    import com.tool.http.WebUrl;
    
    import org.xwalk.core.XWalkCookieManager;
    import org.xwalk.core.XWalkView;
    
    
    public class WebShowActivity extends Activity {
        private String  url;
        private XWalkView mXWalkView;
    
        @SuppressLint("JavascriptInterface")
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_web_show1);
            url = WebUrl.getUrl() + "platform/" + bundle.getString("url")+"?pageId="+bundle.getString("pageid");
            mXWalkView = (XWalkView) findViewById(R.id.webView);
    
    
            XWalkCookieManager xWalkCookieManager=new XWalkCookieManager();
            xWalkCookieManager.setCookie(url, HttpSend.SET_COOKIE);//在此注入cookieId,保持连接
    
    
            mXWalkView.load(url, null);
    
    
            RelativeLayout goback = (RelativeLayout) findViewById(R.id.gobackRelativeLayout);
            goback.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    finish();
                }
            });
    
        }
    
    
        @Override
        protected void onPause() {
            super.onPause();
            if (mXWalkView != null) {
                mXWalkView.pauseTimers();
                mXWalkView.onHide();
            }
        }
    
        @Override
        protected void onResume() {
            super.onResume();
            if (mXWalkView != null) {
                mXWalkView.resumeTimers();
                mXWalkView.onShow();
            }
        }
    
        @Override
        protected void onDestroy() {
            super.onDestroy();
            if (mXWalkView != null) {
                mXWalkView.onDestroy();
            }
        }
    
        @Override
        protected void onActivityResult(int requestCode, int resultCode,Intent data) {
            if (mXWalkView != null) {
                mXWalkView.onActivityResult(requestCode, resultCode, data);
            }
        }
    
        @Override
        protected void onNewIntent(Intent intent) {
            if (mXWalkView != null) {
                mXWalkView.onNewIntent(intent);
            }
        }
    }
    

    布局界面  activity_web_show1.xml


    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
                  xmlns:tools="http://schemas.android.com/tools"
                  android:layout_width="match_parent"
                  android:layout_height="match_parent"
                  android:orientation="vertical"
                  tools:context="com.leanweb.WebShowActivity">
    
    
        <org.xwalk.core.XWalkView
            android:id="@+id/webView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content">
    
        </org.xwalk.core.XWalkView>
    
    </LinearLayout>
    





    展开全文
  • WeX5学习笔记

    2019-10-02 13:26:48
    WeX5学习笔记...1 1.轻松看透WeX5产品能力和技术...1 2.WeX5可以怎么玩?...3 一、纯本地App.3 二、关联一个网站,希望默认就打开某页...4 三、UI设计器...4 四、打包神器...4 五、标准玩法...4 3.WeX5 App...

    目录

    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.页面间交互视频... 15

    6.1 页面打开和传参概述... 15

    6.2 Shell打开页面... 18

    6.3 对话框与数据传递... 19

    6.4 内嵌页面与参数传递... 21

    7.页面结构及生命周期视频... 23

    课程记录... 24

    1.最简单的应用... 24

    2.firstSPA.. 24

    3.todoMVC.. 24

    4.通过list显示服务端json文件中的数据... 24

    表单与data组件的绑定... 25

    5.实现单表的CRUD.. 25

    6.自己框架实现后台服务... 25

    7. 自己框架集成BaaS代码... 26

    8. WebSocket通信应用... 26

    9.播放音频视频... 26

    10.调试... 26

     

     

    WeX5学习笔记

    1.轻松看透WeX5产品能力和技术

    首先,必须理解一件事:移动和云时代的企业应用技术,说白了,也就三块:前端UI、后端服务、前端设备api。这后面,是一个事实和趋势:就是前后端已经分化,并各自独立发展:

    1.前端UI

    互联网和浏览器已经普及和扎根,企业应用的前端UI和样式组件,都会沿着w3c的html+css+js路线发展,资源也越来越多,比如bootstrap等。已经没有任何企业,能离开w3c的html+css+js标准,另起炉灶搞自己的了。微软试了不行,adobe试了不行,没人能行。

    2 后服务端

    后端和前端正好相反,技术正走向多元化。node,Python,java并存,以及PAAS、BAAS(后端即服务:Backendas a Service 公司为移动应用开发者提供整合云后端的边界服务)云服务的成熟,数据绑定也要支持多种技术和方向。

    3 前端设备api

    移动和设备在急剧发展,各种硬件能力会更多的加入,想想可穿戴设备吧,想想智能客厅吧,想想未来的手机吧。。。

    总结起来,就是一条原则:“让UI界面归UI界面,让设备api归设备api,让后端服务归后端服务”。仅此而已!

    这个原则,正是WeX5技术设计坚定遵循的原则。正是对这一原则的坚决遵循,才使得WeX5的技术如此开放强大。

    而WeX5另一个强大的原因,是源于开源的力量。免费诚可贵,自由价更高。开源给你的,就是自由。开源是王道啊。

    下面逐条说说WeX5强大之处,以及原因:

    1.开源模式

    WeX5采用的是Apache许可证开源模式,商业友好,完全免费。开发出来的应用,每一行代码都在你手里,发布部署无任何限制,自由,免费。

    2.跨平台多前端应用开发,支持app、web和微信应用快速开发

    WeX5对跨平台多前端应用开发的支持极好,一次开发,多平台运行。

    目前,WeX5能开发的跨平台多前端应用有:

    移动app(苹果ios app、安卓Androidapp)

    微信应用(包括公众号、服务号和企业号应用)

    企业web app(PC、平板和手机)

    其他轻应用(百度直达号等)

    (在企业应用市场,多平台、跨前端已成必须,而非可选!微信应用,已经势不可挡,必将颠覆移动应用的版图。在微信应用和百度直达号等轻应用的推动下,在企业移动应用领域,hybrid app也将固化其主流地位,毫无悬念)

    3.高效精致的UI组件体系,完全基于主流标准和技术

     WeX5的UI组件体系是完全基于html5+css3+js,非常干净标准。

     WeX5的UI组件技术完全是开放主流,基于jquery和bootstrap(Bootstrap是Twitter推出的一个用于前端开发的开源工具包)技术,经WeX5高度优化,在移动上的表现很好,接近原生,真的很赞。

    WeX5 的UI基于模块化开发,采用增强的RequireJS模块化技术

    可视化拖拽设计的组件技术,WeX5已经提供了大量丰富的UI组件,并且支持引入和扩展第三方组件,大大提升了界面开发的效率和降低了难度

    风格样式库基于bootstrap技术,在bootstrap基础上大大增强了适合移动的样式和组件,可轻松引入bootstrap大量丰富的样式资源并随意换肤

    高效灵活的双向数据绑定技术和数据组件,使用简单能力强大

    高度优化,性能接近原生。操作爽滑,拖拽、转场及动画效果很好

    (我个人很认同WeX5的做法,第一,凡是业界主流的好轮子,比如jquery和bootstrap,就应该直接用,而且,WeX5做了深度优化,使app运行效果媲美原生。第二,我有技术洁癖,UI组件库,必须基于html5+css3+js这样的标准,这也是w3c统治互联网的三大基石,没的其它选择啊)

    4.  本机API框架(Native APIFramework)

    WeX5采用混合应用(hybrid app)开发模式。能轻松调用手机设备的系统和硬件能力,如相机、地图、LBS定位、指南针、通讯录、文件、语音、电池。。。等。

    这方面,phonegap/cordova几乎是事实的标准了,很多大公司都采用。在本机框架上,WeX5有:

    基于phonegap(cordova)框架

    默认内嵌高性能浏览器,大大提升性能,特别是android低端机

    提供微信等轻应用框架

    提供了丰富的原生插件

    支持引入和扩展第三方插件,任何原生app能实现的能力都可通过扩展插件实现

    5.  可视化拖拽式集成开发环境IDE

    WeX5的IDE基于eclipse,WeX5的主要工作是强化了可视化快速开发。提供了一个完全可视化、组件化、拖拽式开发环境。

    基于eclipse开源IDE

    可视化、组件化拖拽设计,完全所见即所得

    向导化、模版化等工具,快速生成常见应用场景界面

    全方位代码智能提示,这方面WeX5做了很多功夫,WeX5所有的UI组件,乃至手机本机插件API,在WeX5的IDE里,都能实现代码智能提示,给开发者提供极大方便

    6.  全能力的调试支持和智能代码提示

    开发手机app,模拟调试是关键能力,对开发者极端重要,而这也是业界现有hybrid app开发工具的软肋。WeX5对hybrid app开发提供了业界最强大的调试支持,表现真正完美。

    提供全能力、一站集成的模拟调试支持。开发手机app,日常的调试几乎都是模拟调试,使用频繁度远超真机调试,WeX5提供全面、完备的模拟调试支持,表现真正完美

    WeX5的模拟调试效果和真机运行效果几乎完全相同。由于WeX5的UI组件体系彻底基于html+css+js,并采用高仿真本机设备app模拟,模拟调试运行效果和真机运行效果几乎完全相同,杜绝模拟运行和真机运行不一致的问题

    WeX5开放了所有的UI框架和组件源码,使得开发者能在浏览器里跟踪进入每一个组件的每一行代码,找到和排查到真正的底层原因,系统调试彻底透明,无黑盒,无死角!

    支持真机调试,提供全真机和快捷真机调试模式,为开发者提供最大方便。

    WeX5开放了全部原生app框架源码和本机api插件源码,开发者可以在原生开发环境(Android ADT和XCode)内,跟踪调试进入app的每一行代码里

    7.  无限制、多方式、可加密的App应用打包发布

    WeX5采用Apache 许可证开源协议,商业友好。而且,在开放性上,也走的极端彻底,这一点在app应用打包上得到充分体现:

    打包发布无任何限制,无需任何费用。WeX5彻底开源,应用的每一行代码都在你手里,自由打包,无拘无束!

    轻松打包发布成高性能的原生app,包括安卓Android的apk,苹果ios的ipa

    一键发布微信应用(微信公众号、服务号、企业号均可)

    一键发布成百度轻应用、web应用等

    WeX5打包发布的app和应用,支持全部web资源(html+css+js)的加密,WeX5采用高强度动态密钥,每个app每次编译都会采用不同的动态密钥,真正做到一包一秘!

    支持本地快捷打包、远程服务打包、原生环境编译打包等模式,给你所有想要的打包方式和方便性

    彻底开源,支持原生代码调整、插件自定义和插件选择打包,真正自由

    8.彻底开放的App应用后端技术和部署方式

    WeX5坚决走开源、开放的道路,WeX5在支持后端技术、后端部署上,体现出极端彻底的开放性。

    开放的后端技术支持,WeX5的后端完全开放,可通过http、Websocket等协议连接各种后端中间件或云服务(java、node、php、.net等)

    无限制的后端部署,可以部署在任何自己选择的公有云、私有云服务器上,WeX5的部署完全开放自由,无任何限制

    总而言之,WeX5是多平台、跨前端应用开发的优秀工具,业界收费的同类工具,和WeX5相比,技术要落后和老化不少。最难得的是:WeX5采用商业友好的Apache许可证开源模式,用的放心啊。

    企业移动应用大潮滚滚,微信应用扑面而来,祝各位朋友用好开源的WeX5,多多发财!

    2.WeX5可以怎么玩?

    一、纯本地App

    没任何服务请求,已经有开发好的一堆html+js,希望本地App中可以方便的使用,那可以参考默认的Native/X5工程,把自己开发好的资源放到www目录下就可以,注意工程的几个重要选项:

    服务地址:http://localhost

    首页: 假设你www中有一个入口的index.html,那写 /index.html

    生成App包的向导中,“重新编译使用到的UI资源”一定不要选

    二、关联一个网站,希望默认就打开某页

    例如想把本论坛做成一个app,那可以新建一个本地App,把

    服务地址:http://bbs.justep.com

    首页: /forum.php

     这样生成的app,一启动就打开论坛的首页

    三、UI设计器

    UI2下建自己应用(例如demo),形成自己的一组页面,然后Native新建一个本地App,选择新建的资源demo,点右键“编译使用到的UI资源”,则在ww下生成标准的html+js,该资源可以放到标准 web 服务器(apache, iis, tomcat等)直接进行网络访问

    四、打包神器

    什么UI2,什么X5不要,我就只要一个可以生成App的环境,点这里下载

    xcode,adt, 哈哈,都有

    五、标准玩法

    外卖为例,“WeX5 App与服务端交互原理” 有交互原理介绍。

    资源打进app,bass 部署到tomcat上作为服务, 这个是推荐用法。

    什么,资源咋升级?没问题,按“App资源和版本更新”将最新的资源按更新到服务器即可。

    刚下载的一个WeX5,解压后运行目录的“启动WeX5开发工具.bat”和“启动WeX5运行平台.bat”,这样就可以用浏览器连接和访问,如果App不选择打包资源,那修改的资源,App 也会自动更新。

    3.WeX5 App与服务端交互原理

    拿WeX5自带的外卖来说举例,它由三部分组成

    1. UI2/takeout 这个是页面,由页面文件.w和js以及css等构成,js中有$.ajax的请求

    2. Native/外卖这个是本地app的工程,用来打包app

    3. tomcat的webapps/baas 这个是服务端,提供步骤1中的$.ajax访问

    启动服务

    开发工具Studio中启动Tomat,这个将启动两个服务,一个是tomcat的webapps下的baas服务,另外一个是用于解析运行UI2资源的UIServer(在runtime\UIServer)。为描述方便,这里假设本机ip地址是192.168.1.1, tomcat的端口是8080

    浏览器访问

    浏览器输入

    1

    http://192.168.1.1:8080/x5/UI2/takeout/index.w

    这样就可以访问外卖功能,这个在电脑浏览器或者手机浏览器都可以(电脑推荐使用chrome浏览器)。

     解释一下这个URL8080后面的x5UIServer的名字,在tomcatserver.xml中定义,具体请参考tomat的相关说明,表示访问UIServerUI2/takeout/index.w 这个会请求到UIServer后,由UIServer做编译,生成htmljs供前端使用。

     本地App

    首先要生成App,先看看默认的App定义,在 Native/外卖 上点右键选择“编辑本地App”,向导中有三个重要的参数:

    1. 服务地址:这里应该写 http://192.168.1.1:8080, 因为baas在这个服务上

    2. 首页: 就是默认打开的页面写 /x5/UI2/takeout/index.w,这里 x5那个可以写成任意的,和前面介绍的UIServer的那个x5名字没任何关系

    3. 需要打包的资源:默认选择了takeout,这里如果选择了,那UI2/takeout下的资源会被打包到App里面,也就是说tomat中没有UISever那个服务运行也是正常的,如果不选择,则首页那个就必须写成/x5/UI2/takeout/index.w,因为默认的UIServer的名字叫x5,App启动时是通过UIServer来获取页面,和浏览器访问完全相同

     补脑

    如果takeout资源打包了,服务地址写 http://localhost 可否?

    还真不行,因为资源中有$.ajax的请求会发到 192.168.1.1:8080/baas 上,如果写localhost,那页面打开没问题,但ajax请求会遇到传说中的跨域问题,导致失败,所以这里服务地址要写baas服务的地址。换句话说,对于资源打到App的情况,服务地址更多是告诉ajax请求当前域是谁,从而避免跨域问题(所有请求都是http://192.168.1.1:8080/xxx,但app内部做了处理,会优先找打入app的资源,没有找到的资源在去请求服务端,对于app来说,是读取本地资源还是服务端请求没任何区别,从而解决跨域问题)。当然,如果没有任何ajax请求或者用插件方式发http来访问,实际上可以写 http://localhost而如果要访问多个地址,那就只能写成 http://localhost,在配合http的插件发请求(自带的plugin.http.request插件),就不能使用jquery的了(其实纯html可以用jsonp方案,不过比较麻烦,具体baidu,推荐插件方案)。

     

    4.Account示例程序

    UI2/demo/account

    记账本演示程序。

    演示了 list 、windowReceiver, windowDialog等的用法。

    在主页面中,windowDialog通过src属性指定页面w文件,将窗口指定为对话框。这样可打开对话框,并传递数据到对话框中。在对话框页面中,通过windowReceiver接收主页传递的数据、关闭对话框,并传递返回数据到主页。

     

    另外,data.save()方法,触发 data 组件的 onCustomSave 事件,事件处理函数完成具体保存操作。这里实际上通过事件触发和处理机制,实现了save保存操作的重写。允许程序员实现自定义操作。

    justep.Shell.showLeft();实现侧边栏切换显示状态。

     

    Swing组件,实现左右侧边栏。

     

    contents组件:在.w文件中使用contents组件可以实现不同页面的展现,特别是可以通过手势滑动来切换页面。contents组件使用content来展现页面,contents组件中可以包括多个content,content可以动态生成,删除,增强了页面显示的灵活性,contents组件和buttonGroup组件配合使用,使用button组件的target属性关联content,可以实现按钮和页面的绑定

     

    组件路径:/UI2/system/components/justep/contents

    组件标识:$UI/system/components/justep/contents/contents

     

    配合其它组件使用,可实现以下功能:

     

    滑动切换页面

    实现图片轮换效果

    模拟门户打开w页面

    新增空白content,并动态创建组件

    contents嵌套contents,分类切换页面

     

    通过ShellImpl的contentsXid属性指定。 可在多个页面中实现切换显示。

     

           this.shellImpl = new ShellImpl(this, {

                         contentsXid : "pages",

                         wingXid : "wing",

                         pageMappings : {

                                "list" : {

                                       url :"$UI/demo/account/list.w"

                                },

                                "detail" :{

                                       url :"$UI/demo/account/detail.w"

                                },

                                "classSetting": {

                                       url :"$UI/demo/account/classSetting.w"

                                }

                         }

                  });

     

     

     

     

    代码触发事件,通过事件传递数据,触发操作:

           Model.prototype.classDataAfterSave =function(event) {

                  // 通过Shell发出一个消息,通知其他页面分类数据已改变,并且在消息中携带了改变后的分类数据

                  var classData =this.comp("classData");

                  justep.Shell.fireEvent("onClassChanged", {

                         "classData" :classData.toJson()

                  });

           };

     

    Detail.w对应的脚本detail.js中:

    Model.prototype.onClassChanged = function(event) {

           this.comp("classData").clear();

           this.comp("classData").loadData(event.classData, truenullnulltrue);

        };

    5.Takeout示例程序

    5.1Index.w

    5.1.1模型

    Data和baasData的图标不同,baasData的图标 ,data的图标 。

    foodData(baasData)

    计算规则:

    CalcPriceText: js:'¥ ' + val('fPrice') + '元'

    calcImageURL: js:$model.transURL('./img/'+val('fImage'))

     

    userData(baasData)

    过滤条件userFilter:

    fID = :user

    orderData(baasData)

    过滤条件userFilter:

    fID = :user

     

    cartData(data)

    计算规则: calcMoney ---- js:val('fPrice') *val('fCount')

    statusData(data)

    计算规则:

    calcCartSumMoneyText ---- js:'¥ ' +$model.comp('cartData').sum('calcMoney') + '元'

     

    calcCartCountText----js:($model.comp('cartData').count()> 0) ? '购物车(' + $model.comp('cartData').count() +')' : '购物车'

     

    calcCanSaveOrder ----js:$model.comp('cartData').sum("calcMoney") > 0

     

    calcCanClearCart ----js:$model.comp('cartData').count() > 0

     

     

    payData(data)

     

     

    5.1.2 UI界面

    1.对话框

    Src: $UI/takeout/mapActivity.w

    2.主要内容

    四个content显示食品、购物车、订单和我的四个页面。

    四个按钮实现页面切换:foodBtn、cartBtn、orderBtn、ownBtn

    切换实现:按钮的target属性设置。

    布局组件contents上可通过右键菜单添加多个content:

    这样做估计有一个好处,那就是主要内容都在一个.w文件里,可以共用模型的定义。

    1)foodContent

    使用list组件显示食品列表foodList,在list模板中使用了 media(bootstrap) 组件。media-left中显示食品图片,类型image(html),通过bind-attr-src 将image组件的src属性和foodData的列calcImageURL绑定, val('calcImageURL')。

    media-body 中显示 “来一份”按钮 addCartBtn,三个output输出食品名称、描述和计算价格文本。

    “来一份”按钮处理代码中,下面代码

           if(cartData.find([ 'fFoodID' ], [ row.val('fID') ]).length === 0) {

           的作用是使同一食品在购物车中不能重复添加,具体份数可在购物车页面修改。也就是一种食品在购物车中只能作为一条记录出现。

           按钮的span使用bind-text属性 statusData.ref('calcCartCountText')显示购物车中的食品数量。

    2)cartContent

           两个panel,一个用于显示购物车内容;一个用于显示联系人信息。

           显示购物车内容用list组件;

           显示联系人信息用了form(html),css类是 form-horizontal。formGroup(bootstrap)

           付款类型用了radioGroup,单选按钮组。单选按钮组通过itemset属性和payData模型数据关联在一起。

          

           两个按钮:清空购物车,调用cartData.clear()方法。

    下单

    3)orderContent

           List组件显示订单内容:

     

    4)ownContent

    显示用户姓名、电话、地址。

    保存用户信息。

    通过定位功能获取用户位置,作为地址。

    5.2mapActivity.w

    通过 iframe 引入map.html

    在 map.html 中,通过js调用了百度地图。

    问题

    transURL

    calcImageURL: js:$model.transURL('./img/'+val('fImage'))中 transURL的用法?

     

           //转换动态图片URL

           Model.prototype.transURL= function(url) {

                  returnrequire.toUrl(url);

           };

    过滤条件 过滤条件userFilterfID= :user:user的用法?

    :user用法估计类似于SQL语句中的绑定变量。占个位置,便于外部传入数据。

    Model.prototype.modelLoad 函数中,直接设置:

           this.comp('userData').filters.setVar("user",this._userID);

           this.comp('orderData').filters.setVar("user",this._userID);

    media(bootstrap) 组件

    http://www.uedsc.com/bootstrap-media-object.html

    Bootstrap 中的多媒体对象(MediaObject)。这些抽象的对象样式用于创建各种类型的组件(比如:博客评论),我们可以在组件中使用图文混排,图像可以左对齐或者右对齐。媒体对象可以用更少的代码来实现媒体对象与文字的混排。

    媒体对象轻量标记、易于扩展的特性是通过向简单的标记应用 class 来实现的。你可以在 HTML 标签中添加以下两种形式来设置媒体对象:

    .media:该 class 允许将媒体对象里的多媒体(图像、视频、音频)浮动到内容区块的左边或者右边。

    .media-list:如果你需要一个列表,各项内容是无序列表的一部分,可以使用该 class。可用于评论列表与文章列表。

    formGroup(bootstrap)

    课程中提到的form-group样式和form-control有什么实质的区别呢?form-group一般用于div,form-control一般用于置于div中的标签元素。

    justep.Util.hint

    显示提示信息框:

    justep.Util.hint("请填写完整的用户信息", {

                                "type": "danger"

                         });

     

    当前日期格式化

    justep.Date.toString(new Date(),justep.Date.STANDART_FORMAT)

    jQuery的deferred对象

    http://www.ruanyifeng.com/blog/2011/08/a_detailed_explanation_of_jquery_deferred_object.html

    开发网站的过程中,我们经常遇到某些耗时很长的javascript操作。其中,既有异步的操作(比如ajax读取服务器数据),也有同步的操作(比如遍历一个大型数组),它们都不是立即能得到结果的。

    通常的做法是,为它们指定回调函数(callback)。即事先规定,一旦它们运行结束,应该调用哪些函数。但是,在回调函数方面,jQuery的功能非常弱。为了改变这一点,jQuery开发团队就设计了deferred对象。简单说,deferred对象就是jQuery的回调函数解决方案。在英语中,defer的意思是"延迟",所以deferred对象的含义就是"延迟"到未来某个点再执行。它解决了如何处理耗时操作的问题,对那些操作提供了更好的控制,以及统一的编程接口。它的主要功能,可以归结为四点。下面我们通过示例代码,一步步来学习。

    deferred对象有三种执行状态----未完成,已完成和已失败。如果执行状态是"已完成"(resolved),deferred对象立刻调用done()方法指定的回调函数;如果执行状态是"已失败",调用fail()方法指定的回调函数;如果执行状态是"未完成",则继续等待,或者调用progress()方法指定的回调函数(jQuery1.7版本添加)。前面部分的ajax操作时,deferred对象会根据返回结果,自动改变自身的执行状态;但是,在wait()函数中,这个执行状态必须由程序员手动指定。dtd.resolve()的意思是,将dtd对象的执行状态从"未完成"改为"已完成",从而触发done()方法。类似的,还存在一个deferred.reject()方法,作用是将dtd对象的执行状态从"未完成"改为"已失败",从而触发fail()方法。

    jQuery提供了deferred.promise()方法。它的作用是,在原来的deferred对象上返回另一个deferred对象,后者只开放与改变执行状态无关的方法(比如done()方法和fail()方法),屏蔽与改变执行状态有关的方法(比如resolve()方法和reject()方法),从而使得执行状态不能被改变。

    6.页面间交互视频

    6.1 页面打开和传参概述

    打开页面的三种方式:

    使用Shell,例如 UI2/portal/sample/index.w,这种方式不返回参数;

    打开对话框;

    使用内嵌页面(WindowContainer);

     

    传参数的三种方式:

    ?参数,进入URL,

    Params,#!参数,通过序列化也能进入URL;

    Params.data,不支持序列化,不进入URL,所以不能随链接一起分享。

     

    传参数的例子:

    UI2/demo/page/index.w ,这个首页中,

     

    点击按钮

    打开页面

    演示打开页面的方式和打开页面传参数。

    上面页面文件是 interactive/page.w

    6.2 Shell打开页面

     

    第一种代码:

        //"p2"是index.w中 pageMappings定义的页面标识

           justep.Shell.showPage("p2");

    第二种代码:

        var url = require.toUrl("./page2.w");

           justep.Shell.showPage(url);

     

    三种参数传递:

        var url = require.toUrl("./page2.w?p1=p1Value&p2=p2Value");

           var params = {

               a1: "a1Value",

               a2: 2,

               data: {

                  d1: "d1Value",

                  d2: "d2Value"

               }

           }

           justep.Shell.showPage(url,params)

     

    require.toUrl 相对路径转换为绝对路径。

    参数接收,都在model组件的onParamsReceive事件中。此处是在page2.w中。可在该事件处理中通过event.params访问后两种参数,也可通过this.params随时访问后两种参数。

    6.3 对话框与数据传递

     

    打开对话框并传递参数到对话框:有两种方法。不传参数可以使用按钮关联open操作。传参数可以向下面一样写代码。通过写代码可实现每次打开不同的页面。

    Model.prototype.button1Click = function(event){

           var dialog = this.comp("dialog");

           var url = require.toUrl("./dialog.w?p1=参数1&p2=参数2");

           dialog.open({

               src: url,

               params: {

                  a1: "简单数据a1",

                  a2: 2,

                  //data是特殊的参数, 这部分内容不能被分享

                  data: {

                      //将一个函数传递给对话框

                      fn: function(){        

                         alert("将一个函数传到对话框中");

                      }, 

                      //将data中的一行数据传给对话框

                      data1: this.comp("data1").getCurrentRow().toJson()

                  } 

               }

               

           })

        };

     

    对话框dialog.w中接收参数:

    Model.prototype.modelParamsReceive= function(event){

           var context = this.getContext();

           

           //获取URL中的参数

           var p1 = context.getRequestParameter("p1");

           var p2 = context.getRequestParameter("p2");

           var buf = "来自url的参数: p1=" + p1 + ", p2=" + p2 + "\n";

           

           //获取简单参数

           buf += "简单参数:params.a1=" + event.params.a1 + ",params.a2=" + event.params.a2 + "\n";

           

           //获取复杂参数

           buf += "复杂参数:\n"

           if (event.params.data){

               buf += "    params.data.fn=" + event.params.data.fn + "\n";

               this.comp("dlgData").loadData([event.params.data.data1]);

               this.comp("dlgData").first();

           }

           alert(buf);

        };

     

    对话框关闭并返回参数给主窗口 page.w

        Model.prototype.button3Click = function(event){

           this.owner.send(this.comp("dlgData").getCurrentRow());

           this.close();

        };

    this.owner是谁?是page.w中的dialog组件。

     

    主窗口page.w接收对话框dialog.w返回的数据:

        Model.prototype.dialogReceive = function(event){

    alert("页面接收对话框架返回的数据:" +JSON.stringify(event.data.toJson()));

        };

    对话框的属性

    onClose指向 dialogClose函数。

    onReceive指向dialogReceive函数。

    src指向./dialog.w。

     

    什么时候将返回数据写入主页的data1组件的呢?用的是对话框的mapping机制。对话框mapping属性点击打开对话框

    注意对话框事件onReceive和onReceived的区别。

    onReceive在mapping之前进行,onReceived在mapping之后进行。

    6.4 内嵌页面与参数传递

    page.w页面的containerContent中有两个windowContainer组件,windowContainer1指向./page3.w,windowContainer2指向./page4.w。这样就把page3和page4作为内嵌页面放到了page中。

    windowContainer1

    src属性./page3.w?p1=p1&p2=p2同时指定了url参数。

    Params指定{a1: "a1", a2: "a2"}了第二种参数。

    Page3.js中接收了参数:

    Model.prototype.modelParamsReceive= function(event){

           var context = this.getContext();

           

           //获取URL中的参数

           var p1 = context.getRequestParameter("p1");

           var p2 = context.getRequestParameter("p2");

           var buf = "来自url的参数: p1=" + p1 + ", p2=" + p2 + "; ";

           

           //获取简单参数

           buf += "简单参数:params.a1=" + event.params.a1 + ",params.a2=" + event.params.a2 + "; ";

           

           //获取复杂参数

           buf += "复杂参数:\n"

           if (event.params.data){

               buf += "    params.data.d1=" + event.params.data.d1 + "; ";

               buf += "    params.data.d2=" + event.params.data.d2 + "; ";

           }

           

           var id = this.getIDByXID("container");

           $("#" + id).text(buf);

        };

    显示所有参数按钮演示了如何在页面中获取使用参数:

    Model.prototype.button1Click = function(event){

           var context = this.getContext();

           

           //获取URL中的参数

           var p1 = context.getRequestParameter("p1");

           var p2 = context.getRequestParameter("p2");

           var buf = "来自url的参数: p1=" + p1 + ", p2=" + p2 + "\n";

           

           //获取简单参数

           buf += "简单参数:params.a1=" + this.params.a1 + ", params.a2=" + this.params.a2 + "\n";

           

           //获取复杂参数

           buf += "复杂参数:\n"

           if (this.params.data){

               buf += "    params.data.d1=" + this.params.data.d1 + "\n";

               buf += "    params.data.d2=" + this.params.data.d2 + "\n";

           }

           alert(buf);

        };

    返回参数按钮代码:

        Model.prototype.button2Click = function(event){

           this.owner.send({r1: "r1Value"});

        };

    向主页page.w发送了名为r1的参数,值为r1Value。

    主页page.w中下面代码接收并显示了参数r1的值。

        Model.prototype.windowContainer1Receive = function(event){

           alert("接收到内嵌页面的返回数据:r1=" + event.data.r1);

        };

     

    主页page.w中“刷新内嵌页面”按钮执行代码:

        Model.prototype.button8Click = function(event){

           var url = require.toUrl("./page3.w?p1=p1ValueNew&p2=p2NewValueNew");

           var params = {

               a1: "a1ValueNew",

               a2: 20,

               data: {

                  d1: "d1ValueNew",

                  d2: "d2ValueNew"

               }

           }

           this.comp("windowContainer1").load(url, params);

        };

    代码重新装入内嵌页面page3,并传递了新的参数。

    Load方法智能判断,src没变只传参数;src变了刷新页面。Refresh页面会强制刷新页面。

    windowContainer2

    src属性./page4.w指定了内嵌页面。

    Params属性{data: $model.data1}将主页模型中数据组件data1的值传递给内嵌页面。

    页面./page4.w中分别使用input和list显示了参数数据:$model.params.data。

     

    让人比较意外的是,这种数据关联居然是双向的:即主页数据改变可实时传递到内嵌页面,内嵌页面数据改变也可实时传递到主页。原因是主页和内嵌页面UI绑定的是同一个对象,就是data1。

    主页和内嵌页面可互相访问对方的model组件

    7.页面结构及生命周期视频

     

    课程记录

    1.最简单的应用

    Hello

    介绍应用创建,app打包

    2.firstSPA

    自己利用页面向导创建程序。不用WeX5网站提供的视频中的方法。

    3.todoMVC

           介绍模型、窗口组件、事件、js代码等

    4.通过list显示服务端json文件中的数据

           练习list组件和data组件的用法

    goosData.json

    参考 demo/taobao /list.w

    1)  新建listJsonData应用

    2)  复制demo/taobao/cart文件夹。里面有图片和json格式的数据文件。

    3)  创建标准页面 index.w

    4)  页面model中添加data组件goodsData,根据json数据文件格式,建立数据模型列定义

    Index.js 中添加代码 (代码参考demo/taobao/list.w中同名函数)

    Model.prototype.loadDataFromFile= function(url, objData, operation) {

           if (operation) {

               objData.clear();

           }

           $.ajaxSettings.async = false;

           $.getJSON(url, function(data) {

               objData.loadData(data);

           });

        };

     

        // 获取商品列表

        Model.prototype.goodsDataCustomRefresh = function(event) {

           

           var url = require.toUrl("./cart/json/goodsData.json");

           this.loadDataFromFile(url, event.source, true);

        };

    5)  goodsData的onCustomRefresh事件绑定函数goodsDataCustomRefresh

    6)  index.w 的panel面板的content中添加scrollview组件。Scrollview实现下拉刷新,上划加载更多数据。

    7)  scrollview的中间content中添加list组件,设置data属性值为goodsData。list组件会自动根据关联data数据循环显示。

    8)  在li中添加row组件,row中添加output,引用data中当前行的列。

    9)  启动tomcat,运行index.w。

    10) 知识点讲解:参考教材的scrollview,list,data组件。

     

     

    表单与data组件的绑定

     

    5.实现单表的CRUD

           通过baas服务。

           包括通过Java实现自定义的Action

           Baas打包部署

           参考:WeX5后端服务教程.zip

    6.自己框架实现后台服务

    自己有j2ee的后台服务可以提供数据,wex5应该怎么访问呢,可以不用baas吗?

    可以使用ajax直接访问,不过返回的json数据格式要保证能加载到data组件中http://doc.wex5.com/?p=4932

     或者是像这样的:/UI2/demo/tuniu/json/cityData.json建议集成3.2.1的baas,这样数据交互会简单些可以看看baas服务视频:http://wex5.com/cn/1-wex5#06

      打包下载的那个视频(3.2.1以前版本的baas)

     

     

    7. 自己框架集成BaaS代码

     

    8. WebSocket通信应用

    9.播放音频视频

    10.调试

           一种需求是界面基本不变,调试后端服务。这时可在native文件夹创建app,然后,右键菜单选择编译UI资源,成功后将www文件夹内的文件复制到myeclipse调试用的tomcat服务器应用程序部署文件夹内,作为一个应用程序即可。

           在这种情况下,通过浏览器调试UI中的脚本程序是可以的。

           另外一种需求是后台服务基本不变,主要是开发调试UI。这时,应该把后端服务部署到WeX5开发环境所用的tomcat服务下。但是这个还没有尝试。

    转载于:https://www.cnblogs.com/mehjb/p/6127018.html

    展开全文
  • 1.android开发可实现功能的原生代码(能执行不会程序崩溃,不然后期在wex5中的h5页面中js调用原生代码的时候会一直在jni_onload程序无反应)2.配置插件文件建立如下图的目录libs文件中放插件需要的依赖包等,res里面...

    1.android开发可实现功能的原生代码(能执行不会程序崩溃,不然后期在wex5中的h5页面中js调用原生代码的时候会一直在jni_onload程序无反应)

    2.配置插件文件建立如下图的目录


    libs文件中放插件需要的依赖包等,res里面存放的是android的原生代码中需要的资源文件,www文件下的js文件是cordova插件中需要通过js调用的CordovaPlugin(具体开发步骤可参考wex5的官方文档cordova android插件开发),plugin-ex.xml和plugin.js.xdoc是wex5中cordova插件的说明文档(所有xml文件必须以<?xml version="1.0" encoding="UTF-8"?>开通并且不能在前面加入空格或者换行),plugin.xml是插件中最为重要的配置文档具体代码如下

    <?xml version="1.0" encoding="UTF-8"?>   
    <plugin xmlns="http://apache.org/cordova/ns/plugins/1.0"
            xmlns:android="http://schemas.android.com/apk/res/android"
            id="com.justep.cordova.plugin.pusher"    
            version="5.3.6">   
    //id为js中调用的id名字    version是xml的编译版本
    <engines> <engine name="cordova" version=">=3.3.0" /> </engines> <name>pusher</name> <description>pusher_plugin</description> <js-module src="www/pusher.js" name="pusher"><!--pusher.js的地址路径--> <clobbers target="navigator.pusher" /> </js-module> <platform name="android"><!--android配置--> <config-file target="res/xml/config.xml" parent="/*"><!--config.xml中添加插件名字及包路径对应到具体的cordovaplugin类--> <feature name="pusher"> <param name="android-package" value="com.justep.cordova.plugin.pusher.pusher" /> </feature> </config-file> <config-file target="AndroidManifest.xml" parent="/manifest"> <uses-permission android:name="android.permission.CAMERA"> </uses-permission> <uses-permission android:name="android.permission.RECORD_AUDIO"> </uses-permission> <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"> </uses-permission> <uses-permission android:name="android.permission.READ_PHONE_STATE" /> </config-file> <!--在wex5的项目AndroidManifest.xml添加配置请求-->
    <config-file target="AndroidManifest.xml" parent="/manifest/application"> <activity android:name="com.justep.cordova.plugin.pusher.DemoActivity" android:screenOrientation="portrait" android:configChanges="keyboardHidden|orientation|screenSize" android:allowBackup="true" android:supportsRtl="true" android:windowSoftInputMode="stateHidden|adjustPan" android:theme="@style/Theme.AppCompat.Light.NoActionBar"> </activity> <activity android:name="com.justep.cordova.plugin.pusher.LiveCameraActivity" android:configChanges="orientation|keyboardHidden|screenSize" android:launchMode="singleTask" android:theme="@android:style/Theme.NoTitleBar.Fullscreen"/> </config-file>
    <!--在wex5的项目AndroidManifest.xml注册插件需要的activity-->
    <!--string配置--> <config-file target="res/values/strings.xml" parent="/resources"><string name="max_bitrate">Max Bitrate</string><string name="best_bitrate">Best Bitrate</string><string name="quit_live">Long time reconnect failed, please exit</string><string name="network_message">The current network status is very poor, continue the live broadcast?</string><string name="camera_success">Camera open successfully</string><string name="camera_fail">Camera open failed</string><string name="error_message">-22 error</string><string name="mute_off">Mute close</string><string name="mute_on">Mute on</string><string name="mirror_off">Mirror off</string><string name="mirror_on">Mirror on</string><string name="advance_setting">美颜等级</string><string name="watermark_position">position (topright 1, topleft 2, bottomright 3, bottomleft 4):</string><string name="fps_hint">The fps must be between 0~30</string><string name="watermard_url">水印路径:</string><string name="fps">Fps</string><string name="front_camera_mirror">前置摄像</string><string name="landscape">水平</string><string name="portrait_normal">垂直</string><string name="ready_push">开始直撿</string><string name="rtmp_url">请输兿url</string><string name="beauty_level">Beauty Level</string><string name="toggle_switch_flash_on">Flash on</string><string name="toggle_switch_flash_off">Flash off</string><string name="app_camera">Camera switch</string><string name="live_push">Start pushing</string><string name="live_stop">Stop pushing</string><string name="toggle_switch_beauty_on">Beauty on</string><string name="toggle_switch_beauty_off">Beauty off</string><string name="min_bitrate">Min bitrate</string><string name="min_rate_value">300</string><string name="initial_bitrate">Initial bitrate</string><string name="VIDEO_CAPTURE_FPS">Video capture fps:</string><string name="AUDIO_ENCODER_FPS">Audio encoder fps:</string><string name="VIDEO_ENCODER_FPS">Video encoder fps:</string><string name="OUTPUT_BITRATE">Output bitrate:</string><string name="AV_OUTPUT_DIFF">The difference between audio pts and video pts:</string><string name="AUDIO_OUTPUT_FPS">Output fps of audio:</string><string name="VIDEO_OUTPUT_FPS">Output fps of video:</string><string name="STREAM_PUBLISH_TIME">Time costs of stream published:</string><string name="STREAM_SERVER_IP">Stream server IP:</string><string name="VIDEO_DELAY_DURATION">Video delay duration:</string><string name="AUDIO_DELAY_DURATION">Audio delay duration:</string><string name="VIDEO_CACHE_FRAME_CNT">Number of video cache frame:</string><string name="AUDIO_CACHE_FRAME_CNT">Number of audio cache frame:</string><string name="VIDEO_CACHE_BYTE_SIZE">Size of video cache:</string><string name="AUDIO_CACHE_BYTE_SIZE">Size of audio cache:</string><string name="VIDEO_FRAME_DISCARD_CNT">Number of video frame dropped:</string><string name="AUDIO_FRAME_DISCARD_CNT">Number of audio frame dropped:</string><string name="CUR_VIDEO_BUEATY_DURATION">Time costs of beauty:</string><string name="CUR_VIDEO_ENCODER_DURATION">Time costs of video encoding:</string><string name="cur_video_encode_bitrate">Current video encoding bitrate:</string><string name="illegal_output_resolution">The output resolution is illegal</string><string name="VIDEO_OUTPUT_FRAME_COUNT">Number of video output frame:</string><string name="VIDEO_DATA">Size of video output frame:</string><string name="VIDEO_BUFFER_COUNT">Number of video buffer frame:</string><string name="VIDEO_DROPPED_FRAMECOUNT">Number of video dropped frame:</string><string name="AUDIO_DATA">Size of audio output:</string><string name="reconnect_fail">Reconnection failed</string><string name="dialog_title">Error tips</string><string name="ok">OK</string><string name="no_camera_permission">Camera usage is not permitted, please open first</string><string name="no_record_audio_permission">Audio is not permitted to record, please open first</string></config-file>
    <!--因为wex5生成的项目已经包含string.xml文件,直接复制会导致不能成功生成apk,只能将字符串全面写入项目中存在的strings文件中。注:
    如果是写入的时候目标文件必须存在,如果是复制文件的话不能在目标文件夹中存在同名文件-->
    <framework src="src/android/build.gradle" custom="true" type="gradleReference"/><source-file src="src/android/libs/AlivcPlayer-3.2.0.aar" target-dir="libs/"/>     <source-file src="src/android/libs/live-pusher-3.2.0.aar" target-dir="libs/"/>        <!--添加项目依赖 同时还需要配置一个gradle文件 gradle文件源码后面贴出--> <source-file src="src/android/pusher.java" target-dir="src/com/justep/cordova/plugin/pusher" /><source-file src="src/android/AdvancedSettingDialog.java" target-dir="src/com/justep/cordova/plugin/pusher" /><source-file src="src/android/DataStatistics.java" target-dir="src/com/justep/cordova/plugin/pusher" /><source-file src="src/android/DemoActivity.java" target-dir="src/com/justep/cordova/plugin/pusher" /><source-file src="src/android/LiveCameraActivity.java" target-dir="src/com/justep/cordova/plugin/pusher" /><source-file src="src/android/ToastUtils.java" target-dir="src/com/justep/cordova/plugin/pusher" /><source-file src="src/android/res/drawable/ic_launcher_background.xml" target-dir="res/drawable"/><source-file src="src/android/res/drawable/ic_launcher_foreground.xml" target-dir="res/drawable"/><source-file src="src/android/res/mipmap/ic_launcher.xml" target-dir="res/mipmap"/><source-file src="src/android/res/mipmap/ic_launcher_round.xml" target-dir="res/mipmap"/><source-file src="src/android/res/mipmap/beauty.png" target-dir="res/mipmap"/><source-file src="src/android/res/mipmap/beauty1.png" target-dir="res/mipmap"/><source-file src="src/android/res/mipmap/bubble.png" target-dir="res/mipmap"/><source-file src="src/android/res/mipmap/fash_open.png" target-dir="res/mipmap"/><source-file src="src/android/res/mipmap/finish.png" target-dir="res/mipmap"/><source-file src="src/android/res/mipmap/flash_off.png" target-dir="res/mipmap"/><source-file src="src/android/res/mipmap/microphone_open.png" target-dir="res/mipmap"/><source-file src="src/android/res/mipmap/microphone_off.png" target-dir="res/mipmap"/><source-file src="src/android/res/mipmap/off.png" target-dir="res/mipmap"/><source-file src="src/android/res/mipmap/pause.png" target-dir="res/mipmap"/><source-file src="src/android/res/mipmap/satrt.png" target-dir="res/mipmap"/><source-file src="src/android/res/mipmap/set_up.png" target-dir="res/mipmap"/><source-file src="src/android/res/mipmap/xuanzhuan.png" target-dir="res/mipmap"/><source-file src="src/android/res/layout/activity_live_camera.xml" target-dir="res/layout"/><source-file src="src/android/res/layout/demo_activity.xml" target-dir="res/layout"/><source-file src="src/android/res/layout/layout_advance_setting.xml" target-dir="res/layout"/><source-file src="src/android/res/layout/performance_log.xml" target-dir="res/layout"/><source-file src="src/android/res/values/arrays.xml" target-dir="res/values"/><source-file src="src/android/res/values/colors.xml" target-dir="res/values"/><source-file src="src/android/res/values/styles.xml" target-dir="res/values"/> <!--将需要的资源文件复制到相应的路径文件夹下--> </platform> </plugin>

    gradle文件源码:

    /*
     * Copyright (c) 2013-2015 by appPlant UG. All rights reserved.
     *
     * @APPPLANT_LICENSE_HEADER_START@
     *
     * This file contains Original Code and/or Modifications of Original Code
     * as defined in and that are subject to the Apache License
     * Version 2.0 (the 'License'). You may not use this file except in
     * compliance with the License. Please obtain a copy of the License at
     * http://opensource.org/licenses/Apache-2.0/ and read it before using this
     * file.
     *
     * The Original Code and all software distributed under the License are
     * distributed on an 'AS IS' basis, WITHOUT WARRANTY OF ANY KIND, EITHER
     * EXPRESS OR IMPLIED, AND APPLE HEREBY DISCLAIMS ALL SUCH WARRANTIES,
     * INCLUDING WITHOUT LIMITATION, ANY WARRANTIES OF MERCHANTABILITY,
     * FITNESS FOR A PARTICULAR PURPOSE, QUIET ENJOYMENT OR NON-INFRINGEMENT.
     * Please see the License for the specific language governing rights and
     * limitations under the License.
     *
     * @APPPLANT_LICENSE_HEADER_END@
     */
    
    
    
    //两种文件依赖库方式都加上
    repositories { jcenter() flatDir { dirs 'libs' }}repositories { mavenCentral() flatDir { dirs 'libs' }}dependencies { compile(name: 'AlivcPlayer-3.2.0', ext: 'aar') compile(name: 'live-pusher-3.2.0', ext: 'aar')}



    展开全文
  • WeX5

    2016-07-26 08:56:42
    WeX5是绿色免安装的,下载好工具后,解压即可直接使用。 请一定要注意:不能解压到含中文、空格和特殊字符的目录下,例如:Program Files,是不可以的,因为包含空格。 安装后根目录下有以下几个批处理: ...

    1 安装及启动


    WeX5是绿色免安装的,下载好工具后,解压即可直接使用。

    请一定要注意:不能解压到含中文、空格和特殊字符的目录下,例如:Program   Files,是不可以的,因为包含空格。


    安装后根目录下有以下几个批处理:

    • 启动Chrome浏览器.bat

      平台版本内置Chrome浏览器,且已经将开发过程中经常用的调试访问链接进行收藏,便于开发者直接使用。

    • 启动MySQL数据库.bat

      平台版本内置MySQL数据库,版本是5.6.26,默认端口号3306。如果你本机有安装MySQL,需要修改MySQL数据库的端口,否则就会冲突。

    • 启动MySQL管理工具.bat

      启动版本中MySQL的管理工具。

    • 启动WeX5开发工具.bat

      运行进入开发环境。

    • 启动WeX5运行平台(调试模式).bat

      以调试模式启动X5自带的Tomcat服务,适用与开发阶段。

    • 启动WeX5运行平台.bat

      启动X5自带的Tomcat服务(结束服务按Ctrl+C键)。

    2 案例运行

    开发工具中,已经带了几个学习案例,包括:综合演示案例、外卖案例、记账本、仿途牛案例、仿淘宝案例、仿网易案例等,可以直接运行体验运行效果。

    其中外卖和记账本两个案例,需要使用到MySQL数据库,因此如果访问这两个案例需要启动数据库。

    2.1  启动服务

    1)   运行“启动MySQL数据库.bat”,注意一定保证运行时的黑色窗口保持开启状态,如果自动关闭,说明数据库启动有问题。

    2)   运行“启动WeX5运行平台.bat”(保持窗口打开,不能关闭)。

    2.2  PC浏览器运行运行“启动Chrome浏览器.bat”

    显示页面后,按F12键,找到手机图标,点击之后,再次刷新,即可显示浏览器模拟手机访问的效果。

    2.3  手机浏览器运行

    你可以直接使用手机或者平板浏览器访问以上案例,只需将手机或平板跟你电脑在同一个网络上,直接浏览器输入以上地址,其中的localhost替换为局域网的IP地址即可。

    2.4  手机APP运行

    如果你希望体验一下手机App运行效果,需要进入Studio开发工具进行打包,详细步骤参见:http://doc.wex5.com/wex5-app-pack/,也可以直接在官网在线体验扫描二维码直接下载App进行体验。

    2.5  微信运行

    请在微信中关注起步官方微信,即可体验微信内案例运行效果。通讯录,添加朋友,查找“起步软件”即可关注。

    3 目录说明
    • apache-tomcat

      Tomcat服务目录。

    • java

      Java运行环境。

    • model

      模型资源,开发出来的资源将存放在这里。

    • node

      node js执行程序。

    • mysql

      MySQL数据库,运行“启动MySQL数据库.bat”启动MySQL数据库,“启动MySQL管理工具.bat”对MySQL进行配置管理。

    • runtime

      WeX5运行时核心服务,包括UI服务和Baas服务。

    • studio

      WeX5建模开发工具,由"启动WeX5开发工具.bat"启动。

    • tools

      adt-sdk: android sdk;

      apache-ant: ant命令行工具;

      compile\compileUI.bat: 编译model目录下的UI2资源;

      compile\compileBaas.bat: 编译model目录下的Baas资源;

      compile\compileBaasDebug.bat:用于开发调试下编译model目录下的Baas资源;

      chromium:默认studio中.w文件运行的chrome浏览器;

      cordova: cordova命令行工具;

      dist\dist.bat: 资源合并工具;

      dist\less.bat: css生成工具。

    4 资源获取

    API手册:Studio工具,菜单栏“WeX5文档”——API手册;

    文档中心:http://www.wex5.com/doc/

    视频教程:http://www.wex5.com/downloads/

    资源下载:http://www.wex5.com/zh-download-page/

    开发社区:http://bbs.wex5.com/forum.php

    在线体验:http://www.wex5.com/appstore/

    加入QQ群:http://www.wex5.com/qqgroup/   WeX5/BeX5官方技术4群:189469727。

    5 入门学习5.1  初识WeX5

    1  demo使用说明  (课程时长21分钟)

    本视频介绍WeX5的四个demo案例:综合演示、外卖、仿途牛、WeX5论坛的运行和APP体验方法,使您初

    步了解WeX5的能力。

    2  我的第一个应用  (课程时长8分钟)

    本视频通过一个简单的hello案例介绍,使您了解如何使用WeX5开发一个手机应用的过程,进一步了解WeX5的具体开发过程。

    3  APP完整开发过程  (课程时长60分钟)

    本视频完整介绍使用WeX5开发APP应用的过程,使您对WeX5的开发工具使用、开发原理有一个全面的认识。

    4  WeX5开发工具入门  (课程时长44分钟)

    本视频详细介绍WeX5开发工具,了解开发工具的具体使用和操作技巧,使您轻松开启WeX5开发之旅。

    5.2  认识WeX5组件

    组件使用基础:

    WeX5的界面是由组件构成的,组件是一个可以以图形化方式显示在屏幕上,并能与用户进行交互的对象。组件是对数据和方法的封装,有自己的属性、事件和方法等。组件使用基础将从组件的创建、属性、方法、操作、事件、样式、API、调试等方面详细介绍组件的使用。

    常用组件:
    5.3  学习外卖开发案例

    这里将学习使用WeX5开发一个外卖订餐的App应用。这个外卖案例具有:菜单选择加入购物车;购物车下单;历史订单查看;用户信息管理等功能。

    该教程将手把手教您WeX5开发外卖案例的全过程,包括开发APP前端页面、后端服务调用、手机定位和手机支付(微信支付、支付宝支付)、打包部署以及微信公众号开发等。通过逐行代码的讲解方式,您将通过这个案例的学习,进一步掌握WeX5开发的方法和技巧。(课程时长3小时)

    5.4  进阶WeX5代码基础和调试

    这里将介绍WeX5初级开发的代码基础,包括JS引用、引用CSS和text等,以及如何进行代码调试,为您进一步玩转WeX5打下坚实的基础!

    6 常见问题

    在您使用WeX5开发工具时,您可能会遇到一些问题。例如:解压中文乱码、批处理闪退、数据库问题、打包问题等。请点击这里

























    展开全文
  • H5 App开发工具 WeX5

    2016-05-04 11:49:25
    WeX5是H5 App开发工具,Apache开源,免费开放所有代码,所开发的应用均能“一秒打开”!对跨平台多前端应用开发的支持极好,一次开发,多平台运行。 WeX5采用混合应用(hybrid app)开发模式, UI体系完全基于w3c的...
    WeX5是H5 App开发工具,Apache开源,免费开放所有代码,所开发的应用均能“一秒打开”!对跨平台多前端应用开发的支持极好,一次开发,多平台运行
    

    WeX5采用混合应用(hybrid app)开发模式, UI体系完全基于w3c的html5+css3+js;引入jquery和bootstrap并对移动做了极致优化,效率极高。WeX5本机API Framework采用phonegap(cordova)框架。

    • 定位:开发面向消费者和公众的开放应用系统
    • 适用:一般app、电商app、客服app、会员app、微店微商等
    • 前端:安卓app/苹果app/微信服务号/PC web app/百度直达号轻应用
    • 后端:后端数据处理组件,对接各主流技术平台
    • 费用:完全开源,彻底免费,无任何限制


           




    WeX5仿淘宝在线体验:http://wex5.com/portfolio-items/wex5-taobao/

    WeX5仿网易在线体验:http://wex5.com/portfolio-items/wex5-wangyi/

    WeX5记账本在线体验:http://wex5.com/portfolio-items/account/

    WeX5仿途牛在线体验:http://wex5.com/portfolio-items/wex5-tuniu/

    WeX5外卖在线体验:http://wex5.com/portfolio-items/demo-takeout/

    WeX5综合示例体验:http://wex5.com/portfolio-items/demo-wex5portal/

    扫描二维码:关注微信、体验Android App、体验ios App

    3.3版本仿淘宝开发视频 http://my.oschina.net/ecoolper/blog/603512
    3.3版本后端服务教程 http://my.oschina.net/ecoolper/blog/603600
    3.3版本记账本教程 http://my.oschina.net/ecoolper/blog/603876

    3.3版本外卖教程 http://my.oschina.net/ecoolper/blog/603879


     WeX5开发的小伙伴们,文档中心新增一批猛料,赶快过来围观~
    ======================================= 
    H5 App微信支付起手式 http://doc.wex5.com/pay-h5app-weixin/
    WeX5微信公众号支付开发 http://doc.wex5.com/pay-mp-step-by-step/
    H5App银联支付开发 http://doc.wex5.com/pay-unionpay/
    H5App支付宝开发详解 http://doc.wex5.com/pay-alipay-step-by-step/
     
    JS-API使用说明 http://doc.wex5.com/how-to-use-js-api/
    this问题 http://doc.wex5.com/what-is-this/
    日期时间的赋值及计算 http://doc.wex5.com/datetime/
     
    grid中显示blobImage上传的图片 http://doc.wex5.com/grid-blobimage/
    grid中显示attachmentImage上传的图片 http://doc.wex5.com/grid-attachmentimage/
    做一个简单的门户(shellImpl) http://doc.wex5.com/shellimpl/
    微信、微博、QQ分享开发教程 http://doc.wex5.com/wechat-weibo-qq-share/
     
    cordova插件开发Android篇(初级入门) http://doc.wex5.com/cordova-plugin-voicemanager-android/
    cordova插件开发iOS篇(初级入门) http://doc.wex5.com/cordova-plugin-ios-primary/
     

    利用WeX5-runtime-Java进行运行环境部署 http://doc.wex5.com/wex5-runtime-java/
    利用WeX5-runtime-php进行运行环境部署  http://doc.wex5.com/wex5-runtime-php/
    利用WeX5-runtime-net进行运行环境部署 http://doc.wex5.com/wex5-runtime-net/ 


    WeX5初级教材、练习素材、配套视频和配套版本已经入住腾讯课堂,欢迎初学者下载和学习!
    腾讯课堂链接:https://ke.qq.com/course/123488#term_id=100136170

    展开全文
  • WeX5开发指南

    2019-07-17 20:01:50
    1.1 运行WeX5demo(视频) 1.2 App开发、调试、打包部署完整过程(视频) 1.3 创建第一个应用(视频) (文字) 1.4 开发环境IDE的使用(视频) 1.5 轻松看透WeX5产品能力和技术! 1.6 WeX5技术理念 1.7 WeX5可以...
  • 本文转载自:http://www.oschina.net/news/78056/wex5-3-6WeX5 V3.6 正式版核心特性:一、打包特性增强:1- 提供多WebView选择,引入腾讯X5引擎,可自动适配移动设备环境进行切换,使通过X5打包生成的App具备更高的...
  • 上一篇写过流媒体视频对接方式...说明:Eclipse用来运行海康视频监控的Demo并进行简化;Wex5开发工具用来打包项目生成APK;Android Stdio用来运行生成的编译项目,调试封装的插件。 二.简化Android源码 为了便于...
  •  本文就介绍使用WeX5,来打包app应用(内测方案)。   一、准备工作  需要有MAC OS操作系统环境,本文使用VMWare虚拟一个MAC OS  参考:http://wex5.com/cn/setup-wex5-app-packing-server/  ...
  • documenthandler插件使用方法 目录 1、概述2、JS调用方法3、注意事项 ...支持Android系统和IOS系统。支持打开的文件类型并不限于常见的...例如在Android系统打开一个apk的链接,会下载该apk并跳转到app安装界面
  • 框架列表。 ... 前言 近期,要开一个新的项目,APP类型。最重要的需求就是能够随时调整APP的绝大部分内容,所以,打算使用webapp的方式开发。...看了uni-app,wex5,AppCan,Apicloud,下面就对边看下这几个项目的...
  • H5真的很强悍?

    2020-05-11 15:13:06
    这是一个H5App,仿淘宝客户端,任何型号、任何操作系统的移动终端均可直接点击运行:http://demo.wex5.com/taobao/(基于WeX5开源框架开发的,很容易,全套源码均可在去WeX5官网下载)。在微信里也直接运行即可。 ...
  • 文章目录概述需求目的考虑因素项目因素团队因素技术因素技术选型候选技术初步筛选详细对比多端支持流行活跃度开发工具组件库/工具库/Demo实践反馈支持宝小程序百度小程序结果评审做出决定参考文章 概述 本文是记录...
  • 最近接触WeX5这个HTML5的开发框架,它是由北京的一个公司开发的,用起来还算是比较方便,尤其是一次编译就可以在Android和IOS端的运行确实给他增加了不少的色彩。 由于公司需要实现一个扫描PDF417码的二维码扫描...
1 2 3 4 5 6
收藏数 118
精华内容 47
热门标签