## 创建我的第一个应用 #### 创建我的第一个应用 视频地址：[http://pan.baidu.com/s/1c0u8hJ6](http://pan.baidu.com/s/1c0u8hJ6) ## 本文通过一个简单的hello案例介绍使用WeX5开发一个手机应用的过程 #### 第一步，环境准备 #### 第二步，应用开发 #### 第三步，调试运行，本地打包 ## 介绍模拟器、谷歌浏览器、手机真机三种调试方法 #### 第四步，打包发布，部署运行 ## 打App正式发布的包发布，这个过程需要使用到打包服务器，随后有一篇文档专门讲解。 * * * #### 第一步，环境准备 ## 1\. 进入官网[下载中心](http://wex5.com/downloads.html "下载中心")，下载WeX5应用快速开发框架。 2\. 下载后直接解压，主要解压后文件夹不能带有中文目录。 #### 第二步，应用开发 ## 1\. 首先打开WeX5的开发环境，运行解压后文件夹根下的“启动WeX5开发工具”或者，直接运行“studio\studio.exe”启动开发工具。 2\. 进入工具后，可以看到两个目录，UI2和Native，在UI2上点击右键，“新建——应用”，应用名称填写“hello”，此时，在UI2下就会自动生成一个“hello”的目录。 3\. 在hello目录上点击右键，选择“新建——.w文件”，此时可以通过向导的模式新建自己的页面，选择“标准——空白”，在文件名的地方填写“index”，这里的文件名不限于这个，可以随意起，然后点击完成。系统生成了两个文件,index.w和index.js，并且使用UI设计器打开的index.w。 [](http://wex5.com/cn/wp-content/uploads/2015/03/01-2.jpg) 4\. 接下来进行页面布局，往这个空白页面上放一个input、一个output和一个按钮，最终达到的效果是，在input中输入一个内容，然后点击按钮，让相关内容显示到output中。 5\. 界面布局：第一行显示一个input和一个按钮，所以我们先放入一个行组件，放入行组件是因为该组件提供了多列的特性，默认是3列，删除其中一列，接下来在第一列放入input组件，第二列放button组件，button组件固定宽度，剩下的宽度由input充满。在行组件的列上进行设置，选中行组件的第二列，class，选择固定，width，设置为auto。 第二行直接放上output组件。 [](http://wex5.com/cn/wp-content/uploads/2015/03/02-2.jpg) 6\. 写按钮的单击事件，思路是，首先获得input组件的对象，然后获得该组件的值，然后再获得output组件js对象，使用set方法将值赋给output组件。 选中按钮，点击“事件”onclick双击，此时界面切换到了js页面，这个js就是index.js，点击设计就可切换回原来的界面。 注意：代码中根据组件的的xid来获取组件的js对象。 [+ expand source](http://wex5.com/cn/?p=3321#) #### 第三步，调试运行 ## 1、 模拟器运行调试 使用模拟器前，必须启动tomcat，启动时有红色和黑色字是正常的，但出现蓝色字就是发生错误，要根据错误具体进行排查。 在需要运行的.w文件上点右键，然后点击“模拟运行”，就出现下图所示模拟运行的效果，此时，在input窗中输入“小伙伴”，点击按钮，下面的ouput窗就会显示“hello：小伙伴”。 [](https://box.kancloud.cn/2015-09-22_560154c4ce447.png) 如何调试？ 在代码中加上debugger，切换到模拟器中，右键点击刷新，然后再右键点击“Show DevTools”，即进入调试模式，然后可进行单步调试也可直接运行。 [](https://box.kancloud.cn/2015-09-22_560154c534afe.png) [](https://box.kancloud.cn/2015-09-22_560154cb12f11.png) 2、 谷歌Chorme浏览器调试（Chrome的版本需32及以上） 打开chrome浏览器，F12进入调试模式，点击手机模式后选择手机设备； 在浏览器地址栏输入：http://127.0.0.1:8080/x5，回车后即出现开发的界面； 在Input中输入“小伙伴”，点击按钮； 代码运行至debugger处停止； 然后可以进行单步调试，也可直接运行。 [](https://box.kancloud.cn/2015-09-22_560154cb7475a.png) 3、 真机调试 使用真机调试需要打包一个App，使用手机下载安装，将手机连接到计算机方后可进行调试。以下以安卓为例介绍一下这个过程： 1）生成本地App：Native目录上右键，新建创建本地APP，资源不要选，只填写服务器地址和首页，此时系统访问时取的是服务器上最新的资源，这样修改后可直接体现修改效果。 服务地址：http://IP:端口（端口默认8080） 首页：/x5/UI2/hello/index.w 下面的资源都不要选。 2）填写应用名：hello，下一步。 3）填写版本号，注意，一定要是三段的，例如1.0.0； 4）填写应用包名：com.justep.x5.hello，该包名不能跟自己开发的其他应用相同，是应用的唯一ID。 5）选择“增强型浏览器”（尤其是安卓4.4以下一定要选择），下一步，再下一步。 6）选择“完成后启动App生成向导”，点击“完成”。 7）下一步，选择安卓；不选择为“本地快捷打包”如果使用未越狱的苹果手机调试，要使用服务器打包才可以。 8）完成。经过几分钟，就完成打包。 9）使用安卓手机扫描二维码，下载安装后使用数据线连接到计算机上。 10）详细调试可参看[《WeX5本地App（Android和iOS）使用电脑（PC）调试》](http://wex5.com/cn/wex5%E6%9C%AC%E5%9C%B0app%EF%BC%88android%E5%92%8Cios%EF%BC%89%E4%BD%BF%E7%94%A8%E7%94%B5%E8%84%91%EF%BC%88pc%EF%BC%89%E8%B0%83%E8%AF%95/ "WeX5本地App（Android和IOS）使用电脑（PC）调试") #### 第四步，部署运行 ## 这里所说的部署运行，是将自己开发的App发布到苹果AppStore中或者发布正式安卓App包。由于最终正式发布使用的包需要使用到打包服务器，所以会另外附一篇文章讲解。 * * * 最后，如果大家关心使用WeX5开发出来的效果，可以先进行[在线体验](http://wex5.com/cn/appstore/ "应用展厅")，或者扫描二维码下载到手机中体验。 [](https://box.kancloud.cn/2015-09-22_560154cc7ce06.jpg) [](http://wex5.com/cn/my-first-app/x5-xz_2-11-0/) [](http://wex5.com/cn/my-first-app/x5-xz_5-11-0/) [](http://wex5.com/cn/my-first-app/x5-xz_3-11-0/)