模式1：本地应用包含UI资源 WeX5开发的UI资源放入到本地App，需要通过ajax访问公有云或者私有云API。生成App后安装即可使用，当然连接的公有云后者私有云服务需要能正常访问。 此模式从V3.4正式版本开始，支持UI资源的自动更新和App版本更新。 模式2：UI资源放置到Web服务器 WeX5开发的UI资源放入Web服务器上，可以方便的已有的Web服务集合，不管是PHP、ASP .Net，还是NodeJS等。此种模式编译好的UI资源需要部署到Web服务器上，资源在应用的www目录下。具体部署参考[引用：未完成，需介绍httpd，iis和tomat] 本模式支持UI资源的更新，如果资源变更了，编译UI资源后，把www的资源更新到Web服务即可。 生成App时有一个“本地应用包含UI资源”的选项，如果选择了，则第一次启动不必在下载UI资源。模式1可看成是模式2的一种特例。 模式3：UI资源通过UIServer访问 本模式使用UIServer服务器，是BeX5模式的推荐使用，另外在WeX5调试App时也推荐使用此模式。本模式下，生成好App后，如果tomcat启动即可正常使用。 本模式支持UI资源的更新，如果资源变更了，对于生成模式（独立启动的Tomcat），修改资源版本号即可，而对于调试模式（studio里面启动tomcat），每次访问版本都不同，不需要做特别处理。具体原理参考：UIServer缓存机制 本模式和模式2一样，在生成App时可选“本地应用包含UI资源”，这样可以在第一次打开时不用去下载UI资源。注意：对于调试模式，此选项除了增大App体积外，无实际左右，因为资源版本号每次都变化，每次访问都会新下载。 模式4：打开一个非WeX5开发的网站 本模式适合包装现有的一个网站，做成一个本地App。由于没有使用WeX5提供的UI资源，本模式不支持UI资源更新，同样也不支持App版本更新（可参考WeX5机制自行扩展） 本模式如果想使用本地插件，那需要在选择插件的页面显示的选择插件，并在自己的主页中引用 /corodva.js，cordova.js在生成App时已经包含进去，通过 /corodva.js 的方式就能引用到。 本文由WeX5君整理，WeX5一款开源免费的html5开发工具，H5 App开发就用WeX5! 阅读其他app 开发相关文章：http://doc.wex5.com/?p=3443

