微信分享链接卡片,php业务处理

微信分享链接自定义卡片和内容信息

官方文档https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html

准备工作

1、公众号appid和secret秘钥信息,配置ip白名单
2、配置js域名信息
3、php后端接口处理
4、前段接口调用

实现效果
微信发送给朋友
在这里插入图片描述
分享到朋友圈
在这里插入图片描述

1、公众号appid和secret秘钥信息,配置ip白名单
在这里插入图片描述
2、配置js域名信息
在这里插入图片描述
3、php后端接口处理
公共方法类

/**
 * 生成随机字串
 * @param number $length 长度,默认为16,最长为32字节
 * @return string
 */
function generateNonceStr($length = 16)
{
    // 密码字符集,可任意添加你需要的字符
    $chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
    $str = "";
    for ($i = 0; $i < $length; $i++) {
        $str .= $chars[mt_rand(0, strlen($chars) - 1)];
    }
    return $str;
}
//curl请求
function http_url($url)
{
    $info = curl_init();
    curl_setopt($info, CURLOPT_RETURNTRANSFER, true);
    curl_setopt($info, CURLOPT_HEADER, 0);
    curl_setopt($info, CURLOPT_NOBODY, 0);
    curl_setopt($info, CURLOPT_SSL_VERIFYPEER, false);
    curl_setopt($info, CURLOPT_SSL_VERIFYHOST, false);
    curl_setopt($info, CURLOPT_URL, $url);
    $output = curl_exec($info);
    curl_close($info);
    return $output;
}
 //get请求
     function do_get($url, $params)
    {
        $url = "{$url}?" . http_build_query($params);
        $ch = curl_init();
        curl_setopt($ch, CURLOPT_URL, $url);
        curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
        curl_setopt($ch, CURLOPT_CUSTOMREQUEST, 'GET');
        curl_setopt($ch, CURLOPT_TIMEOUT, 60);
        curl_setopt($ch, CURLOPT_POSTFIELDS, $params);
        $result = curl_exec($ch);
        curl_close($ch);
        return $result;
    }

业务类

//获取公众平台access_token
    protected function getopen_token()
    {
        if (Cache::get('open_token_time') > time()) {
            return Cache::get('open_token');
        } else {
            $appid = '公众号appid';
            $appsecret = '公众号秘钥';
            $url = 'https://api.weixin.qq.com/cgi-bin/token';
            $data = [
                'grant_type' => 'client_credential',
                'appid' => $appid,
                'secret' => $appsecret
            ];
            $res = do_get($url, $data);
            $res = json_decode($res, true);
           Cache::set('open_token_time', time() + 7200);
            Cache::set('open_token', $res['access_token']);
            return $res['access_token'];
        }
    }
     //  公众号换ticket
    protected function wxticket()
    {
        if (Cache::get('open_ticket_time') > time()) {
            return Cache::get('open_ticket');
        } else {
            $url = 'https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=' . $this->getopen_token() . '&type=jsapi';
            $res = http_url($url);
            $res = json_decode($res,true);
            $ticket = $res['ticket'];
            Cache::set('open_ticket_time', time() + 7200);
            Cache::set('open_ticket', $ticket);
            return $ticket;
        }
    }
    // 公众号生成签名
    public function signtrue()
    {
        header("Access-Control-Allow-Origin:*");
        header('Access-Control-Allow-Methods:*');
        $ticket = $this->wxticket();
        $timestamp = (string)time();
        $noncestr = generateNonceStr();
        $string1 = 'jsapi_ticket='.$ticket;
        $string1.='&noncestr='.$noncestr;
        $string1.='&timestamp='.$timestamp;
        $string1.='&url=https://0315678.cn/';
        $str = sha1($string1);
        $data = [
            'timestamp'=>$timestamp,
            'noncestr'=>$noncestr,
            'signature'=>$str
        ];
        return json(['status'=>1,'data'=>$data]);
    }

前段只需要调用signtrue即可
4、前段接口调用

$.ajax({
        type: "post",
        url: "后端业务域名/signtrue",
        data: {},
        dataType: "json",
        success: function (res) {
            wx.config({
                debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
                appId: '公众号appid', // 必填,公众号的唯一标识
                timestamp: res.data.timestamp, // 必填,生成签名的时间戳
                nonceStr: res.data.noncestr, // 必填,生成签名的随机串
                signature: res.data.signature,// 必填,签名
                jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData'] // 必填,需要使用的JS接口列表
            });
            wx.ready(function () {   //需在用户可能点击分享按钮前就先调用
                wx.updateAppMessageShareData({
                    title: '唐山共享科技', // 分享标题
                    desc: '唐山共享科技有限公司官网|软件定制开发|小程序开发|网站开发|管理软件开发|行业解决方案提供商', // 分享描述
                    link: 'https://0315678.cn', // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                    imgUrl: 'https:0315678.cn/public/logo.png', // 分享图标
                    success: function () {
                        // 设置成功
                    }
                })
                wx.updateTimelineShareData({
                    title: '唐山共享科技', // 分享标题
                    link: 'https://0315678.cn', // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                    imgUrl: 'https:0315678.cn/public/logo.png', // 分享图标
                    success: function () {
                        // 设置成功
                    }
                })
            });
        }
    });
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在Vue中实现微信分享链接需要以下步骤: 1. 首先,你需要在微信开放平台上注册一个公众号,并获取到对应的AppID。 2. 在Vue项目的入口文件中引入微信JavaScript SDK,可以通过使用`<script>`标签直接引入,或者通过npm安装相关的包。 3. 在需要分享的页面中,可以在`created`或`mounted`钩子中调用微信提供的API,获取当前页面的URL,并配置微信分享所需的参数。例如: ```javascript import wx from 'weixin-js-sdk'; export default { mounted() { this.getWechatConfig(); }, methods: { getWechatConfig() { // 发起请求,获取后端签名 axios.get('/api/getWechatConfig', { params: { url: window.location.href.split('#')[0] } }).then(response => { const { appId, timestamp, nonceStr, signature } = response.data; // 配置微信分享参数 wx.config({ debug: false, // 开启调试模式 appId: appId, timestamp: timestamp, nonceStr: nonceStr, signature: signature, jsApiList: ['onMenuShareAppMessage', 'onMenuShareTimeline'] // 需要使用的API列表 }); wx.ready(() => { // 配置分享给朋友 wx.onMenuShareAppMessage({ title: '分享标题', desc: '分享描述', link: window.location.href, imgUrl: '分享图片链接', success: () => {}, cancel: () => {} }); // 配置分享到朋友圈 wx.onMenuShareTimeline({ title: '分享标题', link: window.location.href, imgUrl: '分享图片链接', success: () => {}, cancel: () => {} }); }); }).catch(error => { console.error(error); }); } } } ``` 4. 最后,通过后端接口获取微信配置信息,其中`url`参数需要替换成当前页面的URL,然后将获取到的配置信息返回给前端。在前端通过微信提供的`wx.config()`方法进行配置,然后在`wx.ready()`方法中配置分享给朋友和分享到朋友圈的行为。 这样,在Vue中实现微信分享链接的功能就完成了。当用户访问分享出去的链接时,会根据配置信息弹出微信分享的对话框,用户可以选择分享给好友或分享到朋友圈。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值