WeChat JS SDK にアクセスするには、主に公式 Web サイトのドキュメントを参照することができます。要約すると、いくつかの手順があります:
1. ドメイン名をバインドします:
まず WeChat パブリック プラットフォームにログインし、「機能設定」を入力します。 「公式アカウント設定」の「JSインターフェースセキュリティドメイン名」を入力します。
注: ログイン後、「開発者センター」で対応するインターフェースの権限を表示できます。
2. JS ファイルの導入: JS インターフェイスを呼び出す必要があるページに次の JS ファイルを導入します (https をサポート):,
備考: AMD/CMD 標準モジュールのロード方法を使用したロードをサポートします。 jquery.cookie.js、sha1 .jsの場合は、後でaccess_tokenを取得してからjsapi_ticketを取得する必要があるため、jsapi_ticketを取得する関数を保存して保存します。有効期限が切れた場合は、再度取得します。さらに、セキュリティを確保するために、これら 2 つの取得操作をサーバーに配置することをお勧めします。
4. noncestr (ランダムな文字列)、有効な jsapi_ticket (タイムスタンプ) )、url (# とそれに続く部分を除く、現在の Web ページの URL)、署名されるすべてのパラメーターをフィールド名の ASCII コードに従って小さいものから大きいもの (辞書順) に並べ替えた後、URL キーを使用します。値のペア形式 (つまり、key1=value1&key2=value2...) を使用して文字列 string1 に連結します。ここで、パラメータ名はすべて小文字であることに注意してください。
5.sha1 暗号化により署名が生成されます。
6. wx.config、wx.ready、wx.error およびその他のメソッドを構成します。wx.ready は、WeChat 共有 wx などの他のメソッドをお勧めします。 .onMenuShareTimeline、wx.onMenuShareAppMessage などは、同期実行の目的を達成するために配置されています。
サーバーインターフェイス:
//access_token是公众号的全局唯一票据
public function getTokenForJS() {
$appid = "不告诉你";
$secret = "不告诉你";
$url = "https://api.weixin.qq.com/cgi-bin/token?appid=".$appid."&secret=".$secret."&grant_type=client_credential";
$result = http_request($url);
echo $result;exit;
}
//获取ticket
public function getTicket(){
$access_token = I("get.access_token");
$url = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=".$access_token."&type=jsapi";
//$this->ajaxJSON($url);
$result = http_request($url);
echo $result;exit;
}
function http_request($url, $data = null)
{
$curl = curl_init();
curl_setopt($curl, CURLOPT_URL, $url);
curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, false);
curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, false);
if (!empty($data)) {
curl_setopt($curl, CURLOPT_POST, 1);
curl_setopt($curl, CURLOPT_POSTFIELDS, $data);
}
curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
$info = curl_exec($curl);
curl_close($curl);
return $info;
}フロントエンド js:
function setWechatJS() {
// var temp = "jsapi_ticket=kgt8ON7yVITDhtdwci0qeRukvrGB1QLAfzCcybh4a_VMg6rgB4OhdsD4O2ruRI0OUPG5VfpKlYYWXcyEeChbBw&noncestr=4df32E3jY6YneEPNfGfs×tamp=1498120656&url=";
// alert( hex_sha1(temp)); return false;
//生成随机字符串
var randomString = function(len) {
len = len || 32;
var $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678'; /****默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1****/
var maxPos = $chars.length;
var pwd = '';
for (var i = 0; i < len; i++) {
pwd += $chars.charAt(Math.floor(Math.random() * maxPos));
}
return pwd;
};
var showShareSetting = function () {
console.log("title="+title+",description="+description+",link="+url+",imgUrl="+imgUrl);
};
//wx配置参数
var jsapi_ticket = $.cookie('jsapi_ticket');
var hello2 = 'hello222';
console.log("jsapi_ticket="+jsapi_ticket);
var wxConfig = function () {
//alert('ddd='+jsapi_ticket);
//获取当前url，不含#以及之后的部分
var timestamp = new Date().getTime(); //生成签名的时间戳(当前时间)
var noncestr = randomString(20);
var signature = ''; //签名
var url = window.location.href;
var index = url.indexOf('#');
if(index !== -1 ) {
url = url.slice(0,index);
}
var temp = "jsapi_ticket="+jsapi_ticket+"&noncestr="+noncestr+"×tamp="+timestamp+"&url="+url;
signature = hex_sha1(temp);
console.log("signature="+signature);
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: 'wx0875a197e0e5bcd7', // 必填，公众号的唯一标识
timestamp: timestamp, // 必填，生成签名的时间戳
nonceStr: noncestr, // 必填，生成签名的随机串
signature: signature,// 必填，签名，见附录1
jsApiList: [
'checkJsApi',
'onMenuShareTimeline',
'onMenuShareAppMessage',
'onMenuShareQQ',
'onMenuShareWeibo',
'onMenuShareQZone'
] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
});
wx.ready(function () {
//配置成功之后回调
console.log("微信JS SDK配置成功！");
//实例化title\imgUrl
title = $('title').html(); //默认取title
description = $("meta[name='description']").attr('content');
//判断当前页面类型取缩略图
$("body img").each(function(index,element){
var width = $(element).width();
var height = $(element).height();
var Src = $(element).attr("src");
if(width>200 && height>200){//去页面中第一张宽高都大于200的图片
imgUrl = Src;
//console.log(Src);
return false;
}else{//未在页面中取到合适的图片就选取银河的logo图
imgUrl = MyPic+"/H5/img/icon.png";
}
});
showShareSetting();
//分享到朋友圈
wx.onMenuShareTimeline({
title: title, // 分享标题
link: url, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: imgUrl, // 分享图标
success: function () {
// 用户确认分享后执行的回调函数
showShareSetting();
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
});
//分享给朋友
wx.onMenuShareAppMessage({
title: title, // 分享标题
desc: description, // 分享描述
link: url, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: imgUrl, // 分享图标
type: '', // 分享类型,music、video或link，不填默认为link
dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
success: function () {
// 用户确认分享后执行的回调函数
showShareSetting();
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
});
//分享到QQ
wx.onMenuShareQQ({
title: title, // 分享标题
desc: description, // 分享描述
link: url, // 分享链接
imgUrl: imgUrl, // 分享图标
success: function () {
// 用户确认分享后执行的回调函数
showShareSetting();
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
});
//分享到QQ空间
wx.onMenuShareQZone({
title: title, // 分享标题
desc: description, // 分享描述
link: url, // 分享链接
imgUrl: imgUrl, // 分享图标
success: function () {
// 用户确认分享后执行的回调函数
showShareSetting();
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
});
});
wx.error(function(res){
console.log("微信JS SDK配置错误！");
// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
});
};
//待分享生成的标题、链接、缩略图
var title,url,imgUrl,description;
//本地cookie查找不到缓存再去请求网络
if(typeof (jsapi_ticket) == 'undefined' || jsapi_ticket == ''){
//alert('aaa='+jsapi_ticket);
//以下步骤分别获取全局access_token、jsapi_ticket、signature
$.get(MyUrl+"getTokenForJS",function (data) {
var access_token = data['access_token'];
//获取全局access_token,以及7200秒之后刷新的问题
//先出cookie中取,如果没有，
$.get(MyUrl+"getTicket?access_token="+access_token,function(data){
jsapi_ticket = data['ticket'];
//保存当前jsapi_ticket
var date = new Date();
date.setTime(date.getTime()+7200*1000);//只能这么写，10表示10秒钟
//?替换成分钟数如果为60分钟则为 60 * 60 *1000
$.cookie('jsapi_ticket',jsapi_ticket,{expires:date,path:'/'}); //有效期7200秒
console.log("jsapi_ticket="+jsapi_ticket);
//alert('ccc='+jsapi_ticket);
wxConfig();
},'json');
},'json');
}else {
//alert('bbb='+jsapi_ticket);
wxConfig();
}
}以上がWeChat JS SDK へのアクセスに関するメモを要約して共有するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
