创建我的第一个应用-CSDN博客

本文链接：https://blog.csdn.net/qq_19396231/article/details/84740286

资料来源http://wex5.com/cn/my-first-app/

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

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

第一步，环境准备

第二步，应用开发

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

介绍模拟器、谷歌浏览器、手机真机三种调试方法

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

打App正式发布的包发布，这个过程需要使用到打包服务器，随后有一篇文档专门讲解。

第一步，环境准备

1. 进入官网下载中心，下载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。

4. 接下来进行页面布局，往这个空白页面上放一个input、一个output和一个按钮，最终达到的效果是，在input中输入一个内容，然后点击按钮，让相关内容显示到output中。
5. 界面布局：第一行显示一个input和一个按钮，所以我们先放入一个行组件，放入行组件是因为该组件提供了多列的特性，默认是3列，删除其中一列，接下来在第一列放入input组件，第二列放button组件，button组件固定宽度，剩下的宽度由input充满。在行组件的列上进行设置，选中行组件的第二列，class，选择固定，width，设置为auto。
第二行直接放上output组件。

6. 写按钮的单击事件，思路是，首先获得input组件的对象，然后获得该组件的值，然后再获得output组件js对象，使用set方法将值赋给output组件。
选中按钮，点击“事件”onclick双击，此时界面切换到了js页面，这个js就是index.js，点击设计就可切换回原来的界面。
注意：代码中根据组件的的xid来获取组件的js对象。 04-2

 
         </pre> 
        
         Model.prototype.button1Click =  
         function 
         (event){ 
        
         var 
         name =  
         this 
         .comp( 
         'input1' 
         ).val(); 
        
         debugger; 
        
         this 
         .comp( 
         'output1' 
         ).set({value:  
         'hello:' 
         +name}); 
        
         }; 
        
         <pre>

第三步，调试运行

1、模拟器运行调试
使用模拟器前，必须启动tomcat，启动时有红色和黑色字是正常的，但出现蓝色字就是发生错误，要根据错误具体进行排查。
在需要运行的.w文件上点右键，然后点击“模拟运行”，就出现下图所示模拟运行的效果，此时，在input窗中输入“小伙伴”，点击按钮，下面的ouput窗就会显示“hello：小伙伴”。

如何调试？
在代码中加上debugger，切换到模拟器中，右键点击刷新，然后再右键点击“Show DevTools”，即进入调试模式，然后可进行单步调试也可直接运行。

2、谷歌Chorme浏览器调试（Chrome的版本需32及以上）
打开chrome浏览器，F12进入调试模式，点击手机模式后选择手机设备；
在浏览器地址栏输入：http://127.0.0.1:8080/x5，回车后即出现开发的界面；
在Input中输入“小伙伴”，点击按钮；
代码运行至debugger处停止；
然后可以进行单步调试，也可直接运行。

3、真机调试
使用真机调试需要打包一个App，使用手机下载安装，将手机连接到计算机方后可进行调试。以下以安卓为例介绍一下这个过程：