webappversion_小白入門 webApp開發中如何進行相冊/拍照

⑴ webapp怎麼連接資料庫

JAVA Web開發中與資料庫的連接操作，配置：
1、新建資料庫。
新建登錄角色，在新建資料庫的時候把資料庫的所有權交給你新建的角色。用用戶和密碼控制資料庫。保證資料庫的安全。

2、編寫context.xml文件 Xml文件的目的是封裝用戶和密碼，也是封裝的一種，方便操作。
以下為context.xml文件樣例：
<?xml version="1.0" encoding="utf-8"?>
<Context reloadable = "true">
<Resource
name="jdbc/sampleHS"
type="javax.sql.DataSource"
maxActive="14"
maxIdle="10"
username="hstaoshu"
maxWait="5000"
driverClassName="org.postgresql.Driver"
password="hstaoshu"
url="jdbc:postgresql://localhost:5432/hstaoshu"/>
</Context>
詳細說明：
name="jdbc/sampleHS"裡面的ssampHS是可改名稱，建議根據需要自己命名；
username="hstaoshu"
password="hstaoshu"此兩項為你新建的資料庫登錄角色用戶名和密碼信息，只有匹配了才能訪問。這里簡單為了表示，把用戶名和密碼弄成了跟資料庫名字一樣。其實這是很不安全的。
url="jdbc:postgresql://localhost:5432/hstaoshu"/>
這是連接資料庫的URl,就像訪問網站的地址一樣。沒有這個是無法訪問資料庫的。localhost:5432表示本地埠。一般不需要改動，如果你在配置資料庫的時候改動過埠，那麼你需要把它改回來。/hstaoshu是你的資料庫名稱。

⑵ webapp怎麼連接伺服器上的資料庫

建登錄角色，在新建資料庫的時候把資料庫的所有權交給你新建的角色。用用戶和密碼控制資料庫。保證資料庫的安全。

⑶ java 怎麼獲取伺服器webroot的路徑

使用JAVA後台代碼取得WEBROOT物理路徑，可以有如下兩種方式：
1、使用JSP Servlet取得WEB根路徑可以用request.getContextPath()，相對路徑request.getSession().getServletContext().getRealPath("/")，它們可以使用我們很容易取得根路徑。

2、如果使用了spring, 在WEB-INF/web.xml中，創建一個webAppRootKey的param,指定一個值（默認為webapp.root）作為鍵值，然後通過Listener,或者Filter,或者Servlet執行String webAppRootKey = getServletContext().getRealPath("/"); 並將webAppRootKey對應的webapp.root分別作為Key,Value寫到System Properties系統屬性中。之後在程序中通過System.getProperty("webapp.root")來獲得WebRoot的物理路徑。
具體示例代碼如下：
web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.4"
xmlns="http://java.sun.com/xml/ns/j2ee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee
http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
<context-param>
<param-name>webAppRootKey</param-name>
<param-value>csc2.root</param-value>
</context-param>
<listener>
<listener-class>test.ApplicationListener</listener-class>
</listener>
</web-app>

ApplicationListener.java
package test;
import javax.servlet.ServletContextEvent;
import org.springframework.web.context.ContextLoaderListener;
public class ApplicationListener extends ContextLoaderListener {
public void contextDestroyed(ServletContextEvent sce) {
// TODO Auto-generated method stub
}
public void contextInitialized(ServletContextEvent sce) {
// TODO Auto-generated method stub
String webAppRootKey = sce.getServletContext().getRealPath("/");
System.setProperty("csc2.root" , webAppRootKey);
String path =System.getProperty("csc2.root");
System.out.println("sssss:::"+path);
}
}

test.java
public class test {
public void remve(){
String path =System.getProperty("csc2.root");
System.out.println("result::::::::"+path);
}

}

index.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ page import="java.util.*" %>
<%@ page import="test.test" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%
test t = new test();
t.remve();
%>
<html>
</html>
部署程序發布啟動TOMCAT 運行index.jsp 就可以調用JAVA中全局設置的物理路徑了（說明這里的JSP 只是調用了TEST.JAVA 的remove方法，不做其他使用。原理解釋，TOMCAT啟動和讀取WEB.XML 監聽方式載入SPRING ApplicationListener繼承SPRING ContextLoaderListener載入SPRING順便吧全局路徑賦值給csc2.root 描述，這樣之後JAVA 代碼中就可以使用System.getProperty("csc2.root")調用全路路徑了。

⑷ org.eclipse.jetty.webapp.webappcontext是個什麼包

