WeChat-Applet
WeChat-Entwicklung
WeChat JSAPI-Entwicklungsmethode zum Ausw?hlen von Bildern, Hochladen von Bildern, Anzeigen der Vorschau und Herunterladen von Bildern
WeChat JSAPI-Entwicklungsmethode zum Ausw?hlen von Bildern, Hochladen von Bildern, Anzeigen der Vorschau und Herunterladen von Bildern
Mar 26, 2017 pm 02:15 PM
Parameter
| ? | 描述 |
| appId | 公眾號的唯一標識 ?應用id |
| timestamp | 生成簽名的時間戳 |
| nonceStr | 生成簽名的隨機串 |
| signature | 簽名 |
Die vier Parameter in der obigen Tabelle sind die Anmeldeinformationen für die Initialisierung des WeChat-jsapi-Anrufs. Wir haben in den vorherigen Abschnitten wiederholt erkl?rt, wie sie verwendet werden, daher werden wir sie hier nicht ver?ffentlichen So generieren Sie die oben genannten vier Parameter:
Der vollst?ndige JSP-Code lautet wie folgt:
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>微信jsapi測試-V型知識庫</title>
<meta name="viewport" content="width=320.1,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
<script src="http://res.wx.qq.com/open/js/jweixin-1.1.0.js"> </script>
<scriptsrc="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
</head>
<body>
<center><h3>歡迎來到微信jsapi測試界面-V型知識庫</h3></center>
<p>基礎接口之判斷當前客戶端是否支持指定的js接口</p>
<input type="button" value="checkJSAPI" id="checkJsApi"><br>
<h3 id="menu-image">圖像接口</h3>
<span class="desc">拍照或從手機相冊中選圖接口</span><br>
<button class="btn btn_primary" id="chooseImage">chooseImage</button><br>
<span class="desc">預覽圖片接口</span><br>
<button class="btn btn_primary" id="previewImage">previewImage</button><br>
<span class="desc">上傳圖片接口</span><br>
<button class="btn btn_primary" id="uploadImage">uploadImage</button><br>
<span class="desc">下載圖片接口</span><br>
<button class="btn btn_primary" id="downloadImage">downloadImage</button><br>
顯示圖片<img src="/static/imghw/default1.png" data-src=""id=" class="lazy" alt=""id="faceImg"data-bd-imgshare-binded="1">
<br>
<script type="text/javascript">
wx.config({
debug: true, // 開啟調(diào)試模式,調(diào)用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數(shù)，可以在pc端打開，參數(shù)信息會通過log打出，僅在pc端時才會打印。
appId: '${appId}', // 必填，公眾號的唯一標識
timestamp: '${ timestamp}' , // 必填，生成簽名的時間戳
nonceStr: '${ nonceStr}', // 必填，生成簽名的隨機串
signature: '${ signature}',// 必填，簽名，見附錄1
jsApiList: ['checkJsApi',
'chooseImage',
'previewImage',
'uploadImage',
'downloadImage'
] // 必填，需要使用的JS接口列表，所有JS接口列表見附錄2
});
wx.ready(function(){
// 5 圖片接口
// 5.1 拍照、本地選圖
var images = {
localId: [],
serverId: []
};
document.querySelector('#chooseImage').onclick = function () {
wx.chooseImage({
success: function (res) {
images.localId = res.localIds;
alert('已選擇 ' + res.localIds.length + ' 張圖片');
$("#faceImg").attr("src", res.localIds[0]);//顯示圖片到頁面上
}
});
};
// 5.2 圖片預覽
document.querySelector('#previewImage').onclick = function () {
wx.previewImage({
current: 'http://www.vxzsk.com/upload//bf04c9b5-5699-421d-900e-3b68bbe58a8920160816.jpg',
urls: [
'http://www.vxzsk.com/upload//bf04c9b5-5699-421d-900e-3b68bbe58a8920160816.jpg',
'http://www.vxzsk.com/upload//bf04c9b5-5699-421d-900e-3b68bbe58a8920160816.jpg',
'http://www.vxzsk.com/upload//bf04c9b5-5699-421d-900e-3b68bbe58a8920160816.jpg'
]
});
};
// 5.3 上傳圖片
document.querySelector('#uploadImage').onclick = function () {
if (images.localId.length == 0) {
alert('請先使用 chooseImage 接口選擇圖片');
return;
}
var i = 0, length = images.localId.length;
images.serverId = [];
function upload() {
wx.uploadImage({
localId: images.localId[i],
success: function (res) {
i++;
//alert('已上傳：' + i + '/' + length);
images.serverId.push(res.serverId);
if (i < length) {
upload();
}
},
fail: function (res) {
alert(JSON.stringify(res));
}
});
}
upload();
};
// 5.4 下載圖片
document.querySelector('#downloadImage').onclick = function () {
if (images.serverId.length === 0) {
alert('請先使用 uploadImage 上傳圖片');
return;
}
var i = 0, length = images.serverId.length;
images.localId = [];
function download() {
wx.downloadImage({
serverId: images.serverId[i],
success: function (res) {
i++;
alert('已下載：' + i + '/' + length);
images.localId.push(res.localId);
if (i < length) {
download();
}
}
});
}
download();
};
});
//初始化jsapi接口 狀態(tài)
wx.error(function (res) {
alert("調(diào)用微信jsapi返回的狀態(tài):"+res.errMsg);
});
</script>
</body>
</html> |
1. Die Funktion des HTML-Schaltfl?chencodes war Sehr klar beschrieben: Jedes Mal, wenn auf eine Schaltfl?che geklickt wird, wird eine js-Funktion ausgel?st.
2. Bevor Sie auf die Schaltfl?che ?Bild hochladen“ klicken, wird die Server-ID zurückgegeben jsapi-Upload-Schnittstelle. Wo lade ich meine Bilder hoch? Tats?chlich haben wir die Bilder auf den WeChat-Server hochgeladen, bei denen es sich um tempor?re Materialien handelt. Sie k?nnen sich bei der offiziellen WeChat-Verwaltungsplattform anmelden, um sie anzuzeigen. Sie k?nnen auch die WeChat-Schnittstelle für tempor?re Materialien aufrufen, um die Bilder zu erhalten.
3. Mit dem obigen Code haben wir das Bild auf den WeChat-Server hochgeladen, aber das von uns auf den WeChat-Server hochgeladene Bild kann nur 3 Tage lang gespeichert werden, sodass wir das Bild nach dem Hochladen herunterladen müssen Zu unserem lokalen Server wird hier die WeChat-Download-Multimedia-Schnittstelle verwendet: http://file.api.weixin.qq.com/cgi-bin/media/get?access_token=ACCESS_TOKEN&media_id=MEDIA_ID, wobei media_id unsere Server-ID oben ist , damit wir das Bild lokal herunterladen k?nnen. Der Code lautet wie folgt:
package com.test.weixin;
import net.sf.json.JSONObject;
import org.apache.log4j.Level;
import org.apache.log4j.LogManager;
import org.apache.log4j.Logger;
import org.apache.log4j.Priority;
import org.springframework.util.StringUtils;
import java.io.*;
import java.net.HttpURLConnection;
import java.net.MalformedURLException;
import java.net.URL;
import java.net.URLConnection;
/****
*
* @author V型知識庫 www.vxzsk.com
*
*/
public class DloadImgUtil {
/**
* 根據(jù)內(nèi)容類型判斷文件擴展名
*
* @param contentType 內(nèi)容類型
* @return
*/
public static String getFileexpandedName(String contentType) {
String fileEndWitsh = "";
if ("image/jpeg".equals(contentType))
fileEndWitsh = ".jpg";
else if ("audio/mpeg".equals(contentType))
fileEndWitsh = ".mp3";
else if ("audio/amr".equals(contentType))
fileEndWitsh = ".amr";
else if ("video/mp4".equals(contentType))
fileEndWitsh = ".mp4";
else if ("video/mpeg4".equals(contentType))
fileEndWitsh = ".mp4";
return fileEndWitsh;
}
/**
* 獲取媒體文件
* @param accessToken 接口訪問憑證
* @param mediaId 媒體文件id
* @param savePath 文件在本地服務器上的存儲路徑
* */
public static String downloadMedia(String accessToken, String mediaId, String savePath) {
try {
accessToken = DloadImgUtil.getAccessToken();
} catch (IOException e) {
e.printStackTrace();
}
String filePath = null;
// 拼接請求地址
String requestUrl = "http://file.api.weixin.qq.com/cgi-bin/media/get?access_token=ACCESS_TOKEN&media_id=MEDIA_ID";
requestUrl = requestUrl.replace("ACCESS_TOKEN", accessToken).replace("MEDIA_ID", mediaId);
try {
URL url = new URL(requestUrl);
HttpURLConnection conn = (HttpURLConnection) url.openConnection();
conn.setDoInput(true);
conn.setRequestMethod("GET");
if (!savePath.endsWith("/")) {
savePath += "/";
}
// 根據(jù)內(nèi)容類型獲取擴展名
String fileExt = DloadImgUtil .getFileexpandedName(conn.getHeaderField("Content-Type"));
// 將mediaId作為文件名
filePath = savePath + mediaId + fileExt;
BufferedInputStream bis = new BufferedInputStream(conn.getInputStream());
FileOutputStream fos = new FileOutputStream(new File(filePath));
byte[] buf = new byte[8096];
int size = 0;
while ((size = bis.read(buf)) != -1)
fos.write(buf, 0, size);
fos.close();
bis.close();
conn.disconnect();
String info = String.format("下載媒體文件成功，filePath=" + filePath);
System.out.println(info);
} catch (Exception e) {
filePath = null;
String error = String.format("下載媒體文件失?。?s", e);
System.out.println(error);
}
return filePath;
}
/***
* 獲取acess_token
* 來源www.vxzsk.com
* @return
*/
public static String getAccessToken(){
String appid="你公眾號基本設置里的應用id";//應用ID
String appSecret="你公眾號基本設置里的應用密鑰";//(應用密鑰)
String url ="https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid="+appid+"&secret="+appSecret+"";
String backData=DloadImgUtil.sendGet(url, "utf-8", 10000);
String accessToken = (String) JSONObject.fromObject(backData).get("access_token");
return accessToken;
}
/***
* 模擬get請求
* @param url
* @param charset
* @param timeout
* @return
*/
public static String sendGet(String url, String charset, int timeout)
{
String result = "";
try
{
URL u = new URL(url);
try
{
URLConnection conn = u.openConnection();
conn.connect();
conn.setConnectTimeout(timeout);
BufferedReader in = new BufferedReader(new InputStreamReader(conn.getInputStream(), charset));
String line="";
while ((line = in.readLine()) != null)
{
result = result + line;
}
in.close();
} catch (IOException e) {
return result;
}
}
catch (MalformedURLException e)
{
return result;
}
return result;
}
} |
Das Rendering ist wie folgt:
Die Bilddetails, die angezeigt werden, wenn Sie das Bild ausw?hlen
Die Server-ID wird nach Erfolg zurückgegeben hochladen
Das obige ist der detaillierte Inhalt vonWeChat JSAPI-Entwicklungsmethode zum Ausw?hlen von Bildern, Hochladen von Bildern, Anzeigen der Vorschau und Herunterladen von Bildern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Hei?e KI -Werkzeuge
Undress AI Tool
Ausziehbilder kostenlos
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Clothoff.io
KI-Kleiderentferner
Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem v?llig kostenlosen KI-Gesichtstausch-Tool aus!
Hei?er Artikel
Hei?e Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
PHP WeChat-Entwicklung: So implementieren Sie die Nachrichtenverschlüsselung und -entschlüsselung
May 13, 2023 am 11:40 AM
PHP ist eine Open-Source-Skriptsprache, die in der Webentwicklung und serverseitigen Programmierung, insbesondere in der WeChat-Entwicklung, weit verbreitet ist. Heutzutage beginnen immer mehr Unternehmen und Entwickler, PHP für die WeChat-Entwicklung zu verwenden, da es sich zu einer wirklich leicht zu erlernenden und benutzerfreundlichen Entwicklungssprache entwickelt hat. Bei der WeChat-Entwicklung sind die Nachrichtenverschlüsselung und -entschlüsselung ein sehr wichtiges Thema, da sie die Datensicherheit betreffen. Bei Nachrichten ohne Verschlüsselungs- und Entschlüsselungsmethoden k?nnen Hacker leicht an die Daten gelangen, was eine Bedrohung für Benutzer darstellt.
PHP WeChat-Entwicklung: So implementieren Sie die Abstimmungsfunktion
May 14, 2023 am 11:21 AM
Bei der Entwicklung ?ffentlicher WeChat-Konten wird h?ufig die Abstimmungsfunktion verwendet. Die Voting-Funktion ist eine tolle M?glichkeit für Nutzer, sich schnell an Interaktionen zu beteiligen und ist darüber hinaus ein wichtiges Tool für die Durchführung von Veranstaltungen und Meinungsumfragen. In diesem Artikel erfahren Sie, wie Sie PHP zur Implementierung der WeChat-Abstimmungsfunktion verwenden. Holen Sie sich die Autorisierung des offiziellen WeChat-Kontos. Zuerst müssen Sie die Autorisierung des offiziellen WeChat-Kontos einholen. Auf der ?ffentlichen WeChat-Plattform müssen Sie die API-Adresse des ?ffentlichen WeChat-Kontos, des offiziellen Kontos und des dem ?ffentlichen Konto entsprechenden Tokens konfigurieren. Bei unserer Entwicklung mit der PHP-Sprache müssen wir den von WeChat offiziell bereitgestellten PH verwenden
Verwendung von PHP zur Entwicklung von WeChat-Massen-Messaging-Tools
May 13, 2023 pm 05:00 PM
Mit der Popularit?t von WeChat beginnen immer mehr Unternehmen, es als Marketinginstrument zu nutzen. Die WeChat-Gruppen-Messaging-Funktion ist für Unternehmen eines der wichtigen Mittel zur Durchführung von WeChat-Marketing. Wenn Sie sich jedoch nur auf den manuellen Versand verlassen, ist dies für Vermarkter eine ?u?erst zeitaufw?ndige und mühsame Aufgabe. Daher ist es besonders wichtig, ein WeChat-Massen-Messaging-Tool zu entwickeln. In diesem Artikel wird erl?utert, wie Sie mit PHP WeChat-Massen-Messaging-Tools entwickeln. 1. Vorbereitungsarbeiten Um WeChat-Massen-Messaging-Tools zu entwickeln, müssen wir die folgenden technischen Punkte beherrschen: Grundkenntnisse der PHP-Entwicklung der ?ffentlichen WeChat-Plattform Entwicklungstools: Sub
PHP WeChat-Entwicklung: So implementieren Sie die Verwaltung von Kundendienst-Chatfenstern
May 13, 2023 pm 05:51 PM
WeChat ist derzeit eine der sozialen Plattformen mit der gr??ten Nutzerbasis weltweit. Mit der Popularit?t des mobilen Internets beginnen immer mehr Unternehmen die Bedeutung des WeChat-Marketings zu erkennen. Bei der Durchführung von WeChat-Marketing ist der Kundenservice ein entscheidender Bestandteil. Um das Kundenservice-Chatfenster besser verwalten zu k?nnen, k?nnen wir die PHP-Sprache für die WeChat-Entwicklung verwenden. 1. Einführung in die PHP-WeChat-Entwicklung PHP ist eine serverseitige Open-Source-Skriptsprache, die im Bereich der Webentwicklung weit verbreitet ist. In Kombination mit der Entwicklungsschnittstelle der ?ffentlichen WeChat-Plattform k?nnen wir die PHP-Sprache zur Durchführung von WeChat verwenden
PHP WeChat-Entwicklung: So implementieren Sie die Benutzer-Tag-Verwaltung
May 13, 2023 pm 04:31 PM
Bei der Entwicklung ?ffentlicher WeChat-Konten ist die Benutzer-Tag-Verwaltung eine sehr wichtige Funktion, die es Entwicklern erm?glicht, ihre Benutzer besser zu verstehen und zu verwalten. In diesem Artikel wird erl?utert, wie Sie mit PHP die WeChat-Benutzer-Tag-Verwaltungsfunktion implementieren. 1. Erhalten Sie die OpenID des WeChat-Benutzers. Bevor wir die WeChat-Benutzer-Tag-Verwaltungsfunktion verwenden, müssen wir zun?chst die OpenID des Benutzers abrufen. Bei der Entwicklung ?ffentlicher WeChat-Konten ist es üblich, die OpenID durch Benutzerautorisierung zu erhalten. Nachdem die Benutzerautorisierung abgeschlossen ist, k?nnen wir den Benutzer über den folgenden Code abrufen
PHP WeChat-Entwicklung: So implementieren Sie Datens?tze zum Senden von Gruppennachrichten
May 13, 2023 pm 04:31 PM
Da WeChat zu einem immer wichtigeren Kommunikationsmittel im Leben der Menschen wird, wird seine agile Messaging-Funktion schnell von einer gro?en Anzahl von Unternehmen und Einzelpersonen bevorzugt. Für Unternehmen ist die Entwicklung von WeChat zu einer Marketingplattform zu einem Trend geworden, und die Bedeutung der WeChat-Entwicklung ist nach und nach immer wichtiger geworden. Unter diesen wird die Gruppensendefunktion noch h?ufiger verwendet. Wie implementiert man als PHP-Programmierer Datens?tze zum Senden von Gruppennachrichten? Im Folgenden erhalten Sie eine kurze Einführung. 1. Verstehen Sie die Entwicklungskenntnisse im Zusammenhang mit ?ffentlichen WeChat-Konten, bevor Sie verstehen, wie Datens?tze zum Senden von Gruppennachrichten implementiert werden
Schritte zur Implementierung der Entwicklung eines ?ffentlichen WeChat-Kontos mit PHP
Jun 27, 2023 pm 12:26 PM
So verwenden Sie PHP zur Entwicklung ?ffentlicher WeChat-Konten. ?ffentliche WeChat-Konten sind für viele Unternehmen zu einem wichtigen Kanal für Werbung und Interaktion geworden. PHP als h?ufig verwendete Websprache kann auch zur Entwicklung ?ffentlicher WeChat-Konten verwendet werden. In diesem Artikel werden die spezifischen Schritte zur Verwendung von PHP zum Entwickeln ?ffentlicher WeChat-Konten vorgestellt. Schritt 1: Erhalten Sie das Entwicklerkonto des offiziellen WeChat-Kontos. Bevor Sie mit der Entwicklung des offiziellen WeChat-Kontos beginnen, müssen Sie ein Entwicklerkonto des offiziellen WeChat-Kontos beantragen. Informationen zum spezifischen Registrierungsprozess finden Sie auf der offiziellen Website der ?ffentlichen WeChat-Plattform
Wie verwende ich PHP für die WeChat-Entwicklung?
May 21, 2023 am 08:37 AM
Mit der Entwicklung des Internets und mobiler Smart-Ger?te ist WeChat zu einem unverzichtbaren Bestandteil im sozialen Bereich und im Marketing geworden. In diesem zunehmend digitalen Zeitalter ist die Verwendung von PHP für die WeChat-Entwicklung zum Fokus vieler Entwickler geworden. In diesem Artikel werden haupts?chlich die relevanten Wissenspunkte zur Verwendung von PHP für die WeChat-Entwicklung sowie einige Tipps und Vorsichtsma?nahmen vorgestellt. 1. Vorbereitung der Entwicklungsumgebung Bevor Sie WeChat entwickeln, müssen Sie zun?chst die entsprechende Entwicklungsumgebung vorbereiten. Insbesondere müssen Sie die PHP-Betriebsumgebung und die ?ffentliche WeChat-Plattform installieren
