首页 > 信息资讯 > 技术资料

WeX5开发工具

1  安装及启动 2  案例运行 2.1  启动服务 2.2  PC浏览器运行 2.3  手机浏览器运行 2.4  手机APP运行 2.5  微信运行 3  目录说明 4  资源获取 5  入门学习 5.1  初识WeX5 5.2  认识WeX5组件 5.3  学习外卖开发案例 5.4  进阶WeX5代码基础和调试 6  常见问题
1 安装及启动

IDE工具下载: http://wex5.com/cn/downloads/

WeX5是绿色免安装的,下载好工具后,解压即可直接使用。

请一定要注意:不能解压到含中文、空格和特殊字符的目录下, 例如:Program   Files,是不可以的,因为包含空格。


安装后根目录下有以下几个批处理:

2 案例运行

开发工具中,已经带了几个学习案例, 包括:综合演示案例、外卖案例、记账本、仿途牛案例、仿淘宝案例、 仿网易案例等,可以直接运行体验运行效果。

其中外卖和记账本两个案例,需要使用到MySQL数据库, 因此如果访问这两个案例需要启动数据库。

2.1  启动服务

1)   运行“启动MySQL数据库.bat”,注意一定保证运行时的黑色窗口保持开启状态,如果自动关闭,说明数据库启动有问题。

2)   运行“启动WeX5运行平台.bat”(保持窗口打开,不能关闭)。

2.2  PC浏览器运行 运行“启动Chrome浏览器.bat”

综合演示案例:http://localhost:8080

外卖案例:http://localhost:8080/x5/UI2/takeout/index.w

记账本案例:http://localhost:8080/x5/UI2/demo/account/index.w

仿途牛案例:http://localhost:8080/x5/UI2/demo/tuniu/index.w

仿淘宝案例:http://localhost:8080/x5/UI2/demo/taobao/index.w

仿网易案例:http://localhost:8080/x5/UI2/demo/netease/index.w


显示页面后,按F12键,找到手机图标,点击之后,再次刷新,即可显示浏览器模拟手机访问的效果。

2.3  手机浏览器运行

你可以直接使用手机或者平板浏览器访问以上案例,只需将手机或平板跟你电脑在 同一个网络上,直接浏览器输入以上地址,其中的localhost替换为局域网的IP地址即可。

2.4  手机APP运行

如果你希望体验一下手机App运行效果,需要进入Studio开发工具进行打包, 详细步骤参见: http://wex5.com/cn/wex5-platform-to-app-process/ ,也可以直接在 官网在线体验扫描二维码直接下载App进行体验。

2.5  微信运行

请在微信中关注起步官方微信,即可体验微信内案例运行效果。 通讯录,添加朋友,查找“起步软件”即可关注。

3 目录说明
4 资源获取

API手册:Studio工具,菜单栏“WeX5文档”——API手册;

文档中心:http://wex5.com/cn/doc/

视频教程:http://wex5.com/cn/downloads/

资源下载:http://wex5.com/cn/zh-download-page

开发社区:http://wex5.com/cn/bbs/index.html

在线体验:http://wex5.com/cn/appstore/

加入QQ群:http://wex5.com/cn/qqgroup/   WeX5/BeX5官方技术4群:189469727。

5 入门学习
5.1  初识WeX5

1  demo使用说明  (课程时长21分钟)

本视频介绍WeX5的四个demo案例:综合演示、外卖、仿途牛、WeX5论坛的运行和APP体验方法,使您初步了解WeX5的能力。

2  我的第一个应用  (课程时长8分钟)

本视频通过一个简单的hello案例介绍,使您了解如何使用WeX5开发一个手机应用的过程,进一步了解WeX5的具体开发过程。

3  APP完整开发过程  (课程时长60分钟)

本视频完整介绍使用WeX5开发APP应用的过程,使您对WeX5的开发工具使用、开发原理有一个全面的认识。

4  WeX5开发工具入门  (课程时长44分钟)

本视频详细介绍WeX5开发工具,了解开发工具的具体使用和操作技巧,使您轻松开启WeX5开发之旅。

5.2  认识WeX5组件

组件使用基础:

WeX5的界面是由组件构成的,组件是一个可以以图形化方式显示在屏幕上,并能与用户进行交互的对象。组件是对数据和方法的封装,有自己的属性、事件和方法等。 组件使用基础将从组件的创建、属性、方法、操作、事件、样式、API、调试等方面详细介绍组件的使用。

常用组件:
data数据组件
input数据输入的基础组件
list动态数据显示组件
panel上中下结构的页面组件
contents滑动切换页面的组件
row行组件
其他常用组件
5.3  学习外卖开发案例

这里将学习使用WeX5开发一个外卖订餐的App应用。这个外卖案例具有:菜单选择加入购物车;购物车下单;历史订单查看;用户信息管理等功能。

该教程将手把手教您WeX5开发外卖案例的全过程,包括开发APP前端页面、后端服务调用、手机定位和手机支付(微信支付、支付宝支付)、打包部署以 及微信公众号开发等。通过逐行代码的讲解方式,您将通过这个案例的学习,进一步掌握WeX5开发的方法和技巧。(课程时长3小时)

外卖案例讲义
前言-外卖概述
外卖数据交互
第一讲 搭建页面框架
第二讲 开发菜品列表页
第三讲 开发购物车页
第四讲 开发我的信息页
第五讲 开发订单页
第六讲 细节处理
第七讲 开发服务&调用服务
第八讲 了解BaaS
第九讲 开发自己的服务
第十讲 在App中支付
第十一讲 在App中获得地理信息
第十二讲 打包及部署
第十三讲 微信公众号
5.4  进阶WeX5代码基础和调试

这里将介绍WeX5初级开发的代码基础,包括JS引用、引用CSS和text等,以及如何进行代码调试,为您进一步玩转WeX5打下坚实的基础!

WeX5如何引用JS
WeX5如何显示声明依赖
WeX5如何引用css和text
WeX5代码调试
6 常见问题

在您使用WeX5开发工具时,您可能会遇到一些问题。例如:解压中文乱码、批处理闪退、数据库问题、打包问题等。 请点击这里