微信开发之微信分享功能很强大,此功能可以分享各种链接、图片等到微信生态链中,因此该功能是做微信开发人员必不可少的,今天分享一个1分钟快速实现微信分享功能,实现的语言是PHP,采用的是thinkphp框架开发,喜欢用laravel框架的朋友也可以直接赋值下面demo代码即可调试运行。好了,话不多说,往下看。

1.安装微信开发SDK工具(easywechat)
根据php版本和安装中的因素,选择不同的easywechat版本下载地址https://www.easywechat.com/docs/5.x/installation 文档地址,在这里我用5.0版本

composer require overtrue/wechat:~5.0 -vvv
分享具体参照文档地址 easywechat-jssdk

2.准备测试公众号(已有公众号appidsecret且公众号已配置jsapi安全域名的此步骤可以忽略)。登录测试微信公众号,修改接口配置信息,JS接口安全域名。如图:

微信分享功能示例图1
3.主义问题
注意:复制测试公众号的appid与secret 配置完测试公众号的必要参数,务必要将测试分享的微信关注第3步骤的测试公众号,否则分享无效果。

 
4.后端代码

<?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;
    }
}
 


5.前端代码
<!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
成功!

image401


 
6.可能会出现的问题
旧的前端微信分享sdkjs链接未替换为最新而导致的分享失败jsApiList列表中的行为不是微信最新分享的行为,要确保列表中有的 wx.方法都有js代码置后而导致的加载异常导致的分享失败.