マイニングピットへの旅行を共有することを許可されたWeChatWebページ

その他 2021-02-27 10:26:48 訪問数: null

要求する

まず、WeChatブラウザに表示される通常のhtmlページである要件について説明します。ユーザーのアバターとニックネームをページに表示する必要があります。ここではWeb認証が必要です。次に、ページをモーメントや友達と共有できます。共有コンテンツをカスタマイズする必要があります

WeChat認証

Webページに表示するページとしてindex.phpファイルを作成します

<?php
header("Content-type: text/html; charset=utf-8");

$appid = '66666';
$secret = '77777';
//微信授权成功后，会请求该页面，并带有code参数
$code = $_GET['code']?:'';
$userinfo = [];
if($code){
    
    
	//使用code凭证，获取access_toekn和用户openid
    $code_json = file_get_contents('https://api.weixin.qq.com/sns/oauth2/access_token?appid='.$appid.'&secret='.$secret.'&code='.$code.'&grant_type=authorization_code');
    $code_res = json_decode($code_json,true);
    //使用access_toen和openid获取用户的基本信息
    //然后，下面的html页面，可以根据userinfo的值，来展示用户的头像和昵称
    if(isset($code_res['access_token'])){
    
    
        $user_json = file_get_contents('https://api.weixin.qq.com/sns/userinfo?access_token='.$code_res['access_token'].'&openid='.$code_res['openid'].'&lang=zh_CN');
        $userinfo = json_decode($user_json,true);
    }
}


?>
//下面是html页面
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="content-type" content="text/html" />
    <title>hell world</title>
</head>
<body>
<input type="button" value="点击获取授权" onclick="get_root();" />
<script>
function get_root(){
    
    
	//微信授权后的回调地址，这里设置为本页面。回调地址的域名必须在微信公众号中设置为安全域名
	var local = 'http://www.mine.com//index.php';
	//微信授权地址
    var url = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=66666&redirect_uri=' + encodeURIComponent(local) + '&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect';
    window.location.href = url;
}
</script>
</body>
</html>

WeChatの承認プロセスは単純なので、繰り返しません

共有する

まず、share.phpページを作成して、JSSDKの構成情報を取得します。

<?php
header("Content-type: text/html; charset=utf-8");

$appid = '66666';
$secret = '777777';
//获取缓存数据
$file_cache_str = file_get_contents('cache.txt');
$file_cache = [];
if($file_cache_str){
    
    
    $file_cache = json_decode($file_cache_str,true);
}
//获取access_token凭证
if($file_cache && isset($file_cache['access_token']) && $file_cache['access_token']['time'] > time()){
    
    
    $access_token = $file_cache['access_token']['value'];
}else{
    
    
    $token_json = file_get_contents('https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid='.$appid.'&secret='.$secret);
    $token_info = json_decode($token_json,true);
    $access_token = $token_info['access_token'];
    $file_cache['access_token'] = ['value'=>$access_token,'time'=>time()+7000];
    $res = file_put_contents('cache.txt',json_encode($file_cache));
    //var_dump($res);exit;
}
//使用access_token获取jsapi_ticket凭证
if($file_cache && isset($file_cache['jsapi_ticket']) && $file_cache['jsapi_ticket']['time'] > time()){
    
    
    $jsapi_ticket = $file_cache['jsapi_ticket']['value'];
}else{
    
    
    $ticket_json =file_get_contents('https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token='.$access_token.'&type=jsapi');
    $ticket_info = json_decode($ticket_json,true);
    $jsapi_ticket = $ticket_info['ticket'];
    $file_cache['jsapi_ticket'] = ['value'=>$jsapi_ticket,'time'=>time()+7000];
    file_put_contents('cache.txt',json_encode($file_cache));
}
//获取时间戳
$time = time();
//设置随机字符串
$rand_str = 'Wm3WZYTPz0fdfggerrtqq';
//获取分享页面完整的url地址
$host = $_POST['host'];
//获取签名字符串
$str = 'jsapi_ticket='.$jsapi_ticket.'&noncestr='.$rand_str.'&timestamp='.$time.'&url='.$host;
$signature = sha1($str);
//返回配置数据
$data = [
    'appId' => $appid,
    'timestamp' => $time,
    'nonceStr'  => $rand_str,
    'signature' => $signature
];
echo json_encode($data);
次に、index.phpページで共有コードを設定します

最初にピットを踏むためのコードを見てみましょう

<?php
............................
?>
//下面是html页面
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="content-type" content="text/html" />
    <!--引用微信JS库-->
    <script type=" text/javascript " src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
    <title>hell world</title>
