最简单方法,自定义微信分享内容!

为了上线一个公司的演示demo系统,今天折腾了一下,尝试了几种不同的自定义微信分享内容的方法,最后感觉php环境下设置是最方便、易懂的,适合新手配置。下面就做一个简单的记录:

第一步:微信公众平台设置安全域名

JS接口安全域名

只有在微信平台后台,添加需要自定义分享内容页面所在的域名为安全域名,分享接口才能顺利的被调用。

第二步:获取微信公众号的AppID和AppSecret

AppID和AppSecret

注:AppSecret十分重要,千万不要泄露!

第三步:引入微信指定JS文件

在页面文件中,引入:

<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>

并在项目目录中添加文件:

access_token.php、jsapi_ticket.php、jssdk.php

上述文件可从微信公众平台wiki下的demo中下载

第四步

将需要设置分享的页面,改为 *.php的文件,并在开头位置添加以下代码:

<?php
require_once "jssdk.php";
$jssdk = new JSSDK("AppID", "AppSecret");
$signPackage = $jssdk->GetSignPackage();
?>

第五步:在页面中配置分享内容,代码如下:

<script>
        wx.config({
            debug: false,
            appId: '<?php echo $signPackage["appId"];?>',
            timestamp: '<?php echo $signPackage["timestamp"];?>',
            nonceStr: '<?php echo $signPackage["nonceStr"];?>',
            signature: '<?php echo $signPackage["signature"];?>',
            jsApiList: [
                // 所有要调用的 API 都要加到这个列表中
                'checkJsApi', //判断当前客户端版本是否支持指定JS接口
                'onMenuShareTimeline', //分享给好友
                'onMenuShareAppMessage', //分享到朋友圈
            ]
        });
        wx.ready(function() {
            // 在这里调用 API
            //自定义分享朋友圈
            wx.onMenuShareTimeline({
                title: '新零售场景化DEMO-企加云', // 分享标题
                link: 'https://itrigger.cn/s-demo/m/', // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                imgUrl: 'https://itrigger.cn/s-demo/images/demo_share.jpg', // 分享图标
                success: function() {
                    // 用户确认分享后执行的回调函数
                },
                cancel: function() {
                    // 用户取消分享后执行的回调函数
                }
            });

            //自定义分享给好友
            wx.onMenuShareAppMessage({
                title: '新零售场景化DEMO', // 分享标题
                desc: '企加云-新零售智慧门店解决方案服务商', // 分享描述
                link: 'https://itrigger.cn/s-demo/m/', // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                imgUrl: 'https://itrigger.cn/s-demo/images/demo_share.jpg', // 分享图标
                type: 'link', // 分享类型,music、video或link,不填默认为link
                dataUrl: '', // 如果type是music或video,则要提供数据链接,默认为空
                success: function() {
                    // 用户确认分享后执行的回调函数
                },
                cancel: function() {
                    // 用户取消分享后执行的回调函数
                }
            });
        });
    </script>

以上只是常用的两个调用,完整微信调用api可查看公众平台wiki

至此,微信自定义分享配置完毕。

几个注意点:
  • 如果网站页面是https,那么因为的微信地址也需要改为https
  • 分享回调可用于统计等,可不填
  • 如果仍没有自定义分享效果,在微信公众平台后台添加IP白名单即可!
  • 因上述方法需要对每个页面进行单独配置,只适合页面较少的情况。
背景:B2B SaaS产品 创业公司;
人设:产品转岗的运营人;
目标:完善B2B SaaS产品运营体系,完成全年引流1000+Leads的目标;
地点:浙江 · 杭州;
时间:2018年4月8日;
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,455评论 25 708
  • 转载链接 注:本文转载知乎上的回答 作者:初雪 链接:https://www.zhihu.com/question...
    pengshuangta阅读 28,763评论 9 295
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,973评论 19 139
  • 独处时可以看出一个人的品质 很显然,我们都是一个喜欢欺骗自我的坏人。一边讨好自己,一边却在折磨自己。我绝对...
    诺承泽啊阅读 253评论 0 0
  • 只有为了那些没有希望的事情,我们才获得希望 文/余大满 我不知道自己算不算一个星战迷,但在所有系列电影中,星球大战...
    大满书坊阅读 971评论 0 0