页面url概述 WeX5/BeX5系统中，UIServer是提供界面展现的服务，一个页面一般对应的是.w文件。一个完整的页面url如“http://x5.justep.com:8080/x5/UI2/takeout/index.w”，其中x5是UIServer的web应用名（在tomcat的server.xml查看，可以根据需要自行修改名字），8080是tomcat的http服务端口号，UI2/takeout/index.w 则为model下面.w资源的路径。 注意：BeX5中的功能是需要授权的，通过上面那样直接输入.w地址不能正常运行（使用到bizData组件的页面不能运行），需要登录通过门户打开，原理上是登录后生成了一个bseesionID，这个做为认证依据，通过cookie和url参数传递给UIServer用于授权相关的认证。 .cache机制 虽然url中显示的是xxx.w，但请求服务器时，服务器并不是直接访问.w，而访问的是.w同级对应的.cache。 .release机制 每个.w对应一个.release，.release是一种中间格式，它的推出主要是为了应用厂商保护自己的源代码。当把一个应用发布给客户的时候，可以仅提供.release，而不用提供.w。.w和.release的使用原则是，如果有.w，则.w有效，否则使用.release。 注意：.release等价于.w，和下面介绍的资源版本号无关 浏览器缓存原理 浏览器在访问网页时，是基于url进行缓存（缓存是指静态资源，例如js、css、png等，.w平台做了特殊处理，也会缓存，这个将极大减少网络流量），如果url相同，那下次访问时直接会从本地缓存中读取。对于js、css和png等静态资源，正常使用不可避免需要有替换的情况，但如果仅仅替换，那浏览器访问是不会自动更新文件，除非自己手工清除浏览器缓存或者把浏览器设置为不缓存模式。为了解决资源更新问题，WeX5/BeX5引入了资源版本机制。 资源版本机制 如果通过网络跟踪工具查看，如果访问“http://x5.justep.com:8080/x5/UI2/takeout/index.w”，实际的url将会是 “http://x5.justep.com:8080/x5 /UI2/$v3747_no_$lzh_CN$s$dm/takeout/index.w”。$v3747_no_$lzh_CN$s$d这段就是平台基于版本维护机制自动加的路径。其中$v3747_no_ 是版本号，由系统版本和应用版本构成，具体看下面部分的资源版本号设置；$s是指皮肤，当前没有设置，所以为空；$d用来标识设备，如果是m表示移动设备，pc表示桌面电脑 资源版本号设置 1. %JUSTEP_HOME%\conf\server.xml中的version，每次WeX5/Bex5版本发布会递增，用于维护平台自身的资源版本 2. 自己应用目录下 config\application.xml中的version，应用资源改变了，需要维护这个版本 优先原则：如果应用中没有application.xml文件，将使用justep.xml中的设置。对于WeX5而言，简单起见，可以不用application.xml，直接修改%JUSTEP_HOME%\conf\server.xml，这样所有的缓存都会在页面再次访问时重新生成。 注意：修改%JUSTEP_HOME%\conf\server.xml需要重新启动tomcat .cache生成 1.  studio启动tomcat的化，资源版本号会默认为一个guid，并且每次访问.w，.release和.cache都会重新生成，可以理解为.cache失效，也就是没有缓存机制，因为浏览器每次都会下载资源 2.  在外面启动的应用服务（tomcat等），这个是生产环境实际部署的情况，当访问.w时，如果.w有对应的.cache，将直接访问.cache，否则会先生成.cache，这时读取的资源版本号会以设置的为准 项目实施 由上知道了WeX5/Bex5的缓存机制，那比较容易清楚，生产环境如果改了js、css、png和.w等资源，那需要维护资源版本并让.cache新生成，并且一定要在外面运行tomcat，否则由于缓存失效性能将大幅降低。 App本地资源打包和UIServer的关系 把资源打入到App的主要是有两个好处。一个是可以做不联网的Web应用，另外一个是不用下载资源从而提高第一次运行的速度。但如果需要资源自动更新，那就不建议直接把资源打入到App，否则需要通过本地App更新的机制来替换App。 下面举例来说明： 假设App设置的服务地址和首页指向“http://x5.justep.com:8080/x5/UI2/takeout/index.w” 方式一：没有把资源打入到App。这种模式第一次启动App的时候，会把访问到的页面缓存下来，也就是第一次会有多的请求，速度会慢些。第二次启动App，由于资源已经缓存了，那仅仅会发$.ajax这样的请求。假设takeout下的资源改了，如果没有去修改资源版本号，资源将一直不会得到更新；但如果更新了资源版本号并且重新启动tomcat，则App又会进行资源缓存，整个逻辑和浏览器相同。 方式二：假设把takeout打入进了App。第一次启动App，由于本地已经有资源（App会忽略http://x5.justep.com:8080这个服务地址，也就是不管App打包时设置为谁都忽略，先看App中有没有对应的资源，有就直接访问App的资源，否则发请求到UIServer服务段），仅仅会发$.ajax这样的请求，和方式一第一次启动App相同。假设takeout下的资源改了，并且资源版本号已经修改和重新启动了tomcat，本地App也不会进行更新，因为资源已经打入到了App，如果要更新，只能新打一个包含新资源的App进行替换 [...]

苹果App的ipa下载需要有几个前提，可参考：Android和IOS的本地App如何安装（apk&ipa） 本文主要介绍如何部署https提供ipa的下载，步骤如下： […]

