WeX5 App開發(fā)完整過程

1、北京起步科技有限公司北京起步科技有限公司 Copyright 2000-2015 Justep Software WeX5 AppWeX5 App開發(fā)開發(fā)完整過程介紹完整過程介紹WeX5 App開發(fā)開發(fā) 下載地址：http:/WeX5 App演示案例演示案例WeX5 App開發(fā)完整過程開發(fā)完整過程功能開發(fā)前端頁面開發(fā)后端服務(wù)調(diào)用原生插件調(diào)用運(yùn)行及調(diào)試使用Chrome瀏覽器運(yùn)行及調(diào)試生成調(diào)試App，在手機(jī)中運(yùn)行，在PC上進(jìn)行真機(jī)調(diào)試使用開發(fā)工具中的模擬器或BlueStacks運(yùn)行及調(diào)試打包及部署設(shè)置歡迎頁，介紹頁、App圖標(biāo)獲取證書，生成發(fā)布App三種部署方式 開發(fā)一個(gè)簡(jiǎn)單的功能前端頁面開發(fā)前端

2、頁面開發(fā) 在elements頁調(diào)試樣式 在sources頁調(diào)試js代碼 在network頁查看請(qǐng)求 在console頁查看控制臺(tái)信息使用使用Chrome瀏覽器運(yùn)行及調(diào)試瀏覽器運(yùn)行及調(diào)試 創(chuàng)建本地App打調(diào)試包打調(diào)試包配置項(xiàng)配置項(xiàng)輸入內(nèi)容輸入內(nèi)容服務(wù)地址42:8080首頁/x5/UI2/hello/index.w打包的資源打包的資源不選擇不選擇應(yīng)用名hello版本號(hào)1.1.1應(yīng)用包名com.justep.helloIOS必須輸入證書中的Bundle ID使用微信插件則必須輸入申請(qǐng)微信賬號(hào)時(shí)錄入的應(yīng)用包名增強(qiáng)型瀏覽器可選本地插件Js中引用了require(“cor

3、dova，可以使用自動(dòng)，否則手動(dòng)選擇 生成本地App打調(diào)試包打調(diào)試包配置項(xiàng)配置項(xiàng)輸入內(nèi)容輸入內(nèi)容安卓App可以選擇IOS App需要先獲取蘋果開發(fā)及發(fā)布證書MAC版開發(fā)工具可以選擇WINDOW版開發(fā)工具需要單獨(dú)安裝打包服務(wù)器，才能生成IOS App打包服務(wù)器地址/app-builder發(fā)布模式選擇發(fā)布模式后，不能使用真機(jī)調(diào)試但是，微信分享等功能只能在發(fā)布模式的App中執(zhí)行打調(diào)試打調(diào)試包包 下載、安裝App 安卓 掃描掃描App二維碼，下載安裝二維碼，下載安裝App IOS 使用使用UC瀏覽器掃描瀏覽器掃描App二維碼，下載二維碼，下載IPA文件，使用文件，使用同步推安裝同步推安裝IPA文件文件

4、 或者使用或者使用iTunes安裝安裝 安卓真機(jī)調(diào)試 使用Chrome瀏覽器訪問chrome:/inspect/#devices IOS真機(jī)調(diào)試 使用safari瀏覽器進(jìn)行真機(jī)調(diào)試真機(jī)調(diào)試真機(jī)調(diào)試 發(fā)送發(fā)送AjaxAjax請(qǐng)求訪問任意后端服務(wù)請(qǐng)求訪問任意后端服務(wù) X5X5提供了輕量級(jí)的BaaS服務(wù) 提供了java的BaaS服務(wù) 提供了.net的BaaS服務(wù) 處理跨域情況處理跨域情況后端服務(wù)調(diào)用后端服務(wù)調(diào)用 使用Cordova插件 二維碼掃描二維碼掃描 加速度傳感器加速度傳感器 音頻錄制及播放音頻錄制及播放 設(shè)備信息設(shè)備信息 微信分享微信分享 微信支付、支付寶支付、銀聯(lián)支付微信支付、支付寶支付、

5、銀聯(lián)支付 開發(fā)Cordova插件原生插件調(diào)用原生插件調(diào)用 地理定位地理定位 消息推送消息推送 攝像頭拍照及錄像攝像頭拍照及錄像 文件系統(tǒng)文件系統(tǒng) NFCNFC 使用開發(fā)工具中的模擬器 使用BlueStacks使用模擬器運(yùn)行及調(diào)試使用模擬器運(yùn)行及調(diào)試調(diào)試模式與生產(chǎn)模式調(diào)試模式與生產(chǎn)模式調(diào)試模式調(diào)試模式生產(chǎn)模式生產(chǎn)模式何時(shí)使用開發(fā)時(shí)使用部署時(shí)使用如何使用Tomcat在studio里面啟動(dòng)運(yùn)行啟動(dòng)WeX5運(yùn)行平臺(tái)（調(diào)試模式）.bat運(yùn)行啟動(dòng)WeX5運(yùn)行平臺(tái).bat修改w、js等文件后使用瀏覽器訪問使用App訪問（不含資源）立即生效更新版本號(hào)重啟Web應(yīng)用服務(wù)器訪問立即生效使用App訪問（含資源）調(diào)試

6、時(shí)不使用這種方式重新生成App更新App三種部署方式三種部署方式方式一（推薦）方式一（推薦）方式二方式二方式三方式三部署方式使用UIServer在Web應(yīng)用服務(wù)器上部署UIServer頁面等應(yīng)用資源打包到本地App脫離UIServer頁面等應(yīng)用資源部署到任意Web應(yīng)用服務(wù)器打包方式不選擇打包資源選擇打包資源不選擇打包資源使用場(chǎng)景使用Java Web服務(wù)器使用App訪問使用瀏覽器訪問使用微信號(hào)訪問適用于頁面資源變化不頻繁的App適用于開發(fā)不聯(lián)網(wǎng)的App使用任意的Web服務(wù)器使用App訪問使用瀏覽器訪問使用微信號(hào)訪問優(yōu)點(diǎn)只需更新版本號(hào)不需要?jiǎng)h除瀏覽器緩存不需要更新App不需要首次資源下載首次運(yùn)行速

7、度快支持任意的Web服務(wù)器缺點(diǎn)每次更新頁面，需要生成App，更新App需要自己解決App端的頁面資源更新打發(fā)布包打發(fā)布包安卓安卓IOS替換App圖標(biāo)放icon.pngplatforms/android/res放icon.png/platforms/ios/X5/Resources/icons替換歡迎頁放splash-land.png和splash-port.pngplatforms/android/res放splash-land.png和splash-port.png/platforms/ios/X5/Resources/splash替換介紹頁使用Intro.html顯示要求和首頁同目錄使用I

8、ntro.html顯示要求和首頁同目錄獲取證書使用java自帶的工具keytool生成從蘋果官網(wǎng)申請(qǐng)發(fā)布證書在mac系統(tǒng)上生成p12文件在perties中設(shè)置中設(shè)置p12文件的密碼文件的密碼打包App生成App及App二維碼生成App部署App發(fā)布App二維碼，掃描此二維碼即可下載、安裝App個(gè)人/公司證書上傳到App Store，用戶從App Store下載、安裝App企業(yè)證書搭建https服務(wù)，用戶訪問https服務(wù)下載、安裝App 部署方式三中如何部署Web應(yīng)用 通過打包獲得Web應(yīng)用資源 打包時(shí)會(huì)將選擇的打包資源生成打包時(shí)會(huì)將選擇的打包資源生成WebWeb應(yīng)用資源應(yīng)用資源 打包后