WeX5 开发过程

H5 App开发分为三个方面：前端页面开发、后端服务开发和App开发。开发过程如下：

1、前端页面开发

       前端页面开发定义App的前端展现，可以使用WeX5开发工具，进行可视化、拖拽式开发。具体过程如下：

（1）新建应用

每次开发一个新的应用，都需要从新建应用开始。

新建应用的步骤是：选择“模型资源”视图中的UI2目录，右击，在弹出的快捷菜单中选择“新建”→“应用”命令，打开“新建应用”对话框，如图1-14所示，输入应用名称。单击“完成”按钮，在UI2目录下就会生成一个应用目录。

图1-14 新建应用

（2）新建页面

新建W文件就是新建前端页面，通过UI设计器、JS编辑器、CSS编辑器完成界面的布局、样式设置以及逻辑处理。

新建页面的步骤是：选择应用目录或下级目录，右击，在弹出的快捷菜单中选择“新建”→“W文件”命令，打开“新建W向导”对话框，如图1-15所示。选择一个“模板”并输入文件名。单击“完成”按钮，系统自动生成W和JS两个文件，并且使用UI设计器打开新生成的W文件。

图1-15 新建页面

W文件的根组件是window组件，window组件下有一个model组件。组件分为数据组件和展现组件，所有的展现组件都可以放到window组件下，所有的数据组件都必须放到model组件下。新建W文件后，通过摆放组件，设置组件的属性，在组件的事件中调用组件的方法，完成页面的开发。

摆放组件有两种方法：一是单击“组件面板”中的组件，松开鼠标左键，然后再单击组件要放置的位置。注意不需要进行拖拽操作；二是先单击组件要放置的位置，即选择组件的父组件，再在“组件面板”中双击要添加的组件，组件就会被添加到父组件中。如果要改变组件的位置，可以通过鼠标拖拽组件实现。

摆放组件之后，就可以设置组件的属性和添加组件的事件。设置组件属性的方式是在UI设计器中，选择某个组件，即可在“属性编辑器”中编辑该组件的属性；添加组件事件的方式是在“事件编辑器”中增加该组件的事件，在组件的事件中调用组件的方法。

（3）页面运行调试

W文件作为前端页面是可以在浏览器里面运行的，开发时可随时查看运行效果，并且编辑保存后，浏览器会自动刷新页面。开发工具为运行W文件提供了快捷方式，选择要运行的W文件，右击，在弹出的快捷菜单中选择“用浏览器运行”命令，即可打开“Chrome浏览器”，并运行选择的W文件，如图1-16所示。

运行前，需要启动Tomcat，如果访问了数据库，还需要启动数据库。

图1-16 页面运行调试

2、后端服务开发

    后端服务为前端页面提供数据。前端页面需要数据时，向后端服务发送请求，后端服务访问数据库表，将查询结果返回前端页面；用户输入数据后，前端页面提交数据给后端服务，后端服务将数据存入数据库。图1-17展示了记账本App的后端服务。

       后端服务可以使用WeX5中的Baas来实现，WeX5的Bass支持多种语言，例如：Java、.NET、PHP。后端服务不仅可以使用Bass来实现，也可以直接使用云API来替代，或者自定义服务端。

图1-17 记账本App的后端服务

3、App开发

       前端页面和后端服务开发好后，可以用WeX5打包生成App（支持iOS和安卓）。App开发过程如下：

（1）新建本地App

       新建本地App时，主要设置App以下的信息：

l        应用模式（见图1-18）：支持四种模式，其中模式3常用于开发调试阶段，当修改W文件后，手机界面将会同步刷新。

l        服务端信息：Web服务地址和Web路径；

l        前端页面信息：首页地址和前端界面资源；

l        应用基本信息：应用名、版本、应用包名、应用描述、资源加密等等；

l        开发者信息和证书：省、市、公司、开发者、和证书等等

l        屏幕选项：应用图标、纵向欢迎图片和横向欢迎图片；

l        本地插件：设置App需要使用的本地插件（一般根据页面资源自动选择插件即可）以及配置插件的参数；

l        更新信息：设置UI资源版本号、UI资源及App安装包下载地址和更新说明。

图1-18 新建本地App

（2）生成本地App包

       新建本地App之后，可以将本地App打包生成App包。生成本地App包时，需要设置以下信息（见图1-19）：

l        选择应用平台：支持Android和iOS；

l        是否包含UI资源：建议选中本选项，有利于提升App运行速度；

l        是否重新编译UI资源：如果之前已经编译过UI资源，且UI资源没有变化，可以不选中本选项；

l        是否发布模式：如果是最终对外发布，必须选中本选项。

       App生成后，将会在本地App工程的dist目录下生成APK或IPA文件。

图1-19 生成本地App包

（3）安装调试App

生成App时同时生成App的二维码。安卓手机如果和计算机处于同一局域网时，可以通过扫描二维码安装App。注意：不可使用微信扫一扫扫描二维码，要使用浏览器的扫一扫，推荐使用UC浏览器的扫一扫。用UC浏览器扫描二维码，下载后安装。也可以采用复制APK到安卓手机的方式，在手机上安装。

如果是苹果手机，使用iTunes或Xcode，通过添加应用，选择IPA文件安装到手机上。如果是企业证书，可以安装；如果是开发证书，需要安装的设备ID在证书里有记录，一个证书可以有100个设备进行安装调试。

也可以使用安卓模拟器代替安卓手机运行App。推荐使用夜神模拟器，在计算机上启动模拟器，将APK拖拽到模拟器里，直接进行安装。

在手机上安装后的运行效果如图1-20所示。

图1-20  安装调试App