微信自定义分享链接

微信自定义分享链接

微信现在是众多公司营销的重点。
遍布朋友圈和消息群组里的html5各位可能也是天天见了,不过自从微信更新了官方api后,对整个微信内的页面管控都严格了不少。而官方的分享卡片,是众多在微信生态中传播的html5静态页面的一个重点。不过很多人会发现分享的图片和摘要达不到预期。这篇文章就讲下这个,供初次接触微信开发的前端参考。(其实官方的文档也蛮详细的了,不过有些地方官方没忽略了,容易给新人造成坑)这段话来自这里

你需要准备好的

PS:本文的方法只适合6.0.2.58以及更高版本的微信客户端。早期微信是可以通过WeixinJSBridge这个对象实现的,不过新版本必须是通过jssdk才能进行配置。旧版参考这个非官方的API
只说新版,不管新旧版本。下面这几个是超越代码之上的存在,没有这几个认证,即使配置全正确也不能获得正常的自定义分享内容

1.微信认证过的公众号

必须是经过认证的,没有认证的或者认证过期的都不可以微信公众平台

2.经过备案的域名

必须是备案过的,不然是无法使用的

3.后台服务器

前台页面需要后台服务器传过来一些配置参数,比如appId、timestamp、nonceStr、signature这几个参数都是后台从微信公众平台获取到的,
需要后台进行配合,所以一台服务器是必不可少的

完事具备,只欠开发

配置过程

1.绑定域名

首先你需要将需要分享的网址的域名绑定到微信公众平台上面,具体操作:先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”

2.获取access_token

利用公共号APPID、APPSECRET从微信服务器获取对应的access_token,这里是后台开发小伙伴的范围不多做解释,微信官方都有现成的damo,不过要注意的是官方的后台代码没有缓存access_token,很容易触发每日的2k次API调用上限,一旦到了上限,当天就无法继续认证
所以后台需要存一下

3.前端验证配置

下面才是属于前端小伙伴的工作范围,官网上的后台是不能直接通过ajax直接获取到需要的参数,可以让后台小伙伴改一下,我这里就是通过ajax直接调用的后台的接口,不然你需要吧文件名的后缀更改为.php或者.jsp。
3.1 引入js文件
在分享的页面需要引入一个微信官方的js文件,支持https(这里有个坑,如果你的页面是https的话就需要引入https路径的js,要不然会很精彩)

<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

3.2 通过ajax获取参数
前台通过ajax调后台小伙伴写的接口,把需要配置的参数获取到,你需要得到着四个参数:appId、timestamp、nonceStr、signature
这里有个坑,你需要把当前分享的页面的url传到后台去,必须动态的获取当前页面,而且一定要对url进行编码,要不然会不起作用

    var localUrl = encodeURIComponent(location.href.split('#')[0]);
    var url = "wechatShare?url=" + localUrl;
    var nonceStr,signature,timestamp,appId,shareUrl;
    $.ajax({
        url: ip() + url,
        beforeSend: function (xhr) {
            xhr.setRequestHeader("Token", getCookie("token"));
        },
        type: 'GET',
        data: '',
        dataType: "json",
        contentType: 'application/json',
        success: function (result) {
            appId = result.data.appid;
            nonceStr = result.data.nonceStr;
            signature = result.data.signature;
            timestamp = result.data.timestamp;
            shareUrl = result.data.url;   // 这个url就是分享的地址,就是传到后台的地址
        },
        error: function (err) {
            errorCallback(err);
        },
    });

3.3 通过微信config接口注入配置

wx.config({
     debug: false,   // 默认为false  为true的时候是调试模式,会打印出日志
     appId: appId,
     timestamp: timestamp,
     nonceStr: nonceStr,
     signature: signature,
     jsApiList: [
          'checkJsApi',
          'onMenuShareTimeline',
          'onMenuShareAppMessage',
          'onMenuShareQQ',
          'onMenuShareWeibo'
     ]
});

3.4 配置自定义分享内容

window.share_config = {
     'share': {
          'imgUrl': 'https://www.jing-cloud.com/images/logo_share.png',  // 这里是需要展示的图标
          'desc': '采用比特币钱包加密技术,密码存放在你自己的设备中,我们不存储密码',  // 这是分享展示的摘要
          'title' : '钥匙盒子-您随身的密码库',   // 这是分享展示卡片的标题
          'link': shareUrl,   // 这里是分享的网址
          'success':function(rr){
                console.log('成功' + JSON.stringify(rr))
          },
          'cancel': function (tt) {
                console.log('失败' + JSON.stringify(tt));
          }
     }
};
wx.ready(function () {
     wx.onMenuShareAppMessage(share_config.share);  // 微信好友
     wx.onMenuShareTimeline(share_config.share);    // 微信朋友圈
     wx.onMenuShareQQ(share_config.share);          // QQ
});

最后附上微信jssdk开发文档

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值