WeX5 V321_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)用運行及調(diào)試使用Chrome瀏覽器運行及調(diào)試生成調(diào)試App，在手機中運行，在PC上進(jìn)行真機調(diào)試使用模擬器運行及調(diào)試打包及部署設(shè)置歡迎頁，介紹頁、App圖標(biāo)獲取證書，生成發(fā)布App三種部署方式 開發(fā)一個簡單的功能前端頁面開發(fā)前端頁面開發(fā) 在elements頁調(diào)試

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

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

4、文件，使用文件，使用同步推安裝同步推安裝IPA文件文件 或者使用或者使用iTunes安裝安裝 安卓真機調(diào)試 使用內(nèi)置Chrome瀏覽器 訪問chrome:/inspect/#devices IOS真機調(diào)試 使用safari瀏覽器進(jìn)行真機調(diào)試真機調(diào)試真機調(diào)試 發(fā)送發(fā)送AjaxAjax請求訪問任意后端服務(wù)請求訪問任意后端服務(wù) X5X5提供了輕量級的BaaS服務(wù) 提供了java的BaaS服務(wù) 提供了.net的BaaS服務(wù) 提供了php的BaaS服務(wù) 處理跨域情況處理跨域情況后端服務(wù)調(diào)用后端服務(wù)調(diào)用 使用Cordova插件 二維碼掃描二維碼掃描 加速度傳感器加速度傳感器 音頻錄制及播放音頻錄制及播放

5、設(shè)備信息設(shè)備信息 微信分享微信分享 微信支付、支付寶支付、銀聯(lián)支付微信支付、支付寶支付、銀聯(lián)支付 開發(fā)Cordova插件原生插件調(diào)用原生插件調(diào)用 地理定位地理定位 消息推送消息推送 攝像頭拍照及錄像攝像頭拍照及錄像 文件系統(tǒng)文件系統(tǒng) NFCNFC插件參數(shù)配置插件參數(shù)配置 使用模擬器使用模擬器運行及調(diào)試使用模擬器運行及調(diào)試調(diào)試模式與生產(chǎn)模式調(diào)試模式與生產(chǎn)模式調(diào)試模式調(diào)試模式生產(chǎn)模式生產(chǎn)模式何時使用開發(fā)時使用部署時使用如何使用Tomcat在studio里面啟動運行啟動WeX5運行平臺（調(diào)試模式）.bat運行啟動WeX5運行平臺.bat修改w、js等文件后使用瀏覽器訪問使用App訪問（不含資源）立即

6、生效更新版本號重啟Web應(yīng)用服務(wù)器訪問立即生效使用App訪問（含資源）調(diào)試時不使用這種方式重新生成App更新App三種部署方式三種部署方式模式模式1模式模式2模式模式3部署方式UI資源打包到本地App中UI資源部署到任意Web應(yīng)用服務(wù)器在Web應(yīng)用服務(wù)器上部署UIServer，訪問UI資源打包方式選擇打包資源不選擇打包資源不選擇打包資源使用場景適用于頁面資源變化不頻繁的App適用于開發(fā)不聯(lián)網(wǎng)的App使用任意的Web服務(wù)器使用App訪問使用瀏覽器訪問使用微信號訪問使用Java Web服務(wù)器使用App訪問使用瀏覽器訪問使用微信號訪問優(yōu)點不需要首次資源下載首次運行速度快支持任意的Web服務(wù)器打包后重

7、新部署UI資源UI資源版本自動更新只需更新版本號UI資源版本自動更新缺點每次更新頁面，需要生成App，更新App打發(fā)布包打發(fā)布包安卓安卓IOS配置證書配置開發(fā)者信息設(shè)置證書的密碼從蘋果官網(wǎng)申請發(fā)布證書在mac系統(tǒng)上生成p12文件設(shè)置p12文件的密碼選擇應(yīng)用圖標(biāo)準(zhǔn)備96*96的圖片platforms/android/res準(zhǔn)備96*96的圖片 /platforms/ios/X5/Resources/icons選擇歡迎圖片準(zhǔn)備1280*720的圖片準(zhǔn)備720*1280的圖片platforms/android/res準(zhǔn)備1280*720的圖片準(zhǔn)備720*1280的圖片/platforms/ios/X5/Resources/splash使用介紹頁使用Intro.html顯示要求和首頁同目錄使用Intro.html顯示要求和首頁同目錄打包App生成App及App二維碼生成App部署App發(fā)布App二維碼，掃描此二維碼即可下載、安裝App個人/公司證書上傳到App Store，用戶從App Store下載、安裝App企業(yè)證書搭建https服務(wù)，用戶訪問https服務(wù)下載、安裝App 模式2中如何部署Web應(yīng)用 通過打包獲得Web應(yīng)用資源 打包時會將選擇的打包資源生成打包時會將選擇的打包資源生成WebWeb應(yīng)用資源應(yīng)用資源 打包后We