WeChat アプレット
WeChatの開(kāi)発
寫(xiě)真の選択、寫(xiě)真のアップロード、寫(xiě)真のプレビューとダウンロードのための WeChat jsapi 開(kāi)発方法
寫(xiě)真の選択、寫(xiě)真のアップロード、寫(xiě)真のプレビューとダウンロードのための WeChat jsapi 開(kāi)発方法
Mar 26, 2017 pm 02:15 PM
パラメータ
| 説明 | |
| appId | 公式アカウントの一意の識(shí)別子アプリケーションID |
| timestamp | 署名を生成するタイムスタンプ |
| nonceStr | 署名付きランダムを生成するstring |
| signature | Signature |
上の表の 4 つのパラメーターは、WeChat jsapi への呼び出しを初期化するための資格情報(bào)です。その使用方法は前のセクションで繰り返し説明したため、投稿しません。上記の 4 つのパラメータをここで生成する方法
完全な JSP コードは次のとおりです:
<%@ 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測(cè)試-V型知識(shí)庫(kù)</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>歡迎來(lái)到微信jsapi測(cè)試界面-V型知識(shí)庫(kù)</h3></center>
<p>基礎(chǔ)接口之判斷當(dāng)前客戶(hù)端是否支持指定的js接口</p>
<input type="button" value="checkJSAPI" id="checkJsApi"><br>
<h3 id="menu-image">圖像接口</h3>
<span class="desc">拍照或從手機(jī)相冊(cè)中選圖接口</span><br>
<button class="btn btn_primary" id="chooseImage">chooseImage</button><br>
<span class="desc">預(yù)覽圖片接口</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, // 開(kāi)啟調(diào)試模式,調(diào)用的所有api的返回值會(huì)在客戶(hù)端alert出來(lái)，若要查看傳入的參數(shù)，可以在pc端打開(kāi)，參數(shù)信息會(huì)通過(guò)log打出，僅在pc端時(shí)才會(huì)打印。
appId: '${appId}', // 必填，公眾號(hào)的唯一標(biāo)識(shí)
timestamp: '${ timestamp}' , // 必填，生成簽名的時(shí)間戳
nonceStr: '${ nonceStr}', // 必填，生成簽名的隨機(jī)串
signature: '${ signature}',// 必填，簽名，見(jiàn)附錄1
jsApiList: ['checkJsApi',
'chooseImage',
'previewImage',
'uploadImage',
'downloadImage'
] // 必填，需要使用的JS接口列表，所有JS接口列表見(jiàn)附錄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]);//顯示圖片到頁(yè)面上
}
});
};
// 5.2 圖片預(yù)覽
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('請(qǐng)先使用 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('請(qǐng)先使用 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. 上記のコードの HTML ボタン コード関數(shù)は非常に明確に説明されています。ボタンをクリックするたびに、js 関數(shù)がトリガーされます。 |
3. 上記のコードを通じて、畫(huà)像を WeChat サーバーにアップロードしましたが、WeChat サーバーにアップロードした畫(huà)像は 3 日間しか保存できないため、アップロード後、畫(huà)像をローカル サーバーにダウンロードする必要があります。ここでは、「WeChat に移動(dòng)」を使用してマルチメディア インターフェイスをダウンロードします http://file.api.weixin.qq.com/cgi-bin/media/get?access_token=ACCESS_TOKEN&media_id=MEDIA_ID ここで、media_id は上記のサーバー ID です。 畫(huà)像をローカルにダウンロードできるように、コードは次のとおりです
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型知識(shí)庫(kù) www.vxzsk.com
*
*/
public class DloadImgUtil {
/**
* 根據(jù)內(nèi)容類(lèi)型判斷文件擴(kuò)展名
*
* @param contentType 內(nèi)容類(lè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 接口訪(fǎng)問(wèn)憑證
* @param mediaId 媒體文件id
* @param savePath 文件在本地服務(wù)器上的存儲(chǔ)路徑
* */
public static String downloadMedia(String accessToken, String mediaId, String savePath) {
try {
accessToken = DloadImgUtil.getAccessToken();
} catch (IOException e) {
e.printStackTrace();
}
String filePath = null;
// 拼接請(qǐng)求地址
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)容類(lèi)型獲取擴(kuò)展名
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
* 來(lái)源www.vxzsk.com
* @return
*/
public static String getAccessToken(){
String appid="你公眾號(hào)基本設(shè)置里的應(yīng)用id";//應(yīng)用ID
String appSecret="你公眾號(hào)基本設(shè)置里的應(yīng)用密鑰";//(應(yīng)用密鑰)
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請(qǐng)求
* @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;
}
}| 効果の畫(huà)像は次のとおりです |
以上が寫(xiě)真の選択、寫(xiě)真のアップロード、寫(xiě)真のプレビューとダウンロードのための WeChat jsapi 開(kāi)発方法の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。
ホットAIツール
Undress AI Tool
脫衣畫(huà)像を無(wú)料で
Undresser.AI Undress
リアルなヌード寫(xiě)真を作成する AI 搭載アプリ
AI Clothes Remover
寫(xiě)真から衣服を削除するオンライン AI ツール。
Clothoff.io
AI衣類(lèi)リムーバー
Video Face Swap
完全無(wú)料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡(jiǎn)単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無(wú)料のコードエディター
SublimeText3 中國(guó)語(yǔ)版
中國(guó)語(yǔ)版、とても使いやすい
ゼンドスタジオ 13.0.1
強(qiáng)力な PHP 統(tǒng)合開(kāi)発環(huán)境
ドリームウィーバー CS6
ビジュアル Web 開(kāi)発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
PHP WeChat 開(kāi)発: メッセージの暗號(hào)化と復(fù)號(hào)化を?qū)g裝する方法
May 13, 2023 am 11:40 AM
PHP は、Web 開(kāi)発およびサーバーサイド プログラミング、特に WeChat 開(kāi)発で広く使用されているオープン ソースのスクリプト言語(yǔ)です?，F(xiàn)在、ますます多くの企業(yè)や開(kāi)発者が WeChat 開(kāi)発に PHP を使用し始めています。これは、PHP が本當(dāng)に學(xué)びやすく、使いやすい開(kāi)発言語(yǔ)となっているためです。 WeChat の開(kāi)発では、メッセージの暗號(hào)化と復(fù)號(hào)化はデータのセキュリティに関わるため、非常に重要な問(wèn)題となります。暗號(hào)化と復(fù)號(hào)化の方法を持たないメッセージの場(chǎng)合、ハッカーは簡(jiǎn)単にデータを入手でき、ユーザーに脅威を與える可能性があります。
PHP WeChat開(kāi)発：投票機(jī)能の実裝方法
May 14, 2023 am 11:21 AM
WeChat パブリック アカウントの開(kāi)発では、投票機(jī)能がよく使用されます。投票機(jī)能はユーザーが気軽に交流に參加できるほか、イベントの開(kāi)催や意見(jiàn)調(diào)査などにも重要なツールです。この記事では、PHPを使用してWeChatの投票機(jī)能を?qū)g裝する方法を紹介します。 WeChat公式アカウントの認(rèn)証を取得する まずはWeChat公式アカウントの認(rèn)証を取得する必要があります。 WeChatパブリックプラットフォームでは、WeChatパブリックアカウント、公式アカウント、およびパブリックアカウントに対応するトークンのAPIアドレスを設(shè)定する必要があります。 PHP言語(yǔ)を使用した開(kāi)発の過(guò)程では、WeChatが公式に提供するPHを使用する必要があります
PHP を使用して WeChat マス メッセージング ツールを開(kāi)発する
May 13, 2023 pm 05:00 PM
WeChat の人気に伴い、マーケティング ツールとして WeChat を使用し始める企業(yè)が増えています。 WeChat グループ メッセージング機(jī)能は、企業(yè)が WeChat マーケティングを行うための重要な手段の 1 つです。ただし、手動(dòng)送信のみに頼ると、マーケターにとって非常に時(shí)間と労力がかかる作業(yè)になります。したがって、WeChat マス メッセージング ツールを開(kāi)発することが特に重要です。この記事では、PHP を使用して WeChat マス メッセージング ツールを開(kāi)発する方法を紹介します。 1. 準(zhǔn)備作業(yè) WeChat マス メッセージング ツールを開(kāi)発するには、次の技術(shù)點(diǎn)を習(xí)得する必要があります。 PHP WeChat パブリック プラットフォーム開(kāi)発の基礎(chǔ)知識(shí) 開(kāi)発ツール: Sub
PHP WeChat 開(kāi)発: カスタマー サービスのチャット ウィンドウ管理を?qū)g裝する方法
May 13, 2023 pm 05:51 PM
WeChat は現(xiàn)在、世界最大のユーザーベースを持つソーシャル プラットフォームの 1 つであり、モバイル インターネットの普及に伴い、ますます多くの企業(yè)が WeChat マーケティングの重要性を認(rèn)識(shí)し始めています。 WeChat マーケティングを?qū)g施する場(chǎng)合、顧客サービスは重要な部分です。カスタマー サービスのチャット ウィンドウをより適切に管理するために、WeChat 開(kāi)発に PHP 言語(yǔ)を使用できます。 1. PHP WeChat 開(kāi)発の概要 PHP は、Web 開(kāi)発の分野で広く使用されているオープン ソースのサーバー側(cè)スクリプト言語(yǔ)です。 WeChat パブリック プラットフォームが提供する開(kāi)発インターフェイスと組み合わせると、PHP 言語(yǔ)を使用して WeChat を?qū)g行できます。
PHP WeChat 開(kāi)発: ユーザータグ管理を?qū)g裝する方法
May 13, 2023 pm 04:31 PM
WeChat パブリック アカウントの開(kāi)発において、ユーザー タグ管理は非常に重要な機(jī)能であり、開(kāi)発者がユーザーをよりよく理解し、管理できるようになります。この記事では、PHPを使用してWeChatのユーザータグ管理機(jī)能を?qū)g裝する方法を紹介します。 1. WeChat ユーザーの openid を取得する WeChat ユーザータグ管理機(jī)能を使用する前に、まずユーザーの openid を取得する必要があります。 WeChat パブリック アカウントの開(kāi)発では、ユーザーの承認(rèn)を通じて openid を取得するのが一般的です。ユーザー認(rèn)証が完了したら、次のコードを通じてユーザーを取得できます。
PHP WeChat 開(kāi)発: グループ メッセージ送信レコードの実裝方法
May 13, 2023 pm 04:31 PM
WeChat が人々の生活においてますます重要なコミュニケーション ツールになるにつれ、その機(jī)敏なメッセージング機(jī)能はすぐに多くの企業(yè)や個(gè)人に支持されるようになりました。企業(yè)にとって、WeChat をマーケティング プラットフォームとして開(kāi)発することがトレンドになっており、WeChat 開(kāi)発の重要性が徐々に顕著になってきています。その中でも、グループ送信機(jī)能はさらに広く使用されているため、PHP プログラマとしてグループ メッセージ送信レコードを?qū)g裝するにはどうすればよいでしょうか?以下に簡(jiǎn)単に紹介します。 1. WeChat パブリック アカウントに関する開(kāi)発知識(shí)を理解する グループ メッセージ送信レコードの実裝方法を理解する前に、
PHP を使用して WeChat パブリック アカウント開(kāi)発を?qū)g裝する手順
Jun 27, 2023 pm 12:26 PM
PHP を使用して WeChat 公開(kāi)アカウントを開(kāi)発する方法 WeChat 公開(kāi)アカウントは、多くの企業(yè)にとってプロモーションと交流のための重要なチャネルとなっており、一般的に使用される Web 言語(yǔ)として PHP を使用して WeChat 公開(kāi)アカウントを開(kāi)発することもできます。この記事では、PHP を使用して WeChat 公開(kāi)アカウントを開(kāi)発する具體的な手順を紹介します。ステップ1：WeChat公式アカウントの開(kāi)発者アカウントを取得する WeChat公式アカウントの開(kāi)発を開(kāi)始する前に、WeChat公式アカウントの開(kāi)発者アカウントを申請(qǐng)する必要があります。具體的な登録プロセスについては、WeChat パブリック プラットフォームの公式 Web サイトを參照してください。
WeChat 開(kāi)発に PHP を使用するにはどうすればよいですか?
May 21, 2023 am 08:37 AM
インターネットとモバイル スマート デバイスの発展に伴い、WeChat はソーシャルおよびマーケティング分野に欠かせないものになりました。デジタル化が進(jìn)むこの時(shí)代において、WeChat 開(kāi)発に PHP を使用する方法が多くの開(kāi)発者の焦點(diǎn)になっています。この記事では主に、PHP を WeChat 開(kāi)発に使用する方法とそのヒントや注意事項(xiàng)を紹介します。 1. 開(kāi)発環(huán)境の準(zhǔn)備 WeChat を開(kāi)発する前に、まず対応する開(kāi)発環(huán)境を準(zhǔn)備する必要があります。具體的には、PHP オペレーティング環(huán)境と WeChat パブリック プラットフォームをインストールする必要があります。
