WeX5 App开发完整过程.ppt

北京起步科技有限公司 Copyright 2000-2015 Justep Software WeX5 App开发 完整过程介绍 WeX5 App开发 下载地址： WeX5 App演示案例 WeX5 App开发完整过程 功能开发 前端页面开发 后端服务调用 原生插件调用 运行及调试 使用Chrome浏览器运行及调试 生成调试App，在手机中运行，在PC上进行真机调试 使用开发工具中的模拟器或BlueStacks运行及调试 打包及部署 设置欢迎页，介绍页、App图标 获取证书，生成发布App 三种部署方式 开发一个简单的功能 前端页面开发 在elements页调试样式 在sources页调试js代码 在network页查看请求 在console页查看控制台信息 使用Chrome浏览器运行及调试 创建本地App 打调试包 配置项 输入内容 服务地址 42:8080 首页 /x5/UI2/hello/index.w 打包的资源 不选择 应用名 hello 版本号 1.1.1 应用包名 com.justep.hello IOS必须输入证书中的Bundle ID 使用微信插件则必须输入申请微信账号时录入的应用包名 增强型浏览器 可选 本地插件 Js中引用了require(“cordova，可以使用自动，否则手动选择 生成本地App 打调试包 配置项 输入内容 安卓App 可以选择 IOS App 需要先获取苹果开发及发布证书 MAC版开发工具可以选择 WINDOW版开发工具需要单独安装打包服务器，才能生成IOS App 打包服务器地址 /app-builder 发布模式 选择发布模式后，不能使用真机调试 但是，微信分享等功能只能在发布模式的App中执行 打调试包 下载、安装App 安卓 扫描App二维码，下载安装App IOS 使用UC浏览器扫描App二维码，下载IPA文件，使用同步推安装IPA文件 或者使用iTunes安装 安卓真机调试 使用Chrome浏览器访问chrome://inspect/#devices IOS真机调试 使用safari浏览器进行真机调试 真机调试 发送Ajax请求访问任意后端服务 X5提供了轻量级的BaaS服务 提供了java的BaaS服务 提供了.net的BaaS服务 处理跨域情况 后端服务调用 使用Cordova插件 二维码扫描 加速度传感器 音频录制及播放 设备信息 微信分享 微信支付、支付宝支付、银联支付 开发Cordova插件 原生插件调用 地理定位 消息推送 摄像头拍照及录像 文件系统 NFC 使用开发工具中的模拟器 使用BlueStacks 使用模拟器运行及调试 调试模式与生产模式 调试模式 生产模式 何时使用 开发时使用 部署时使用 如何使用 Tomcat在studio里面启动 运行启动WeX5运行平台（调试模式）.bat 运行启动WeX5运行平台.bat 修改w、js等文件后 使用浏览器访问 使用App访问（不含资源） 立即生效 更新版本号 重启Web应用服务器 访问立即生效 使用App访问（含资源） 调试时不使用这种方式 重新生成App 更新App 三种部署方式 方式一（推荐） 方式二 方式三 部署方式 使用UIServer 在Web应用服务器上部署UIServer 页面等应用资源打包到本地App 脱离UIServer 页面等应用资源部署到任意Web应用服务器 打包方式 不选择打包资源 选择打包资源 不选择打包资源 使用场景 使用Java Web服务器 使用App访问 使用浏览器访问 使用微信号访问 适用于页面资源变化不频繁的App 适用于开发不联网的App 使用任意的Web服务器 使用App访问 使用浏览器访问 使用微信号访问 优点 只需更新版本号 不需要删除浏览器缓存 不需要更新App 不需要首次资源下载 首次运行速度快 支持任意的Web服务器 缺点 每次更新页面，需要生成App，更新App’ 需要自己解决App端的页面资源更新 打发布包 安卓 IOS 替换App图标 放icon.png platforms/android/res 放icon.png /platforms/ios/X5/Resources/icons 替换欢迎页 放splash-land.png 和splash-port.png platforms/android/res 放splash-land.png 和splash-port.png /platforms/ios/X5/Resources/splash 替换介绍页 使用Intro.html显示 要求和首页同目录 使用Intro.html显示 要求和首页同目录 获取证书 使用java自带的工具keyt