微信JSSDK

最新推荐文章于 2024-04-22 11:23:20 发布

NHPH

最新推荐文章于 2024-04-22 11:23:20 发布

阅读量1k

点赞数

文章标签：微信微信JS-SDK 微信分享到朋友圈

本文链接：https://blog.csdn.net/weixin_42085115/article/details/81077648

版权

首先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。要记得哦。

先看后端操作，基于thinkphp5，

/*
        微信JS-SDK配置
*/
    public function share(){
        $ticket = getJsapiTicket(getAccessToken(APPID,SECRET));//获取token_assecc并通过token_access获取ticket
        $noncestr = 'Wm3WZYTPz0sddenW';//随机字符串，可自定义随机生成16位字符串方法
        $time = time();//时间戳，要和加载到模板的保持一致
        $url = 'http://www.XXXXX.com/index/index/share';//分享的链接，用于生成签名，微信官方会检查你调用js-api的接口和这个是否一致
        $getSignatrue = 'jsapi_ticket='.$ticket.'&noncestr='.$noncestr.'&timestamp='.$time.'&url='.$url;//拼接这些信息，用于生成签名
        $signature = sha1($getSignatrue);//通过sha1()方法生成签名，此方法为微信内置方法
        return $this->fetch('share',['time'=>$time,'noncestr'=>$noncestr,'signature'=>$signature,'appid'=>APPID]);
    }

这里的APPID和SECRET是在入口文件定义的常量，如下

// 微信AppID和AppSecret
define('APPID', 'wx8fc5311118f2dfb3');
define('SECRET', '97f96488de1111194dfc86f0e287a969');

getAccessToken()方法是我封装的一个方法，放在thinkphp5的公共方法文件里就可以，可以参考微信开发动态获取access_token，反正微信开发离不开获取token_access.

接下来是前端模板

<!DOCTYPE html>
<html>
<head>
    <title>
        标题
    </title>
    <script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
    <!-- 必须：引用微信js_sdk -->
