微信公众平台开发-JS_SDK

最新推荐文章于 2024-09-09 23:23:25 发布

qq_38243705

最新推荐文章于 2024-09-09 23:23:25 发布

阅读量250

点赞数

CC 4.0 BY-SA版权

分类专栏： PHP 文章标签： PHP 微信公众号开发

本文链接：https://blog.youkuaiyun.com/qq_38243705/article/details/87092616

PHP 专栏收录该内容

7 篇文章

订阅专栏

代码参考自慕课网视频:https://www.imooc.com/learn/620

代码GitHub地址：https://github.com/xiaoming000/wechat.git

微信JS_SDK用于调用微信提供的一些行为的接口，如打开相册，分享，微信扫码等；

官方文档地址：https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115

我这里实现了打开手机相册并显示临时选择的相册和分享朋友和朋友圈的功能

手机相册接口, potop.php

<?php
require "../public.php";

$appid = "wx70b222a95832e8b1";
$time = time();
$fun = new PublicFunction();
$nonceStr = $fun -> get_rand_code(16);
// 获取票据
$jsapi_tiket = $fun -> get_jsapi_tiket();
// 获取当前文件的url
if(isset($_SERVER['HTTPS'])){
    $url = "https://".$_SERVER['HTTP_HOST'].$_SERVER['PHP_SELF'];        
}else{
    $url = "http://".$_SERVER['HTTP_HOST'].$_SERVER['PHP_SELF'];
}    
// 利用签名算法生成$signature
$string1 = "jsapi_ticket=".$jsapi_tiket."&noncestr=".$nonceStr."&timestamp=".$time."&url=".$url;
$signature = sha1($string1);
?>

<!DOCTYPE html>
<html>
<head>
    <title>微信分享JS接口</title>
    <meta name="viewpoint" content="initial-scale=1.0;width=device-width" />
    <meta http-equiv="content" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
</head>
<body>

    <button onclick="choose();">选择图片</button>
    <div id="imgs" data-imgs=""></div>

    <script type="text/javascript">
        wx.config({
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: '<?php echo $appid ?>', // 必填，公众号的唯一标识
            timestamp: '<?php echo $time ?>', // 必填，生成签名的时间戳
            nonceStr: '<?php echo $nonceStr ?>', // 必填，生成签名的随机串
            signature: '<?php echo $signature ?>',// 必填，签名
            jsApiList: [
                'chooseImage'
            ], // 必填，需要使用的JS接口列表
        });

        function  choose(){
            var imgs_div = document.getElementById('imgs'); 
            wx.chooseImage({
                success: function (res) {
                    var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
                    // 注意localIds其实是一个对象
                    var imgs = localIds.toString().split(',');
                    for (var i = 0; i < imgs.length; i++) {
                        var img = document.createElement('img');
                        img.src = imgs[i];
                        imgs_div.appendChild(img);
                    }
                }
            });
        }

    </script>

</body>
</html>

分享至朋友圈和朋友, share_friend.php

微信7.0，旧版本的分享接口已经没用

<?php
require "../public.php";

$appid = "wx70b222a95832e8b1";
$time = time();
$fun = new PublicFunction();
$nonceStr = $fun -> get_rand_code(16);
$jsapi_tiket = $fun -> get_jsapi_tiket();
$url = "http://wechat.dmfly.xin/JS_SDK/share_friend.php";
$string1 = "jsapi_ticket=".$jsapi_tiket."&noncestr=".$nonceStr."&timestamp=".$time."&url=".$url;
$signature = sha1($string1);
// var_dump($signature);
?>

<!DOCTYPE html>
<html>
<head>
    <title>微信分享JS接口</title>
    <meta name="viewpoint" content="initial-scale=1.0;width=device-width" />
    <meta http-equiv="content" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
</head>
<body>

    <script type="text/javascript">
        wx.config({
            debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: '<?php echo $appid ?>', // 必填，公众号的唯一标识
            timestamp: '<?php echo $time ?>', // 必填，生成签名的时间戳
            nonceStr: '<?php echo $nonceStr ?>', // 必填，生成签名的随机串
            signature: '<?php echo $signature ?>',// 必填，签名
            jsApiList: [
                    'updateAppMessageShareData',
                    // 'updateTimelineShareData',
                    'onMenuShareAppMessage',
                    // 'onMenuShareTimeline'
                ], // 必填，需要使用的JS接口列表
        });
        wx.ready(function () {   //需在用户可能点击分享按钮前就先调用
            wx.updateAppMessageShareData({ 
                title: '分享给朋友！', // 分享标题
                desc: 'js_sdk', // 分享描述
                link: 'http://wechat.dmfly.xin/power/code.php', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                imgUrl: 'https://www.baidu.com/img/superlogo_c4d7df0a003d3db9b65e9ef0fe6da1ec.png?where=super', // 分享图标
                // success: function () {
                //   // 设置成功
                //   alert("分享成功！请在右上角菜单中选择发送给朋友！");
                // }
            });

        });
        // 错误处理
        wx.error(function(res){
        // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
        });

        function share_friend(){
            wx.updateAppMessageShareData({ 
                title: '分享给朋友！', // 分享标题
                desc: 'js_sdk', // 分享描述
                link: 'http://wechat.dmfly.xin/power/code.php', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                imgUrl: 'https://www.baidu.com/img/superlogo_c4d7df0a003d3db9b65e9ef0fe6da1ec.png?where=super', // 分享图标
                success: function () {
                  // 设置成功
                  alert("分享成功！请在右上角菜单中选择发送给朋友！");
                }
            });
        }

        function share_friends(){
            wx.updateTimelineShareData({ 
                title: '分享到朋友圈！', // 分享标题
                desc: 'js_sdk', // 分享描述
                link: 'http://wechat.dmfly.xin/power/code.php', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                imgUrl: 'https://www.baidu.com/img/superlogo_c4d7df0a003d3db9b65e9ef0fe6da1ec.png?where=super', // 分享图标
                success: function () {
                  // 设置成功
                  alert("分享成功！");
                }
            });
        }       
    </script>
    <!-- <button onclick="share_friend();">分享给朋友</button><br /> -->
    <!-- <button onclick="share_friends();">分享到朋友圈</button> -->
</body>
</html>