创建我的第一个应用 视频地址:http://pan.baidu.com/s/1i3FBKUx

本文通过一个简单的hello案例介绍使用WeX5开发一个手机应用的过程

第一步,环境准备

第二步,应用开发

第三步,调试运行,本地打包

介绍谷歌浏览器调试、真机调试,其中真机调试可使用模拟器和手机两种方法。

第四步,打包发布,部署运行

详见《WeX5平台生成App包过程详解》


 

第一步,环境准备

1. 进入官网下载中心,下载WeX5应用快速开发框架。
2. 下载后直接解压,注意解压后文件夹不能带有中文。

第二步,应用开发

1. 首先打开WeX5的开发环境,运行解压后文件夹根下的“启动WeX5开发工具”或者,直接运行“studio\studio.exe”启动开发工具。
2. 进入工具后,可以看到左侧模型资源有两个目录,UI2和Native。UI2是我们开发的功能页面,我们打的APP包都在Native目录下。在UI2上点击右键,“新建——应用”,应用名称填写“hello”,此时,在UI2下就会自动生成一个“hello”的目录。
3. 在hello目录上点击右键,选择“新建——W文件”,此时可以通过向导的模式新建自己的页面,选择“移动——标准——空白”,在文件名的地方填写“index”,这里的文件名不限于这个,可以随意起,然后点击完成。系统生成了两个文件,index.w和index.js,并且自动使用UI设计器打开的index.w。
1.firstapp-neww

4. 接下来进行页面布局,往这个空白页面上放一个input和一个output,最终达到的效果是,在input中输入一个内容,output中自动显示相关内容。
5. 界面布局:第一行显示一个input,第二行直接放上output组件。放组件的时候,用鼠标点击右侧组件,松开鼠标,然后再用鼠标点击组件要放置的位置即可。不需要进行拖拽操作。

 

6. 我们要做的是获取input组件的值写入到output组件中,WeX5使用了ko,我们通过ko的监控对象可快速完成。

首先,在设计器中切换到js页中,创建一个监控对象,this.name = justep.Bind.observable(“”)。这里的this是js的实例,增加了一个对象name是一个监控对象。

然后,切换到设计页,在input中属性中设置bind-value为name,这样就把用户的值存给监控变量,属性里有很多bind,由ko负责把相应内容写入属性里,实现html标签拥有动态的属性。

最后,output要把name的值显示出来,这时在output组件的bind-text属性上进行设置’hello:’+name.get()。name是个对象,值要用get方法获取。

2.firstapp-code

7.运行。启动tomcat,UI2\hello\index.w上右键,用浏览器运行,此时input输入“小伙伴”,焦点移出,下面的ouput窗就会显示“hello:小伙伴”。
目前版本具有自动刷新能力,修改完,保存后,浏览器不需要进行刷新就会自动进行更新。
3.firstapp-run

第三步,调试运行

一般情况下,都可以直接使用谷歌的Chrome浏览器进行调试。如果需要真机调试,例如,调试cordorva插件,调试某种特定手机等,也提供真机调试的方法。

1、谷歌Chorme浏览器调试(Chrome的版本需32及以上)

谷歌浏览器可以进行运行及调试,可调试样式,js代码,查看请求,控制台信息,通过谷歌浏览器 的四页:elements,鼠标移动左边就会显示对应的组件;source调试js代码;network,查看请求;console,控制台信息。

打开chrome浏览器,F12进入调试模式,点击手机模式后选择手机设备;

在浏览器地址栏输入:http://127.0.0.1:8080/x5,回车后即出现开发的界面;
在Input中输入“小伙伴”,点击按钮;
代码运行至debugger处停止;
然后可以进行单步调试,也可直接运行。

07-2

 

2、真机调试

真机调试可以通过模拟器的方式,推荐大家使用“夜神”,大家可以下载安装。也可以通过直接连接手机的方式。这两种调试方式均通过谷歌浏览器完成,WeX5版本中自带了谷歌浏览器,不需进行翻墙即可完成真机调试。这种方式只能调试安卓的版本,如果要对苹果进行真机调试,就需要使用MAC版的Safri浏览器完成。本文以大家经常使用的谷歌浏览器调试安卓为例讲解。

真机调试首先需要打包一个APP,然后才能调试,具体分为以下三步完成:

一、创建本地APP;

二、生成APP包;

三、安装调试。

以下详细讲解这三个步骤:

一、创建本地APP

1)生成本地App:Native目录上右键,新建创建本地APP,选择模式3。

2)设置服务器地址和选择UI资源:

填写应用名:hello,这里可以是中文的,是显示在应用图标下的应用名。

UIServer服务地址:http://IP:端口(端口默认8080)
首页:/x5/UI2/hello/index.w,下面的hello\index.w,即可自动填上
下面的资源都不要选,此时系统访问到的是服务器上的资源,调试过程中,修改资源不需反复打包,可直接体现修改效果。

3)配置应用信息

  • 版本号:注意,一定要是三段的,例如1.0.0;
  • 应用包名:com.justep.x5.hello,该包名不能跟自己开发的其他应用相同,是应用的唯一ID。

如果是iOS,需要先获取开发或发布的证书,证书必须和证书中的BundleID一致。iOS的包,需要通过打包服务器。

如果使用微信插件,需要与微信账号的应用包名一致。

  • 选择“增强型浏览器”(尤其是安卓4.4以下一定要选择),下一步

4)配置开发信息和证书

填写相应信息,输入安卓证书密码,这些信息会生成安卓的证书,也会写到APP中来,只生成安卓,勾掉iOS证书。

5)应用图标和欢迎图片。

6)打包的本地插件,例如,微信、输入相应参数等,本案例做的没有使用到不需要选择。

7)查看本地应用信息信息,如果都正确,点击“完成”,否则可以返回进行修改。

至此创建本地APP就完成了,完成后在Native目录下生成了以应用名为目录名的目录,这里是“hello”。

第二步 生成APP包

1)在目录上点右键,“生成本地APP包”。

2)下一步,选择安卓。如果要在windows环境生成iOS的包,需要使用服务器打包,或者直接使用MAC版的WeX5,内置的打包服务器可以打安卓和iOS包。

3)完成。经过几分钟,就完成打包。

第三步,安装调试

1)如果要使用安卓手机进行调试,直接扫描二维码,下载安装后使用数据线连接到计算机上。

如果是苹果的包,在苹果手机使用UC浏览器扫描二维码,同步推进行安装;也可以使用iTunes安装

如果是企业证书,可以安装

如果是开发证书,需要安装的设备ID在证书里有记录,一个证书可以有100个设备进行安装调试。

2)如果使用模拟器,将Native\hello\dist目录下的hello.apk拖拽到模拟器里,直接进行安装,然后打开后就能看到已经开发好的应用。

3)打开版本中,“启动Chrome浏览器.bat”,启动谷歌浏览器,点击“Android真机调试”。

4)打开后,会识别出来模拟器,如果连接了手机,也会识别出来,此时点击inspect。

5)在代码中加入断点,就可以进行代码调试了。

 

详细调试可参看《WeX5本地App(Android和iOS)使用电脑(PC)调试》

第四步,部署运行

这里所说的部署运行,是将自己开发的App发布到苹果AppStore中或者发布正式安卓App包。

详见《WeX5平台生成App包过程详解》


最后,如果大家关心使用WeX5开发出来的效果,可以先进行在线体验,或者扫描二维码下载到手机中体验。

4.firstapp-demo-1

本文由WeX5君整理,WeX5一款开源免费的html5开发工具H5 App开发就用WeX5!

阅读其他app 开发相关文章:http://doc.wex5.com/?p=3443