微信2.0分享自定义标题、图片、摘要、链接

今天做了一个微信自定义分享图片、标题、内容、链接的页面。因为微信1.0WeixinJSBridge的功能已经大部分停用,所以要用到微信2.0jweixin-1.0.0.js。下面详解一下使用的步骤:

1、首先登陆微信公众号【需要时已经认证过的公众号哦】,在公众号设置里填写自己网站的域名


微信2.0分享自定义标题、图片、摘要、链接_第1张图片
微信2.0分享自定义标题、图片、摘要、链接_第2张图片
 2、在基本设置里获取自己网站的appid和秘钥

微信2.0分享自定义标题、图片、摘要、链接_第3张图片
 3、根据秘钥和appid生成token,获取token的链接为:

https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET

 

4、根据access_token 获取ticket

获取的链接为:https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi

5、根据生成的ticket ,自定义字符串noncestr 和当前服务器的时间戳【秒数】,以及需要被分享的页面的完整url生成页面的签名signature,获取签名的地址为:http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign

 

到此微信2.0congfig中需要的重要的参数已经获取完毕,只需要在

 wx.config({

            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,    可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。

            appId: 'appid', // 必填,公众号的唯一标识

            timestamp:'1453948736' , // 必填,生成签名的时间戳

            nonceStr: 'noncestr', // 必填,生成签名的随机串

            signature: 'singature',// 必填,签名

             jsApiList: ['onMenuShareAppMessage'] // 必填,需要使用的JS接口列表

        });

注意生成签名的timestamp,nonceStr一定要和config中的一致。

自定义的内容在wx.ready中填写即可。

  wx.ready(function(){

            wx.onMenuShareAppMessage({

                title: 'title', // 分享标题

                desc: 'desc', // 分享描述

                link: 'url', // 分享链接

                imgUrl: 'url', // 分享图标

                type: 'link', // 分享类型,music、video或link,不填默认为link

                dataUrl: '', // 如果type是music或video,则要提供数据链接,默认为空

                success: function () { 

                  // alert("分享成功!");

                },

                cancel: function () { 

                    // 用户取消分享后执行的回调函数

                }

            });

            wx.error(function(res){

 

                // config信息验证失败会执行error函数,如签名过期导致验证失败

 

            });

 

        });

备注:需要在被分享的页面中引入jweixin-1.0.0.js
 
 

 

你可能感兴趣的:(javascript,开源项目)