使用微信JS_JDK实现自定义分享功能

谁践踏了优雅 2022-06-08 07:17 295阅读 0赞

**1、设置JS接口安全域名。这里填写的是一级域名，不带www和http（[https://mp.weixin.qq.com/][https_mp.weixin.qq.com]）**

![Center][]

**2、后台PHP提供微信配置参数**

function make_nonceStr()
    {
        $codeSet = '1234567890abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
        for ($i = 0; $i<16; $i++) {
            $codes[$i] = $codeSet[mt_rand(0, strlen($codeSet)-1)];
        }
        $nonceStr = implode($codes);
        return $nonceStr;
    }
    
    function make_signature($nonceStr,$timestamp,$jsapi_ticket,$url)
    {
        $tmpArr = array(
            'noncestr' => $nonceStr,
            'timestamp' => $timestamp,
            'jsapi_ticket' => $jsapi_ticket,
            'url' => $url
        );
        ksort($tmpArr, SORT_STRING);
        $string1 = http_build_query( $tmpArr );
        $string1 = urldecode( $string1 );
        $signature = sha1( $string1 );
        return $signature;
    }
    
    function make_ticket($appId,$appsecret)
    {
        // access_token 应该全局存储与更新，以下代码以写入到文件中做示例
        $data = json_decode(file_get_contents("access_token.json"));
        if ($data->expire_time < time()) {
            $TOKEN_URL="https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=".$appId."&secret=".$appsecret;
            $json = file_get_contents($TOKEN_URL);
            $result = json_decode($json,true);
            $access_token = $result['access_token'];
            if ($access_token) {
                $data->expire_time = time() + 7000;
                $data->access_token = $access_token;
                $fp = fopen("Data/access_token.json", "w");
                fwrite($fp, json_encode($data));
                fclose($fp);
            }
        }else{
            $access_token = $data->access_token;
        }
    
        // jsapi_ticket 应该全局存储与更新，以下代码以写入到文件中做示例
        $data = json_decode(file_get_contents("jsapi_ticket.json"));
        if ($data->expire_time < time()) {
            $ticket_URL="https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=".$access_token."&type=jsapi";
            $json = file_get_contents($ticket_URL);
            $result = json_decode($json,true);
            $ticket = $result['ticket'];
            if ($ticket) {
                $data->expire_time = time() + 7000;
                $data->jsapi_ticket = $ticket;
                $fp = fopen("Data/jsapi_ticket.json", "w");
                fwrite($fp, json_encode($data));
                fclose($fp);
            }
        }else{
            $ticket = $data->jsapi_ticket;
        }
    
        return $ticket;
    }
    
    $appId = C('appid');   //需要的参数
    $appsecret = C('appsecret');
    $timestamp = time();   //需要的参数
    $jsapi_ticket = make_ticket($appId,$appsecret);
    $nonceStr = make_nonceStr();   //需要的参数
    $url = 'http://'.$_SERVER['HTTP_HOST'].__SELF__;
    $signature = make_signature($nonceStr,$timestamp,$jsapi_ticket,$url);   //需要的参数

**3、在前台设置配置**

<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
    wx.config({
    	debug: false,
    	appId: "你的AppID",
    	timestamp: '上一步生成的时间戳',
    	nonceStr: '上一步中的字符串',
    	signature: '上一步生成的签名',
    	jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage'] // 功能列表，我们要使用JS-SDK的什么功能
    });
    // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在 页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready 函数中。
    wx.ready(function(){
    	// 获取“分享到朋友圈”按钮点击状态及自定义分享内容接口
    	wx.onMenuShareTimeline({
    		title: '海量大数据创业平台|合伙人股权计算器', // 分享标题
    		link:_imgUrl,
    		imgUrl: _url // 分享图标
    	});
    	// 获取“分享给朋友”按钮点击状态及自定义分享内容接口
    	wx.onMenuShareAppMessage({
    		title: '海量大数据创业平台|合伙人股权计算器', // 分享标题
    		desc: "以网络系统论+多目标综合评价，运用层次分析算法，让创业者调优股权分配方案时有了便捷的量化决策工具", // 分享描述
    		link:_url,
    		imgUrl: _imgUrl, // 分享图标
    		type: 'link', // 分享类型,music、video或link，不填默认为link
    	});
    
    	//通过error接口处理失败验证
    	wx.error(function(res){
    		console.log(res);
    	});
    });

[https_mp.weixin.qq.com]: https://mp.weixin.qq.com/
[Center]: /images/20220608/1286151b3c5a462cad2e6071fb642b86.png

发表评论取消回复

表情：

评论列表（有 0 条评论，295人围观）

还没有评论，来说两句吧...

相关阅读

相关 Flutter 微信分享功能实现

> 志在巅峰的攀登者，不会陶醉在沿途的某个脚印之中，在码农的世界里，优美的应用体验，来源于程序员对细节的处理以及自我要求的境界，年轻人也是忙忙碌碌的码农中一员，每天、每周，都会

阳光穿透心脏的1/2处/ 2023年10月07日 17:01/ 0 赞/ 59 阅读

相关使用微信JS_JDK实现自定义分享功能

1、设置JS接口安全域名。这里填写的是一级域名，不带www和http（[https://mp.weixin.qq.com/][https_mp.weixin.qq.com]）

谁践踏了优雅/ 2022年06月08日 07:17/ 0 赞/ 296 阅读

相关 JSSDK实现微信分享功能

功能：在微信内置浏览器页面实现分享页面功能。注意：关于微信内置浏览器的私有对象WeixinJSBridge分享的接口都已经作废了，即下面的定义都是无效的： $(f

忘是亡心i/ 2022年06月07日 01:20/ 0 赞/ 596 阅读

相关微信JS-SDK实现自定义微信分享、分享朋友圈等内容

1.准备工作 appId公众号id、申请好分享接口、ip白名单设置、JS接口安全域名设置（必须是通过备案的） 2.引入js <script src=

喜欢ヅ旅行/ 2022年05月26日 00:17/ 0 赞/ 263 阅读

相关微信实现自定义分享功能

今天小编写微信分享接口。上网查了下，代码很多，但都不是很全！所以，小编特地真理了下..... 0、效果 ![70][] 1、有一个认证过的微信公众号。 2、把你要分享的

布满荆棘的人生/ 2022年05月19日 04:58/ 0 赞/ 310 阅读

相关使用JS-SDK自定义微信分享效果

之前做的一个h5页面，按照需求得分享到朋友圈he好友，默认分享链接的标题he内容以及图标都是微信默认的，下面是一个大神进行自定义的分享链接的代码，看到了记录下：前言

左手的ㄟ右手/ 2022年05月14日 10:29/ 0 赞/ 228 阅读

相关微信JS-SDK实现自定义微信分享、分享朋友圈等内容

准备工作 ![在这里插入图片描述][20181214140538817.png]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpd

系统管理员/ 2022年04月04日 02:52/ 0 赞/ 860 阅读

相关微信自定义分享

test.html <!DOCTYPE html> <html> <head> <meta charset="utf-8">

本是古典何须时尚/ 2022年03月31日 05:10/ 0 赞/ 330 阅读

相关微信自定义分享

第一步：登录公众号，进入公众号设置 -> 选中功能设置，找到页面下面的 js接口安全域名 ![clipboard.png][] 点击 js接口安全域名下载红框的txt文件，

拼搏现实的明天。/ 2022年03月06日 20:48/ 0 赞/ 374 阅读

相关微信自定义分享

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

快来打我*/ 2021年09月17日 03:30/ 0 赞/ 484 阅读