微信分享、极简微信分享、thinkphp微信分享、laravel微信分享、3分钟完成微信分享

jartins

已于 2022-10-08 11:39:19 修改

阅读量3.1k

点赞数 4

分类专栏： Php 文章标签：微信 laravel php

于 2020-12-09 11:31:08 首次发布

本文链接：https://blog.csdn.net/jartins/article/details/110918226

版权

Php 专栏收录该内容

57 篇文章 2 订阅

订阅专栏

安装微信开发SDK - easywechat

准备测试公众号 (已有公众号appid secret 且公众号已配置jsapi安全域名的此步骤可以忽略)

后端代码

前端代码

可能会出现的问题

安装微信开发SDK - easywechat

根据php版本和安装中的因素选择不同的easywechat版本 https://www.easywechat.com/docs/5.x/installation 文档地址，在这里我用5.0版本

composer require overtrue/wechat:~5.0 -vvv

分享具体参照文档地址 easywechat-jssdk

准备测试公众号 (已有公众号appid secret 且公众号已配置jsapi安全域名的此步骤可以忽略)

登录测试微信公众号
修改接口配置信息
JS接口安全域名

注意：复制测试公众号的appid与secret 配置完测试公众号的必要参数，务必要将测试分享的微信关注第3步骤的测试公众号，否则分享无效果。

后端代码

<?php

namespace app\wx\controller;

use EasyWeChat\Factory;
use think\Controller;

/**
 * Thinkphp 5.1
 * Class Index
 * @package app\wx\controller
 */
class Index extends Controller
{
    /**
     * Notes: 初始化加载分享页面
     * User: Jartin
     * Url: /index.php/wx/index/index
     */
    public function index()
    {
        if ($this->request->isAjax()) {
            $jssdk = $this->getJsapi();
            return json([
                'data' => $jssdk
            ]);
        }
        return view();
    }

    /**
     * Notes: 获取分享必要参数
     * User: Jartin
     */
    private function getJsapi()
    {

        $config = [
            'app_id' => '公众号APPID',
            'secret' => '公众号APPSECRET',
            'token' => '公众号配置的参数token',
            // 指定 API 调用返回结果的类型：array(default)/collection/object/raw/自定义类名
            'response_type' => 'array',
            'log' => [
                'level' => 'debug',
                'file' => __DIR__ . '/../../wechat.log',
            ],
        ];

        $app = Factory::officialAccount($config);
        $menu = array(
            'updateAppMessageShareData',
            'updateTimelineShareData',
            'onMenuShareTimeline',
            'onMenuShareAppMessage');
        
        // 以下参数的具体释义参考文档 https://www.easywechat.com/docs/5.x/basic-services/jssdk
        $jssdk = $app->jssdk->buildConfig($menu, true, false, false);
        return $jssdk;
    }

    /**
     * Notes: 微信公众号配置开发域名token验证地址（已验证的忽略该方法）
     * User: Jartin
     */
    public function wx_check()
    {
        $config = [
            'app_id' => '公众号APPID',
            'secret' => '公众号APPSECRET',
            'token' => '公众号配置的参数token',
            // 指定 API 调用返回结果的类型：array(default)/collection/object/raw/自定义类名
            'response_type' => 'array',

            'log' => [
                'level' => 'debug',
                'file' => __DIR__ . '/../../wechat.log',
            ],
        ];
        $app = Factory::officialAccount($config);
        $response = $app->server->serve();
        $response->send(); // Laravel 里请使用：return $response;
    }
}

前端代码

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    ！！！！  ↓↓↓↓↓↓ 这个微信分享的js代码版本必须为 1.5.0 否则无效
    <script src="http://res.wx.qq.com/open/js/jweixin-1.5.0.js"></script>
    <title>标题</title>
</head>
<script>
    $(document).ready(function () {
        $.get('/wx/index/index', '', function (res) {
            wx.config({
                debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来。
                appId: res.data.appId, // 必填，公众号的唯一标识
                timestamp: res.data.timestamp, // 必填，生成签名的时间戳
                nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
                signature: res.data.signature,
                jsApiList:['checkJsApi', 'updateAppMessageShareData', 'updateTimelineShareData']
            });
        })
        wx.ready(function () {
            wx.updateAppMessageShareData({
                title: '标题',
                desc: '描述文字'  ,
                link: 'http://域名/wx/index/index',
                imgUrl:'https://www.imooc.com/static/img/index/logo2020.png' ,
                success: function () {
                }
            });
            wx.updateTimelineShareData({
                title: '标题',
                desc: '描述文字'  ,
                link: 'http://域名/wx/index/index',
                imgUrl:'https://www.imooc.com/static/img/index/logo2020.png' ,
                type: 'link',
                dataUrl: '',
                success: function () {
                }
            });
        });
        wx.error(function (res) {
            console.log("shareerror")
            alert(res.errMsg);
        });
    })
</script>
<body>
</body>
</html>
 No newline at end of file

成功！