這個類在jetty-webapp.jar下。
maven方式：
<dependency>
<groupId>org.eclipse.jetty</groupId>
<artifactId>jetty-webapp</artifactId>
<version>9.2.18.v20160721</version>
</dependency>

⑸ maven 怎麼配置webapp

<plugin>
<artifactId>maven-war-plugin</artifactId>
<version>2.1-beta-1</version>
<configuration>
<warSourceDirectory>
${basedir}/webapp
</warSourceDirectory>

<webXml>${basedir}/webapp/WEB-INF/web.xml</webXml>
</configuration>
</plugin>

⑹ 如何為ionic webapp開發自定義插件

安裝cordova插件管理工具，plugman
在終端中輸入：
npm install -g plugman
安裝命令與安裝結果如下：

2
新建一個插件myEcho，用彈出框來顯示我們的內容。
plugman create --name <pluginName> --plugin_id <pluginID> --plugin_version <version> [--path <directory>] [--variable NAME=VALUE]
把其中的<pluginName>替換為 myEcho;
<pluginID> 替換為 com.lulee007.myEcho
<version> 替換為 0.0.1
[--path <directory>] [--variable NAME=VALUE] 這兩個是可選參數，這里不寫了。這樣會在當前目錄下（desktop）創建一個新的目錄myEcho
在終端中輸入：
plugman create --name myEcho --plugin_id com.lulee007.myEcho --plugin_version 0.0.1

執行命令後會在當前目錄下生成一個文件夾，我這里的目錄是在桌面下的myEcho.

3
向myEcho項目中添加一個android平台
plugman platform add --platform_name <platform>
把<platform>替換為 android
接著在終端中繼續輸入：
cd myEcho
然後輸入：
plugman platform add --platform_name android
這時候查看我們的myEcho目錄下的 src會新增一個目錄android裡面會有一個java文件：myEcho.java

END
插件項目修改配置
項目結構組成：
src 對應不同的平台，www 放我們的 javascript 文件，plugin.xml 是插件的配置文件。

2
先來看看配置文件：plugin.xml
解釋一下關鍵的幾個元素：
id: 插件的標識，即一開始我們新建插件輸入的 ID，com.lulee007.myEcho
name：插件的名稱，新建插件時輸入的名稱，myEcho
description：描述信息
js-mole：對應我們的 javascript 文件，src 屬性指向 www/myEcho.js
platform：支持的平台，這里僅有一個 android，這是剛才我們通過「 plugman platform add --platform_name android 」添加進來的。
其中android下的config-file：
這里是android插件的配置信息，當安裝到應用時，會添加到目標平台android下的 res/xml/config.xml 文件中，並將 src/android/myEcho.java，復制到 android 的 package 包中。

3
看下javascript文件：myEcho.js
文件內容很簡單，第一句是引入cordova下的exec庫
第二句是我們插件的執行插件方法，
exec(success, error, "myEcho", "coolMethod", [arg0]);
success:調用成功時的回調函數，
error:調用出錯時的回調函數，
"myEcho"：插件名稱，
"coolMethod"：執行插件里的方法，
[arg0]：可選參數，執行方法的參數數組。
這里我們把「exports.coolMethod」改為「window.plugins.myEcho」
並在「exports.coolMethod」上面添加一行：
window.plugins = window.plugins || {};
同樣把「coolMethod」也改為「echo」。
最終修改後的js文件內容如圖：

4
接著修改myEcho.java文件
可以看到myEcho繼承自CordovaPlugin，並重載了execute方法。
在execute方法里有個判斷，action.equals("coolMethod")，這表示如果執行的是我們的方法那就繼續執行內部的邏輯並返回true，如果不是則直接返回false結束。
這里我們修改下方法：「coolMethod」為「echo」,並把方法coolMethod名稱修改為echo。
最終修改後的java文件內容如下：

END
安裝測試插件
這里用事先准備好的ionic項目myFirstApp來測試我們的插件。
這里不再贅述ionic項目的創建，具體可以參考我的另一篇經驗。
直接在網路經驗里搜索：如何用ionicframework進行混合移動應用開發
第一篇就是。

打開終端，在終端中輸入：
cd myFirstApp
切換到myFirstApp目錄下
輸入：
cordova plugin add ../myEcho
顯示已經安裝myEcho插件到ios和android平台下

打開myFirstApp目錄，可以看到在plugins目錄下多了一個com.lulee007.myEcho目錄。

