WeX5 App开发完整过程解析
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
使用Cordova插件
二维码扫描 地理定位 加速度传感器 消息推送 音频录制及播放 摄像头拍照及录像 设备信息 文件系统 微信分享 NFC 微信支付、支付宝支付、银联支付
开发Cordova插件
使用模拟器运行及调试
使用开发工具中的模拟器
使用BlueStacks
调试模式与生产模式
调试模式 何时使用 开发时使用 生产模式 部署时使用
运行及调试
使用Chrome浏览器运行及调试 生成调试App，在手机中运行，在PC上进行真机调试 使用开发工具中的模拟器或BlueStacks运行及调试
打包及部署
设置欢迎页，介绍页、App图标 获取证书，生成发布App 三种部署方式
前端页面开发
开发一个简单的功能
使用Chrome浏览器运行及调试
在elements页调试样式 在sources页调试js代码 在network页查看请求 在console页查看控制台信息
打包服务器地址 发布模式
打调试包
下载、安装App 安卓
• 扫描App二维码，下载安装App
IOS
• 使用UC浏览器扫描App二维码，下载IPA文件，使用 同步推安装IPA文件 • 或者使用iTunes安装
真机调试
安卓真机调试
使用Chrome浏览器访问chrome://inspect/#devices
增强型浏览器
本地插件
Js中引用了require(“cordova，可以 使用自动，否则手动选择
打调试包
生成本地App
配置项 安卓App IOS App 输入内容 可以选择 需要先获取苹果开发及发布证书 MAC版开发工具可以选择 WINDOW版开发工具需要单独安装 打包服务器，才能生成IOS App /app-builder 选择发布模式后，不能使用真机调试 但是，微信分享等功能只能在发布模 式的App中执行
两点说明
部署方式三中如何部署Web应用
通过打包获得Web应用资源
• 打包时会将选择的打包资源生成Web应用资源
打包后Web应用资源放在www目录下 将Web应用资源部署到Web服务器上
使用原生插件
通过浏览器访问不能使用原生插件 通过本地App（不管有没有选择打包资源）都可以使用 原生插件
相关文章链接
WeX5 App开发
WeX5 App开发 完整过程介绍
北京起步科技有限公司
www.justep.com Copyright 2000-2015 Justep Software
WeX5 App演示案例
下载地址：http://wex5.com
WeX5 App开发完整过程
功能开发
前端页面开发 后端服务调用 原生插件调用
ቤተ መጻሕፍቲ ባይዱ
打调试包
创建本地App
配置项 服务地址 首页 打包的资源 输入内容 http://192.168.1.142:8080 /x5/UI2/hello/index.w 不选择
应用名
版本号 应用包名
hello
1.1.1 com.justep.hello IOS必须输入证书中的Bundle ID 使用微信插件则必须输入申请微信账 号时录入的应用包名 可选
打包方式 使用场景
选择打包资源 适用于页面资源变化 不频繁的App 适用于开发不联网的 App 不需要首次资源下载 首次运行速度快
优点
缺点
每次更新页面，需要 生成App，更新App’
需要自己解决App端的 页面资源更新
打发布包
安卓
替换App图标 替换欢迎页
IOS
放icon.png 放icon.png platforms/android/res /platforms/ios/X5/Resources/icons 放splash-land.png 放splash-land.png 和splash-port.png 和splash-port.png platforms/android/res /platforms/ios/X5/Resources/splash 使用Intro.html显示 要求和首页同目录 使用Intro.html显示 要求和首页同目录
IOS真机调试
使用safari浏览器进行真机调试
后端服务调用
UIServer或其它 Web服务器 App
提供页面服务
BaaS
浏览器 提供后端服务
数据库
发送Ajax请求访问任意后端服务 X5提供了轻量级的BaaS服务
提供了java的BaaS服务 提供了.net的BaaS服务
处理跨域情况
原生插件调用
如何使用
Tomcat在studio里面 运行启动WeX5运行 启动 平台.bat 运行启动WeX5运行平 台（调试模式）.bat
使用浏览器访问 使用App访问 （不含资源） 使用App访问 （含资源） 立即生效 更新版本号 重启Web应用服务器 访问立即生效 重新生成App 更新App
修改w、 js等文件 后
WeX5平台App打包原理 http://wex5.com/cn/wex5-platform-App-principle/ iOS证书申请 http://wex5.com/cn/ios-certificate-request/ Android和IOS的本地App如何安装（apk&ipa） http://wex5.com/cn/how-install-apk-ipa/ 苹果App部署HTTPS进行在线下载安装 http://wex5.com/cn/ipa-deploy-https/ Android和IOS的本地应用图标规范 http://wex5.com/cn/android%E5%92%8Cios%E7%9A%84%E6%9 C%AC%E5%9C%B0%E5%BA%94%E7%94%A8%E5%9B%BE% E6%A0%87%E8%A7%84%E8%8C%83/ Cordova插件开发 http://wex5.com/cn/cordova%E6%8F%92%E4%BB%B6%E5%BC %80%E5%8F%91/
替换介绍页
获取证书
使用java自带的工具 keytool生成
生成App及App二维 码
从苹果官网申请发布证书 在mac系统上生成p12文件 在build.properties中设置p12文件的密码
生成App
打包App 部署App
发布App二维码，扫 个人/公司证书——上传到App Store，用 描此二维码即可下载、 户从App Store下载、安装App 安装App 企业证书——搭建https服务，用户访问 https服务下载、安装App
调试时不使用这种方 式
三种部署方式
方式一（推荐） 部署方式 使用UIServer 在Web应用服务器上部 署UIServer 不选择打包资源 使用Java Web服务器 使用App访问 使用浏览器访问 使用微信号访问 只需更新版本号 不需要删除浏览器缓存 不需要更新App 方式二 页面等应用资源打包 到本地App 方式三 脱离UIServer 页面等应用资源部署到 任意Web应用服务器 不选择打包资源 使用任意的Web服务器 使用App访问 使用浏览器访问 使用微信号访问 支持任意的Web服务器
二维码扫描 地理定位 加速度传感器 消息推送 音频录制及播放 摄像头拍照及录像 设备信息 文件系统 微信分享 NFC 微信支付、支付宝支付、银联支付
开发Cordova插件
使用模拟器运行及调试
使用开发工具中的模拟器
使用BlueStacks
调试模式与生产模式
调试模式 何时使用 开发时使用 生产模式 部署时使用
运行及调试
使用Chrome浏览器运行及调试 生成调试App，在手机中运行，在PC上进行真机调试 使用开发工具中的模拟器或BlueStacks运行及调试
打包及部署
设置欢迎页，介绍页、App图标 获取证书，生成发布App 三种部署方式
前端页面开发
开发一个简单的功能
使用Chrome浏览器运行及调试
在elements页调试样式 在sources页调试js代码 在network页查看请求 在console页查看控制台信息
打包服务器地址 发布模式
打调试包
下载、安装App 安卓
• 扫描App二维码，下载安装App
IOS
• 使用UC浏览器扫描App二维码，下载IPA文件，使用 同步推安装IPA文件 • 或者使用iTunes安装
真机调试
安卓真机调试
使用Chrome浏览器访问chrome://inspect/#devices
增强型浏览器
本地插件
Js中引用了require(“cordova，可以 使用自动，否则手动选择
打调试包
生成本地App
配置项 安卓App IOS App 输入内容 可以选择 需要先获取苹果开发及发布证书 MAC版开发工具可以选择 WINDOW版开发工具需要单独安装 打包服务器，才能生成IOS App /app-builder 选择发布模式后，不能使用真机调试 但是，微信分享等功能只能在发布模 式的App中执行
两点说明
部署方式三中如何部署Web应用
通过打包获得Web应用资源
• 打包时会将选择的打包资源生成Web应用资源
打包后Web应用资源放在www目录下 将Web应用资源部署到Web服务器上
使用原生插件
通过浏览器访问不能使用原生插件 通过本地App（不管有没有选择打包资源）都可以使用 原生插件
相关文章链接
WeX5 App开发
WeX5 App开发 完整过程介绍
北京起步科技有限公司
www.justep.com Copyright 2000-2015 Justep Software
WeX5 App演示案例
下载地址：http://wex5.com
WeX5 App开发完整过程
功能开发
前端页面开发 后端服务调用 原生插件调用
ቤተ መጻሕፍቲ ባይዱ
打调试包
创建本地App
配置项 服务地址 首页 打包的资源 输入内容 http://192.168.1.142:8080 /x5/UI2/hello/index.w 不选择
应用名
版本号 应用包名
hello
1.1.1 com.justep.hello IOS必须输入证书中的Bundle ID 使用微信插件则必须输入申请微信账 号时录入的应用包名 可选
打包方式 使用场景
选择打包资源 适用于页面资源变化 不频繁的App 适用于开发不联网的 App 不需要首次资源下载 首次运行速度快
优点
缺点
每次更新页面，需要 生成App，更新App’
需要自己解决App端的 页面资源更新
打发布包
安卓
替换App图标 替换欢迎页
IOS
放icon.png 放icon.png platforms/android/res /platforms/ios/X5/Resources/icons 放splash-land.png 放splash-land.png 和splash-port.png 和splash-port.png platforms/android/res /platforms/ios/X5/Resources/splash 使用Intro.html显示 要求和首页同目录 使用Intro.html显示 要求和首页同目录
IOS真机调试
使用safari浏览器进行真机调试
后端服务调用
UIServer或其它 Web服务器 App
提供页面服务
BaaS
浏览器 提供后端服务
数据库
发送Ajax请求访问任意后端服务 X5提供了轻量级的BaaS服务
提供了java的BaaS服务 提供了.net的BaaS服务
处理跨域情况
原生插件调用
如何使用
Tomcat在studio里面 运行启动WeX5运行 启动 平台.bat 运行启动WeX5运行平 台（调试模式）.bat
使用浏览器访问 使用App访问 （不含资源） 使用App访问 （含资源） 立即生效 更新版本号 重启Web应用服务器 访问立即生效 重新生成App 更新App
修改w、 js等文件 后
WeX5平台App打包原理 http://wex5.com/cn/wex5-platform-App-principle/ iOS证书申请 http://wex5.com/cn/ios-certificate-request/ Android和IOS的本地App如何安装（apk&ipa） http://wex5.com/cn/how-install-apk-ipa/ 苹果App部署HTTPS进行在线下载安装 http://wex5.com/cn/ipa-deploy-https/ Android和IOS的本地应用图标规范 http://wex5.com/cn/android%E5%92%8Cios%E7%9A%84%E6%9 C%AC%E5%9C%B0%E5%BA%94%E7%94%A8%E5%9B%BE% E6%A0%87%E8%A7%84%E8%8C%83/ Cordova插件开发 http://wex5.com/cn/cordova%E6%8F%92%E4%BB%B6%E5%BC %80%E5%8F%91/
替换介绍页
获取证书
使用java自带的工具 keytool生成
生成App及App二维 码
从苹果官网申请发布证书 在mac系统上生成p12文件 在build.properties中设置p12文件的密码
生成App
打包App 部署App
发布App二维码，扫 个人/公司证书——上传到App Store，用 描此二维码即可下载、 户从App Store下载、安装App 安装App 企业证书——搭建https服务，用户访问 https服务下载、安装App
调试时不使用这种方 式
三种部署方式
方式一（推荐） 部署方式 使用UIServer 在Web应用服务器上部 署UIServer 不选择打包资源 使用Java Web服务器 使用App访问 使用浏览器访问 使用微信号访问 只需更新版本号 不需要删除浏览器缓存 不需要更新App 方式二 页面等应用资源打包 到本地App 方式三 脱离UIServer 页面等应用资源部署到 任意Web应用服务器 不选择打包资源 使用任意的Web服务器 使用App访问 使用浏览器访问 使用微信号访问 支持任意的Web服务器