微信的H5分享（基于 Laravel-Wechat）😶

一、缘由

什么都不做的情况下，在微信分享H5页面的时候，分享后是这样的：

但是，现在需求是，分享后为下面这样：

没办法，自己开发的H5要想在微信中进行传播，使用微信 JSSDK 是必不可少的环节。而 JSSDK 虽然只是个 js ，可是加密必须得在服务端进行。

二、基本流程

1.设置JS接口安全域名

进入微信公众号平台 —> 公众号设置 —> 功能设置 —> JS接口安全域名（test.zks.design）

设置的时候，微信有教你如何去设置，将下载的文件（MP_verify_acUZIwvhxMREbXNt.txt）放在项目的根目录就可以了。

2.配置一个基础 url 用于获取 jssdk 的 config 内容

使用的 url 是 http://test.zks.design/jssdkconfig

3.H5 静态页面存放在 public/h5/ 文件夹下

因此在访问 H5 的时候，需要访问域名 http://test.zks.design/h5/xxxx/

因为 H5 主要是分享，而不是域名访问，因此这个域名没什么问题。

H5 均直接写静态页面，并不使用 laravel 的 blade 模板去写H5。

4.通过 ajax 获取 config 配置

在需要调用分享的页面上，进行 config 配置的时候，首先通过 ajax 将基本参数传送给服务端url（http://test.zks.design/jssdkconfig）。

一些需要的参数可能如下：

可以参照 EasyWechat 的文档 https://www.easywechat.com/docs/4.1/basic-services/jssdk

其中建议 $app->jssdk->setUrl($url) 设置当前URL 一定是自己前端的页面的 url。

5.将获取到的 config 直接放在 js 中

在H5页面引入js文件，否则 wx.config 之类无法使用：http://res.wx.qq.com/open/js/jweixin-1.4.0.js

三、实现

1、安装并配置 laravel-wechat

composer require "overtrue/laravel-wechat:~4.0"

并发布配置文件

php artisan vendor:publish --provider="Overtrue\LaravelWeChat\ServiceProvider"

2.实现服务器 token 验证逻辑(只是分享的话，这步可以选择省略)

要实现服务器 token 验证，除了填写微信公众号的配置之外，还需要配置 config/wechat.php。先在服务器代码填写token和EncodingAESKey（token自己随便填），然后再在公众号服务器配置处点击提交（注意两处token保持一致）

之后是需要对 http://test.zks.design/wechat进行编码完成验证。（这里不涉及消息，消息也在这里面转发或处理即可）。

路由我是直接配置如下：

// 微信方面的路由
Route::namespace("Wechat")->group(function(){
    Route::any('/wechat','WechatController@index');
    Route::any('/jssdkconfig','WechatController@getJSSDKConfig');
});

Wechat控制器：

php artisan make:controller Wechat/WechatController

其中 index 函数如下：

非常简单，这个完成之后，就能够实现微信公众号的 token 认证 （注意，需要对 config/wechat 配置和公众号的相关参数匹配正确才行 ）

// token认证及信息传输
    public function index(){
        Log::info('request arrived.');
        $app = app('wechat.official_account');
        return $app->server->serve();
    }

3.实现 jssdkConfig 信息获取的逻辑

// 获取jssdk配置
    public function getJSSDKConfig(Request $request){
        // dump(explode(',',$request->get('apis')));
        $arr = explode(',',$request->get('apis'));
        $debug = $request->get('debug') ==='true' ? true : false;
        $json = $request->get('json') ==='true' ? true : false;
        $url =$request->get('url');
        //dump($request->get('url'));
        // check
        if(!$url){
            return response()->json(['status'=>false,'msg'=>'params error','data'=>'']);
        }
        $app = app('wechat.official_account');
        $app->jssdk->setUrl($url);
        $config = $app->jssdk->buildConfig($arr,$debug,$json,$url);
        return response($config);
    }

为了方便起见，我直接使用了 GET 的请求方式。

同时主要的参数有下面几个：

• apis： 需要使用的接口列表 传入格式为 "onMenuShareTimeline,onMenuShareAppMessage" 这样的字符串，方便分割成数组
• debug：传入的是字符的 true 或者 false
• json：传入的是字符的 true 或者 false （表示生成的数据格式，可以参考 easyWechat 的文档）
• url：需要加密的 url （传入的时候必须将 & 进行替换，否则会造成 config 失败

4.js 获取 config 数据

在 H5 中直接使用 config 的时候，可以直接在 js 中通过 ajax 请求 url 获取config内容。

比如下面我使用的例子：

<script type="text/javascript">
    function getjssdkconfig() {
            var shareLinkUlr = location.href.split("#")[0]; // 获取当前的url 去掉 # 之后的部分
            shareLinkUlr = shareLinkUlr.replace(/\&/g, '%26'); // 将 & 替换成 %26

            var apis="onMenuShareTimeline,onMenuShareAppMessage";
            var debug=false;
            var json=false;
            var link=shareLinkUlr;
            var data = "apis="+apis+"&debug="+debug+"&json="+json+"&url="+link; // 拼接 get 参数
            $.ajax({
                type:'get',
                url:'http://test-api.zam9.com/api/jssdkconfig?'+data,
                success:function (data) {
                    configJsSDKAndDoSomething(JSON.parse(data));
                }
            });
        }

        function configJsSDKAndDoSomething(config){
            wx.config(config);
            wx.ready(function() {
                // 其他的一些操作
                var options = {
                    title: '林和成35週年幸運大轉輪', // 分享标题
                    link: 'http://test.zam9.com', // 分享链接，记得使用绝对路径，不能用document.URL
                    imgUrl: 'http://test.zam9.com/images/ettason-share.jpg', // 分享图标
                    desc: '2019 Ettason 35th Anniversary Lucky Draw for WeChat', // 分享描述
                    success: function () {
                        console.info('分享成功！');
                        // 用户确认分享后执行的回调函数
                    },
                    cancel: function () {
                        console.info('取消分享！');
                        // 用户取消分享后执行的回调函数
                    }
                };
                wx.onMenuShareTimeline(options); // 分享到朋友圈
                wx.onMenuShareAppMessage(options); // 分享给朋友
            });
            /*wx.error(function(error){
                console.log(error);
            });*/
        }

        // 页面加载完之后进行操作
        $(document).ready(function(){
            // 注意这里的参数
            // apis 使用的参数是 字符串的拼接 这个是和 php 的方法中的处理相对应的
            getjssdkconfig();
        });

  </script>

四、关键的几点

1、JSON.parse()

在拿到返回的 json 数据之后，需要 JSON.parse()，否则是不正确的 js 对象，报 config:fail 错误

2、分享出去的链接点击之后配置失败

这个主要是因为分享出去之后，由于微信加了几个参数，导致存在问题。

网上存在解决方案就是 将 & 进行替换：

shareLinkUlr = shareLinkUlr.replace(/\&/g, '%26'); // 将 & 替换成 %26 

3.jsapiList为空并不影响分享功能，只要config为ok即可。

五、总结

其实就是后端给个接口，返回微信配置提供给前端就完事了。😜

⬆️