打開myFirstApp目錄下的www/js/controllers.js
添加如下代碼到最後「PlaylistCtrl」位置：
window.plugins.myEcho("echo my text",
function(data){
alert(data);
},
function(error){
alert(error);
});

重新build然後run進行調試：
在終端里輸入：
ionic build android
然後輸入：
ionic run --device android
執行命令後結果如下圖：

這時android設備上已經運行了我們的應用：
隨便點擊list的一個項，會彈出一個對話框，內容是「echo my text」

最後如果我們在測試中需要對插件進行更新，這時候只需要執行命令：
cordova plugin remove com.lulee007.myEcho
這里的「com.lulee007.myEcho」就是我們最開始新建插件的時候的插件ID。
重新安裝還是這個命令：
cordova plugin add path/to/your/plugin/dir
把「path/to/your/plugin/dir」替換為自己的插件的目錄就好了。

⑺ 如何保證ios webapp啟動圖清晰

iOS中的safri瀏覽器可以將一個網頁添加到桌面，當做一個獨立的應用運行。
當然，這里我們不討論怎麼去做一個webApp，這需要html5的相關知識和開發經驗。
這里我們只講webApp添加桌面後到啟動的相關細節。

全屏顯示：
<meta name="apple-mobile-web-app-capable" content="yes" />

系統頂欄的顏色(黑色和白色)：
<meta name="apple-mobile-app-status-bar-style" content="white" /><meta name="apple-mobile-app-status-bar-style" content="black" />

桌面程圖標(如果不設置，則圖標會顯示網頁的截圖)：
<link rel="apple-touch-icon" href="icon.png" />

但是，iOS會自作多情的給這個圖標加上高光，如果想圖標不被高光，可以這樣：
<link rel="apple-touch-icon-precomposed" href="icon.png" />

如果想給不同的設備匹配不同的icon，可以加上size屬性：
<link rel="apple-touch-icon" size="72x72" href="icon-ipad.png" /><link rel="apple-touch-icon" size="114x114" href="icon-iphone4.png" />

程序啟動的過程中，需要指定啟動畫面，否則，白屏或者截圖是讓人很不愉悅的。
iOS有ipad和iPhone/ipod touch之分。
ipad的啟動畫面是橫豎屏分開的，畫面的尺寸必須是1024*768、768*1024。
iPhone和ipod touch雖然都是豎屏的，但是卻有Retina屏幕和非Retina屏幕之分；另外它們啟動畫面的尺寸並不是屏幕的大小，而是(屏幕寬度)*(屏幕高度-20)。也就是說，非Retina的尺寸為320*460，Retina屏幕的尺寸為640*920。
引入啟動畫面是支持媒體查詢的。

因此，可以通過media query給ipad的橫豎屏引入不同的圖：
<link rel="apple-touch-start-image" href="landScape.png" madia="screen and (min-device-width:481px) and (max-device-width:1024px) and (orientation:landscape)" /><link rel="apple-touch-start-image" href="portait.png" madia="screen and (min-device-width:481px) and (max-device-width:1024px) and (orientation:portait)" />

但是媒體查詢卻搞不定Retina屏幕，所以通過js來hack：
給普通的解析度引入320*460的圖片：
<link rel="apple-touch-start-image" href="start.png"media="screen and (max-device-weidth:320px)" />Retina屏幕js:if((app.device.type === "iPhone" || app.device.type === "iPod") && app.device.version >= '5' && window.devicePixelRatio >= 2){$('head').append($('<link rel="apple-touch-startup-image" href="start-640-920.png" />'));
}

⑻ webapp開發怎麼在ios上沉浸式頭部

沉浸式通知欄Android4.4以上才支持的新特性。4.3不支持。

具體實現方式如下：

新建個公共style，設置android:fitsSystemWindows=true
<style name="AppBaseTheme" parent="android:Theme.Light.NoTitleBar"> <item name="android:fitsSystemWindows">true</item> </style>

2. 修改AndroidManifest.xml，讓所有的activity樣式默認設置為AppBaseTheme（*不同項目要靈活處理，筆者項目的activity樣式都是統一的所以這樣設置沒問題，但是實際情況下不同的activity可能調用的樣式不一樣，需要讀者自行按自己的項目來設置)

3.新增沉浸式通知欄實現類，實現原理很簡單。

1)判斷當前系統版本是不是4.4以上，判斷代碼如下：

if (VERSION.SDK_INT >= VERSION_CODES.KITKAT)

2)如果大於4.4則設置狀態欄透明化，代碼如下：