</head>
<body>
<input type="button" value="点击获取授权" onclick="get_root();" />
<script>
function get_root(){
    
    
.....................
}
</script>
<script>
    $(function(){
    
    
        $.post('share.php',{
    
    host:location.href.split('#')[0]},function(res){
    
    
            wx.config({
    
    
                debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                appId: res.appId, // 必填，公众号的唯一标识
                timestamp: res.timestamp, // 必填，生成签名的时间戳
                nonceStr: res.nonceStr, // 必填，生成签名的随机串
                signature: res.signature,// 必填，签名
                jsApiList:  ['onMenuShareAppMessage','onMenuShareTimeline'] // 必填，需要使用的JS接口列表
            });
            var share_data = {
    
    
                title: '你好吗世界', // 分享标题
                desc: '我们不能改变世界，但可以改变我们的世界', // 分享描述
                link: 'http://www.mine.com/index.php', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                imgUrl: 'http://www.mine.com/share_img.jpg', // 分享图标
                success: function () {
    
    
                }
            };
            wx.ready(function () {
    
       //需在用户可能点击分享按钮前就先调用
                wx.onMenuShareAppMessage(share_data);
                wx.onMenuShareTimeline(share_data);
            });
        },'json')
    })
</script>
</body>
</html>

コードは問題ないように見えます。デバッグを開いた後、ポップアップも表示されますconfig：okチップ。PCのWeChatブラウザで友達と共有する場合は正常で、タイトル、説明、写真がすべて表示されます。しかし、携帯電話との共有は機能しません。
長い間インターネットを検索したところ、認証は共有ページとして使用できず、2回目のジャンプが必要であるとの意見もあれば、共有リンクに問題があるとの意見もありました。とにかく一つずつ試してみましたが、それでもうまくいきません。
公式ドキュメントを確認してください。onMenuShareAppMessageとonMenuShareTimelineは廃止されようとしているため、updateAppMessageShareDataとupdateTimelineShareDataに置き換える必要があると言われています。試してみましたが、まだ機能しません。
最後に、WeChat jsファイルのバージョンに問題があることが判明しました。最新のupdateAppMessageShareDataとupdateTimelineShareDataを使用するには、次を使用する必要があります。weixin-1.4.0.js
上記のコードがWeChatPC側のブラウザで使用できるのに、携帯電話では使用できない理由については。PCのブラウザまたは古いバージョンであると推定され、携帯電話のWeChatはすでに最新バージョンであり、サポートされなくなりました。

以下は正しいコードです
<?php
............................
?>
//下面是html页面
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="content-type" content="text/html" />
    <!--引用微信JS库-->
    <script type=" text/javascript " src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
    <title>hell world</title>
</head>
<body>
<input type="button" value="点击获取授权" onclick="get_root();" />
<script>
function get_root(){
    
    
.....................
}
</script>
<script>
    $(function(){
    
    
        $.post('share.php',{
    
    host:location.href.split('#')[0]},function(res){
    
    
            wx.config({
    
    
                debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                appId: res.appId, // 必填，公众号的唯一标识
                timestamp: res.timestamp, // 必填，生成签名的时间戳
                nonceStr: res.nonceStr, // 必填，生成签名的随机串
                signature: res.signature,// 必填，签名
                jsApiList:  ['updateAppMessageShareData','updateTimelineShareData'] // 必填，需要使用的JS接口列表
            });
            var share_data = {
    
    
                title: '你好吗世界', // 分享标题
                desc: '我们不能改变世界，但可以改变我们的世界', // 分享描述
                link: 'http://www.mine.com/index.php', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                imgUrl: 'http://www.mine.com/share_img.jpg', // 分享图标
                success: function () {
    
    
                }
            };
            wx.ready(function () {
    
       //需在用户可能点击分享按钮前就先调用
                //新版分享方法
                wx.updateAppMessageShareData(share_data);
                wx.updateTimelineShareData(share_data);
            });
        },'json')
    })
</script>
</body>
</html>

おすすめ

転載: blog.csdn.net/u012830303/article/details/107223389
おすすめ
NetBSD は AI によって生成されたコードの提出を禁止します
ランキング
C＃の変数インスタンス、クレジット・カードケース
通过uniCloud白捡一个在线图库管理工具
Linuxのいくつかの基本的なコマンドに関する洞察（20ベース）
vueエントリーの基礎知識、コア知識をマスターするならこの記事で十分
食品化学クエスチョンバンク
CentOSの7制御システムは、ファイルを占めます
単一の el-form 内の el-form-item テキストの左揃えを解決する方法
ノードJSベースノート
関数にSQL Serverの文字列：
sparksql_相関分析
アーカイブ
もっと
2024-05-18(30)
2024-05-17(6)
2024-05-16(24)
2024-05-15(5)
2024-05-14(9)
2024-05-13(8)
2024-05-12(27)
2024-05-11(31)
2024-05-10(33)
2024-05-09(30)

コードワールド

© 2018 codetd.com