- 前言
公司之前用的app就是一個套殼掛個鏈接就能用的app，后來需要添加微信分享方便傳播，沒辦法只好做成混合式的app了，
因為之前做.net用vs可以創建cordova項目也試着玩過，就決定用cordova來做這個了。
但是沒有深入的做過這個，所以前期遇到的問題多的我都記不清了。
- 使用到的工具
- Visual Studio 2015
- vs code （也可以用到）
使用visual studio2015搭建cordova環境可以看這篇文章：http://www.cnblogs.com/ashidamana/p/5171172.html
環境搭建好后看下你的系統里是不是有這些東西：nodejs、java jdk（32位）、android sdk、
注意：java jdk我用1.7版本使用vs調試時會報錯，后來改為1.6的版本就正常了。如果使用vs code調試又得要1.8或以上的jdk版本才行。
- 目錄結構
- merges 存放各個平台的特殊的代碼，與www目錄合並編譯，相同的文件merges下的代碼文件優先。
- plugins 即插件目錄，cordova 訪問本地設備屬性的原生API也是以插件的形式提供。
- res 適用於各個平台的特殊資源（圖標和啟動畫面）。
- www 包含應用程序代碼
- config.xml包含工程的配置文件
- build.json 配置打包簽名文件信息
- taco.json 存儲使 Visual Studio 打造非 Windows 操作系統像 mac 上的項目元數據
- my-release-key.keystore簽名文件，打包時必須用的
- 插件
- Network Information 可以用來app檢測當前網絡狀態（核心菜單添加安裝）
- Splashscreen 用來添加歡迎界面的插件（核心菜單添加安裝）
- Wechat 可以使用微信分享、登陸、支付的插件，地址：（https://github.com/xu-li/cordova-plugin-wechat）
- Whitelist 默認自帶的
- 插件的使用
- 微信插件使用分享功能：
首先確保添加插件是appid沒有錯誤，
分享到朋友圈：
//商品分享到朋友圈 function wx_share() { //獲取商品圖片 var wechat_img = wx_img; var wechat_url = geturl(); var wechat_product_name = wx_product_name; var wechat_store_name = wx_store_name; Wechat.share({ message: { title: wechat_product_name, description: wechat_product_name, mediaTagName: wechat_store_name, thumb: wechat_img, media: { type: Wechat.Type.WEBPAGE, //類型是一個webpage，就是一個網頁？ webpageUrl: wechat_url } }, scene: Wechat.Scene.TIMELINE // 分享到朋友圈
//scene: Wechat.Scene.SESSION // 分享到微信好友
//scene: Wechat.Scene.FAVORITE // 收藏到微信
}, function () { alert("分享成功"); }, function (reason) {
alert("分享失敗");
}); }
- 網絡狀態插件使用&&首頁狀態先點擊返回鍵退出app(這里用的是layer彈窗插件)
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
document.addEventListener("backbutton", eventBackButton, false); //返回鍵
document.addEventListener("offline", onOffline, false);//網絡未鏈接狀態
document.addEventListener("online", onOnline, false);//網絡連接成功
}
function onOffline(e) {
// Handle the offline event
layer.open({
content: '網絡未連接'
, skin: 'msg'
, time: 2 //2秒后自動關閉
});
}
function onOnline() {
layer.open({
content: '已連接到服務器'
, skin: 'msg'
, time: 2 //2秒后自動關閉
});
}
//退出app
function exitApp() {
delCookie("apk_id");
navigator.app.exitApp();
}
//返回鍵
function eventBackButton() {
//confirm("再點擊一次退出!");
//window.plugins.ToastPlugin.show_short('再點擊一次退出!');
layer.open({
content: '再點擊一次退出!'
, skin: 'msg'
, time: 3 //2秒后自動關閉
});
document.removeEventListener("backbutton", eventBackButton, false); //注銷返回鍵
document.addEventListener("backbutton", exitApp, false);// 通過監聽返回鍵綁定退出事件
//3秒后重新注冊
var intervalID = window.setInterval(
function () {
window.clearInterval(intervalID);
document.addEventListener("backbutton", eventBackButton, false); //添加返回事件
document.removeEventListener("backbutton", exitApp, false);//刪除事件
},
3000
);
}
- 基礎配置
- 歡迎界面配置：
右鍵config.xml選擇查看代碼：
按需添加如下設置
<preference name="SplashScreen" value="screen"/> <preference name="SplashScreenDelay" value="10000"/>#顯示時間 <preference name="AutoHideSplashScreen" value="false"/>#禁止自動隱藏 <preference name="auto-hide-splash-screen" value="false"/>#禁止自動隱藏 <preference name="FadeSplashScreen" value="false"/>#禁用淡出效果 <preference name="SplashMaintainAspectRatio" value="true" />#圖像cover屏幕 <preference name="ShowSplashScreenSpinner" value="false" />#隱藏加載灰圈 <preference name="SplashShowOnlyFirstTime" value="false" />#每次重新啟動都顯示
2.簽名文件的生成與配置：
打開命令提示符——根據你的java jdk路徑輸入，例如我的：cd C:\Program Files (x86)\Java\jdk1.6.0_43\bin
然后在輸入生成簽名文件的命令：
keytool -genkey -v -keystore c:\my-release-key.keystore -alias johnS -keyalg RSA -keysize 2048 -validity 10000
（生成簽名文件介紹：http://taco.visualstudio.com/en-us/docs/tutorial-package-publish-readme/）
注意：輸入密碼是命令行什么都不顯示，但其實已經輸入成功了。
打開c盤就可以看到簽名文件了，然后再把簽名文件放到你的項目里。
打開項目里的build.json文件添加下面的代碼
{ "android": { "release": { "keystore": "my-release-key.keystore",//簽名文件名稱 "storePassword": "123456",//生成時填寫的密碼 "alias": "johnS",//生成命令里你填寫的alias值 "password" : "123456",//密碼 "keystoreType": "" } } }
當你發布（release）app時會自動給你的app簽名。
- 使用vs code開發cordova app
使用vs 2015做的cordova項目用vs code也可以開發，不過就是沒有vs那么方便了。
首先要給vs code添加cordova插件—Cordova Tools
然后用vs code 打開vs創建的項目，配置下調試就可以用了。
注意：java jdk必須要1.8或以上的，否則無法調試。
還有可能會出現jdk虛擬內存的問題：
error:Could not reserve enough space for 2097152kb object heap
解決辦法：
開始->控制面板->系統->高級設置->環境變量->系統變量
新建變量：
變量名: _JAVA_OPTIONS
變量值: -Xmx512M
深坑問題：不管是用vs或vs code第一次調試程序時都會要下載很多文件后面再調試就不需要了，可能是因為牆的問題下載速度巨慢，可能2-3個小時都下載不好，雖然我改過hosts但下載速度還是很慢。
有條件的可以用vpn。
如果想脫離vs只用vs code來開發cordova項目的話就需要了解下cordova命令的使用了。
這里說下簡單的命令：
首先設置下npm鏡像，不然安裝cordova也得翻牆。
- 命令行輸入：
npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global
安裝cordova：npm install -g cordova創建cordova項目：pushd e:\app
cordova create test com.cordova.test test
cordova platforms add android //添加平台 （cordova platforms rm android//移除平台）
打開目錄e:\app 就可以看到項目了
添加插件：
cordova plugin add cordova-plugin-file (cordova plugin add <插件官方名稱>)
刪除插件：
cordova plugin rm cordova-plugin-file調試：
- cordova install android //將編譯好的應用程序安裝到模擬器上。
- cordova emulate android //在模擬器上運行（前提是創建好AVD）
- cordova serve android //在瀏覽器運行
- cordova build android //打包cordova項目到android平台。
- cordova build android --release //release版本
- cordova run android //通過USB直接安裝到真機（該語句已經包括了build命令）
- gradle-2.2.1-all.zip
第一次調試會下載gradle-2.2.1-all.zip文件不過由於這個文件有50多mb所以下載速度可能會很慢（第一次調試最好修改下hosts或者掛vpn不然很多文件會下載不動），
建議手動下載:http://vdisk.weibo.com/s/tYiMrGa0Cu5l 然后放到
“C:\Users\用戶名\.gradle\wrapper\dists\gradle-2.2.1-all\2m8005s69iu8v0oiejfej094b ”大概就是這個目錄可能最后一個文件夾名稱不一樣，然后再次調試。