</head>
<body>
<a href="javascript:void(0);" onclick="getLocation()"><h1>获取地理位置接口</h1></a><br />
<a href="javascript:void(0);" onclick="openLocation()"><h1>使用微信内置地图查看位置接口</h1></a><br />
<a href="javascript:void(0);" onclick="onMenuShareTimeline()"><h1>分享到朋友圈</h1></a><br />
<a href="javascript:void(0);" onclick="onMenuShareAppMessage()"><h1>分享给朋友</h1></a><br />
<a href="javascript:void(0);" onclick="chooseImage()"><h1>拍照或从手机相册中选图接口</h1></a><br />
<a href="javascript:void(0);" onclick="getNetworkType()"><h1>获取网络状态接口</h1></a><br />
<a href="javascript:void(0);" onclick="scanQRCode()"><h1>调起微信扫一扫接口</h1></a><br />
<a href="javascript:void(0);" onclick="closeWindow()"><h1>关闭当前网页窗口接口</h1></a>
</body>
<script>
    wx.config({
        debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId: '{$appid}', // 必填，公众号的唯一标识
        timestamp: '{$time}', // 必填，生成签名的时间戳
        nonceStr: '{$noncestr}', // 必填，生成签名的随机串
        signature: '{$signature}',// 必填，签名
        jsApiList: [
            'onMenuShareTimeline',    //分享到朋友圈
            'onMenuShareAppMessage',  //分享给朋友
            'scanQRCode',             //调起微信扫一扫接口
            'getLocation',            //获取地理位置接口
            'chooseImage',            //拍照或从手机相册中选图接口
            'getNetworkType',         //获取网络状态接口
            'openLocation',           //使用微信内置地图查看位置接口
            'closeWindow',            //关闭当前网页窗口接口
        ] // 必填，需要使用的JS接口列表
    });
    wx.ready(function(){
        // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。

        //判断当前客户端版本是否支持指定JS接口
        // wx.checkJsApi({
        //     jsApiList: ['onMenuShareTimeline','onMenuShareAppMessage'], // 需要检测的JS接口列表，所有JS接口列表见附录2,
        //     success: function(res) {
        //     // 以键值对的形式返回，可用的api值true，不可用为false
        //     // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
        //      alert('该api可用');
        //     }
        // });


        wx.onMenuShareAppMessage({
            title: 'this is title', // 分享标题
            desc: 'this is desc', // 分享描述
            link: 'http://music.163.com', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            imgUrl: 'http://pic.616pic.com/ys_b_img/00/66/73/9KnqqgZBFe.jpg', // 分享图标
            type: 'link', // 分享类型,music、video或link，不填默认为link
            dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
            success: function () {
            // 用户点击了分享后执行的回调函数
                alert('分享好友成功');
            },
            cancel: function (res) {
                alert('分享好友已取消');
            },
            fail: function (res) {
                alert(JSON.stringify(res));
            }
        });

        wx.onMenuShareTimeline({
            title: 'this is title', // 分享标题
            link: 'http://music.163.com', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            imgUrl: 'http://pic.616pic.com/ys_b_img/00/66/73/9KnqqgZBFe.jpg', // 分享图标
            success: function () {
                // 用户点击了分享后执行的回调函数
                alert('分享朋友圈成功');
            }
        });

    });

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

    //分享到朋友圈
    function onMenuShareTimeline(){
        wx.onMenuShareTimeline({
            title: 'this is title', // 分享标题
            link: 'http://music.163.com', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            imgUrl: 'http://pic.616pic.com/ys_b_img/00/66/73/9KnqqgZBFe.jpg', // 分享图标
            success: function () {
                // 用户点击了分享后执行的回调函数
                alert('分享朋友圈成功');
            }
        });
        alert('onMenuShareTimeline');
    }


    //获取地理位置接口
    function getLocation(){
        wx.getLocation({
            type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
            success: function (res) {
                var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
                var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
                var speed = res.speed; // 速度，以米/每秒计
                var accuracy = res.accuracy; // 位置精度
                alert(latitude);
            }
        });
    }

    //调起微信扫一扫接口
    function scanQRCode(){
        wx.scanQRCode({
            needResult: 0, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
            scanType: ["qrCode","barCode"], // 可以指定扫二维码还是一维码，默认二者都有
            success: function (res) {
                // var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
            }
        });
    }

    //拍照或从手机相册中选图接口
    function chooseImage(){
        wx.chooseImage({
            count: 1, // 默认9
            sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
            sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
            success: function (res) {
                var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
                alert(localIds);
            }
        });
    }

    //分享至好友
    function onMenuShareAppMessage(){
        wx.onMenuShareAppMessage({
            title: 'this is title', // 分享标题
            desc: 'this is desc', // 分享描述
            link: 'http://music.163.com', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            imgUrl: 'http://pic.616pic.com/ys_b_img/00/66/73/9KnqqgZBFe.jpg', // 分享图标
            type: 'link', // 分享类型,music、video或link，不填默认为link
            dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
            success: function () {
            // 用户点击了分享后执行的回调函数
                alert('分享好友成功');
            },
            cancel: function (res) {
                alert('分享好友已取消');
            },
            fail: function (res) {
                alert(JSON.stringify(res));
            }
        });
    }

    //获取网络状态
    function getNetworkType(){
        wx.getNetworkType({
            success: function (res) {
                var networkType = res.networkType; // 返回网络类型2g，3g，4g，wifi
            }
        });
    }

    //使用微信内置地图查看位置接口
    function openLocation(){
        wx.openLocation({
            latitude: 0, // 纬度，浮点数，范围为90 ~ -90
            longitude: 0, // 经度，浮点数，范围为180 ~ -180。
            name: '', // 位置名
            address: '', // 地址详情说明
            scale: 1, // 地图缩放级别,整形值,范围从1~28。默认为最大
            infoUrl: 'http://music.163.com' // 在查看位置界面底部显示的超链接,可点击跳转
        });
    }

    //关闭当前网页窗口接口
    function closeWindow(){
        wx.closeWindow();
    }
</script>
</html>

NHPH

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
微信JSSDK

首先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。要记得哦。先看后端操作，基于thinkphp5，/* 微信JS-SDK配置*/ public function share(){ $ticket = getJsapiTicket(getAccessToken(APPID,SECRET));//获取token_assec...
复制链接

扫一扫

微信JSSDK

“相关推荐”对你有帮助么？