window.setFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS,WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);

3)獲取activity的根rootView(DecorView)，然後創建一個新的view stateBarView並把它添加到rootView(這裏手動給它設置個ID，下次進來時先判斷rootView是否已創建stateBarView,如果已創建則直接獲取該View這樣可以防止重復創建，導致內存泄露）

⑼ 小白入門 webApp開發中如何進行相冊/拍照

點擊用戶頭像後，彈出actionSheet，選著從相冊或是拍照；選著圖片後就調用上傳方法，上傳圖片；在上傳之前先壓縮了一下圖片。
使用流程
彈出actionSheet
/
*點擊頭像觸發*/
document.getElementById('headImage').addEventListener('tap', function() {
if (mui.os.plus) {
var a = [{
title: "拍照"
}, {
title: "從手機相冊選擇"
}];
plus.nativeUI.actionSheet({
title: "修改用戶頭像",
cancel: "取消",
buttons: a
}, function(b) { /*actionSheet 按鈕點擊事件*/
switch (b.index) {
case 0:
break;
case 1:
getImage(); /*拍照*/
break;
case 2:
galleryImg();/*打開相冊*/
break;
default:
break;
}
})
}
}, false);
拍照上傳
//拍照
function getImage() {
var c = plus.camera.getCamera();
c.captureImage(function(e) {
plus.io.resolveLocalFileSystemURL(e, function(entry) {
var s = entry.toLocalURL() + "?version=" + new Date().getTime();
uploadHead(s); /*上傳圖片*/
}, function(e) {
console.log("讀取拍照文件錯誤：" + e.message);
});
}, function(s) {
console.log("error" + s);
}, {
filename: "_doc/head.png"
})
}
從相冊選圖上傳
//本地相冊選擇
function galleryImg() {
plus.gallery.pick(function(a) {
plus.io.resolveLocalFileSystemURL(a, function(entry) {
plus.io.resolveLocalFileSystemURL("_doc/", function(root) {
root.getFile("head.png", {}, function(file) {
//文件已存在
file.remove(function() {
console.log("file remove success");
entry.To(root, 'head.png', function(e) {
var e = e.fullPath + "?version=" + new Date().getTime();
uploadHead(e); /*上傳圖片*/
//變更大圖預覽的src
//目前僅有一張圖片，暫時如此處理，後續需要通過標准組件實現
},
function(e) {
console.log(' image fail:' + e.message);
});
}, function() {
console.log("delete image fail:" + e.message);
});
}, function() {
//文件不存在
entry.To(root, 'head.png', function(e) {
var path = e.fullPath + "?version=" + new Date().getTime();
uploadHead(path); /*上傳圖片*/
},
function(e) {
console.log(' image fail:' + e.message);
});
});
}, function(e) {
console.log("get _www folder fail");
})
}, function(e) {
console.log("讀取拍照文件錯誤：" + e.message);
});
}, function(a) {}, {
filter: "image"
})
};
圖片上傳和壓縮
//上傳頭像圖片
function uploadHead(imgPath) {
console.log("imgPath = " + imgPath);
mainImage.src = imgPath;
mainImage.style.width = "60px";
mainImage.style.height = "60px";

var image = new Image();
image.src = imgPath;
image.onload = function() {
var imgData = getBase64Image(image);
/*在這里調用上傳介面*/// mui.ajax("圖片上傳介面", {// data: {// // },// dataType: 'json',// type: 'post',// timeout: 10000,// success: function(data) {// console.log('上傳成功');// },// error: function(xhr, type, errorThrown) {// mui.toast('網路異常，請稍後再試！');// }// });
}
}
//將圖片壓縮轉成base64
function getBase64Image(img) {
var canvas = document.createElement("canvas");
var width = img.width;
var height = img.height;
// calculate the width and height, constraining the proportions
if (width > height) {
if (width > 100) {
height = Math.round(height *= 100 / width);
width = 100;
}
} else {
if (height > 100) {
width = Math.round(width *= 100 / height);
height = 100;
}
}
canvas.width = width; /*設置新的圖片的寬度*/
canvas.height = height; /*設置新的圖片的長度*/
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, width, height); /*繪圖*/
var dataURL = canvas.toDataURL("image/png", 0.8);
return dataURL.replace("data:image/png;base64,", "");
}

總結
在使用中，我們可以發現，使用流程是非常清晰的；某種程度來說比原生iOS的使用還要簡單一些。

webappversion

與webappversion相關的內容