Android APK Android的apk安装比较简单，首先需要到系统设置的“安全”里面把“允许安装未知来源的应用”这个选项选上。 假设Studio中Native下有一个MyApp的本地应用，在dist目录下已经生成MyApp.apk。 有几种方法安装： 在生成App后的下载页面有一个二维码，本质是一个文件的链接地址，可以使用UC这样自带扫描二维码的浏览器扫描并点击安装就可以。前提是安装设备的无线网络需要和APP所在的PC在同一个局域网内。 用数据线把手机连接到电脑，把手机设置为U盘模式，把MyApp.apk复制到手机的存储卡里面，再通过手机的文件管理工具点击MyApp.apk进行安装。 用数据线把手机连接到电脑，打开手机的调试模式，可以用XX助手这样PC辅助工具安装。 如果安装了Android的调试环境adb，用数据线把手机连接到电脑，打开手机的调试模式，通过adb install MyApp.apk 的方式进行安装，注意adb和MyApp.apk的路径（XX助手本质也是用这种方式安装）。 IOS IPA ipa的安装要复杂一点。IOS 的ipa包分为两种，开发证书打的开发测试ipa包和发布证书打的正式发布ipa包。无论是299美元的企业帐号还是99美元的个人/公司帐号都可以生成开发证书和发布证书，用于打开发测试ipa包和正式发布ipa包。（深入了解苹果证书的区别） 开发证书打的开发测试ipa包安装有以下条件： 只能安装在苹果帐号里添加过UDID的设备上。因此必须在苹果帐号里添加开发测试的设备信息，即苹果设备的UDID（开发帐号里最多可以添加100个，企业帐号里不限添加数量）。UDID是苹果设备的标识符，可以说是苹果手机的身份证号码，是唯一的。如何获取UDID     添加UDID界面如下： 在生成应用的开发证书时，把需要安装该应用ipa包的设备添加到Provisioning Profile（配置文件）里。添加应用可安装设备界面如下： 下面介绍开发证书打的开发测试ipa包的安装方法。假设Studio中Native下有一个MyApp的本地应用，在dist目录下已经生成MyApp.ipa。 有以下几种方法安装： 同Android的第一种方法类似，可以通过iOS版本的UC浏览器扫描二维码，但要注意，默认下载后是无法安装ipa的，可以安装一个叫“同步推”的工具，这样UC下载ipa后使用“同步推”打开ipa就可以安装了。 在PC上安装iTunes，并用数据线连接手机，ipa用iTunes打开，在iTunes中点击自己的手机后在“应用程序”页面会列出ipa，把ipa拖动到右边的页面，并点右下角的“同步”即可安装。 发布证书打的正式发布ipa包安装有以下条件： 如果是299美元企业帐号生成的发布证书打的正式发布ipa，用于企业内部分发，因此对安装设备没有任何限制。注意：企业发布证书是不能发布到苹果市场的。 如果是99美元个人/公司帐号生成的发布证书打的正式发布ipa，可用于上传到Appstore苹果市场进行发布。注意：Provisioning Profile（配置文件）生成时需要选择App store模式。这种模式下生成的ipak只能通过Appstore下载安装，下面介绍的安装方法不适用。 选择App store模式界面如下图： 下面介绍299美元企业帐号生成的发布证书打的正式发布ipa的安装方法。假设Studio中Native下有一个MyApp的本地应用，在dist目录下已经生成MyApp.ipa。 有以下几种方法安装： 同Android的第一种方法类似，可以通过iOS版本的UC浏览器扫描二维码，但要注意，默认下载后是无法安装ipa的，可以安装一个叫“同步推”的工具，这样UC下载ipa后使用“同步推”打开ipa就可以安装了。 [...]

一、纯本地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 也会自动更新。   本文由WeX5君整理，WeX5一款开源免费的html5开发工具，H5 App开发就用WeX5! [...]

拿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 浏览器访问 浏览器输入 http://192.168.1.1:8080/x5/UI2/takeout/index.w 这样就可以访问外卖功能，这个在电脑浏览器或者手机浏览器都可以（电脑推荐使用chrome浏览器）。 解释一下这个URL：8080后面的x5是UIServer的名字，在tomcat的server.xml中定义，具体请参考tomat的相关说明，表示访问UIServer，UI2/takeout/index.w 这个会请求到UIServer后，由UIServer做编译，生成html和js供前端使用。 本地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来获取页面，和浏览器访问完全相同 [...]

