创建我的第一个应用

资料来源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对象。

帮助

1 2 3 4 5 6 7

</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，使用手机下载安装，将手机连接到计算机方后可进行调试。以下以安卓为例介绍一下这个过程：

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）调试》

第四步，部署运行

这里所说的部署运行，是将自己开发的App发布到苹果AppStore中或者发布正式安卓App包。由于最终正式发布使用的包需要使用到打包服务器，所以会另外附一篇文章讲解。

---

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