WeX5的混合模式底层基于cordova/phonegap，所以开发本地插件只需要按照相应规范就可以，由于BeX5基于WeX5，所以本文档也适用于BeX5。 一、 如何开发本地插件 请参考：Cordova插件开发 二、 哪里有免费的插件资源 cordova官方插件库：http://plugins.cordova.io/#/ github搜索：https://github.com baidu、google搜索 三、插件如何安装到WeX5 这里以常用的条形码扫描为例介绍。 1. http://plugins.cordova.io/#/package/com.phonegap.plugins.barcodescanner下载好源代码，并把插件的目录名改为和id相同，这里是com.phonegap.plugins.barcodescanner。id可以打开源代码中的plugin.xml看，根节点plugin的id属性值就是。 2. 把插件目录复制到model/Native/plugins目录下 四、如何使用安装好的插件 要想将插件打包到app我们可以有两种办法： 1.在创建/编辑app的过程中，插件选项勾选自动追加插件，但是该情况必须保证在应用编译资源过程中编译到的UI资源引用了该插件，即在.w界面对应的.js文件中“require”了插件，例如：“require("cordova!com.phonegap.plugins.barcodescanner")” 2. 在创建/编辑app过程中，直接在插件列表中找到该插件，手动勾选。 接下来就是调用插件api，在需要使用插件的页面对应的js中，如下代码引用： require("cordova!com.phonegap.plugins.barcodescanner"); 再参考插件的文档，书写对应的js。对于barcodesacnner，代码如下： cordova.plugins.barcodeScanner.scan( function (result) { alert("We got a barcode\n" + "Result: [...]

环境准备 如果要调试，可以使用快捷打包模式生成App，默认就是调试模式；使用打包服务器打包的话，一定不要勾选"发布模式"选项。android4.4以及以上版本，勾选或不勾选增强型浏览器选项都可调试，android4.4以下版本必须勾选增强型浏览器选项才可调试。 通过上面的步骤生成App并安装到手机上，接下来介绍如何使用电脑调试。 Android 可以使用Windows系统或者Mac OS X系统，这里以Windows系统为例。 1. 安装chrome32以及以上版本。3.2.1版本开始，已经自带浏览器，点批处理“启动Chrome浏览器”即可启动，或者studio中选中.w用浏览器运行会自动启动。 2.打开手机的USB调试选项，在系统设置的开发人员选项里面 。android 4.2以及以上版本如果系统设置里面没有开发人员选项，可以找到设置内关于里面的“版本号”，并连续点击N次，这样设置里会多出开发人员选项。 3. 用数据线把手机和电脑进行链接，系统会识别出手机，可以在我的电脑管理里面看看设备管理器中有没有未识别的USB设备，如果没有，那说明驱动正常，如果有感叹号，建议安装XX助手、豌豆荚之类的，会自动安装驱动。 4. 打开手机内安装好的应用，并打开需要调试页面。 5. 在启动好的chrome内输入 chrome://inspect/#devices 1)如果驱动没问题，页面中会列出手机型号和显示打开的页面，点inspect就可以打开监控页面，这样就和调试普通web页面一样调试WeX5写的页面了。如下图所示： 2)如果驱动没问题，页面不会列出手机型号和显示打开的页面，需要科学上网。如下图所示： 科学上网可选择XX-Net工具或其他。 6. 如果使用的是3.2.1并用了自带的浏览器，并且上上面页面中显示的是chrome30, chrome33, chrome36, chrome39, chrome42版本，那跳过本步骤，否则需要学习爬墙技术。由于某特色，这里需要做点技巧以保证正常访问google的服务器。可以使用hosts替换dns方法来解决，步骤为： a. 复制C:WindowsSystem32driversetc下的hosts到桌面 b. 用记事本打开hosts文件，在最后增加   [...]

图标 1. android 图标 drawable 96*96 drawable-ldpi 36*36 drawable-mdpi 48*48 drawable-hdpi 72*72 drawable-xhdpi 96*96 drawable-xxhdpi 144*144 2. ios icon-small 29*29 icon-small@2x 58*58 icon-40 40*40 icon-40@2x 80*80 icon-50 50*50 icon-50@2x 100*100 icon 57*57 icon@2x 114*114 icon-60 [...]