微信公众平台开发配置及自定义分享

刚刚做了微信的自定义分享,折腾了好一会,完了记个笔记。
微信JS-SKD说明文档
本次测试需要:通过ICP备案的域名已认证的微信公众号

配置篇

1.设置》公众号设置》功能设置》JS接口安全域名

直接将域名填写进入就好,可以是yeli.studio ,也可以是abc.yeli.studio。此时是无法保存的,需要将MP_verify_XWsldS5dzRvbRcvT.txt下载下来拷贝到域名根目录下面,待会点击保存的时候,微信会通过链接:abc.yeli.studio/MP_verify_XWsldS5dzRvbRcvT.txt来验证是否可以访问。
补充:
test_nginx.conf

server {
        # the port your site will be served on
        listen      80;
        # the domain name it will serve for
        server_name abc.yeli.studio; # substitute your machine's IP address or FQDN
        charset     utf-8;

        # max upload size
        client_max_body_size 75M;   # adjust to taste

        # Django media
        location /media  {
            alias /root/application_all/media;  # your Django project's media files - amend as required
        }

        location /static {
            alias /root/application_all/static; # your Django project's static files - amend as required
        }

        # Finally, send all non-media requests to the Django server.
        location / {
            uwsgi_pass  unix:///root/application_all/project/register_site/activity.sock; # for a file socket
            include     /root/application_all/project/register_site/uwsgi_params; # the uwsgi_params file you installed
        }

    }

像这样的nginx配置根目录是没有对应的文件夹的,它直接对接到了程序应用。
此种情况可以在程序应用里面增加一个url路由,我使用Django,那么就是这样:
1.在urls.py中添加一个路由

urlpatterns = [
    ...
    url(r'MP_verify_XWsldS5dzRvbRcvT.txt',views.getMP_varify),
    ...
]

2.在views.py 中返回此文本MP_verify_XWsldS5dzRvbRcvT.txt中的字符串

def getMP_varify(request):
    return HttpResponse ("XWsldS5dzRvbRcvT")

点击保存,成功

设置域名

2.开发》基本配置

启用开发者,获得AppID、AppSecret两个参数
然后填写IP白名单,也就是你服务器所在的公网ip


启用开发者/设置IP白名单

服务端篇

由前端发送ajax到服务端获取,前端需要抓去当前页面url提交给服务端。
服务端的工作如下:
获取token:https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid={appid}&secret={secret}
通过token获取ticket:https://api.weixin.qq.com/cgi-bin/ticket/getticket?type=jsapi&access_token={token}
相关参数生成:
利用下面微信提供的sign.py文件,传入ticket和页面url即可。
http://demo.open.weixin.qq.com/jssdk/sample.zip
备注:链接中包含php、java、nodejs以及python的示例代码供第三方参考,第三方切记要对获取的accesstoken以及jsapi_ticket进行缓存以确保不会触发频率限制。
服务端返回json样例:

{
  appId:"wxb6d7b7803694fc83"
  jsapi_ticket:"kgt8ON7yVITDhtdwci0qeSFCSQshWFBoH3E_uwLdKTAex6sBMGa0x7Jk_-09rdTaErwM475Y1ScmIZkNcFeWNQ"
  nonceStr:"6WPMJHSpBzWLO0p"
  signature:"1fb234358370736216c1f76badb489fa1100e92d"
  timestamp:1505206494
  url:"http://abc.yeli.studio/"
}

至此,服务端的工作就完了

前端篇

在需要分享的页面中引入两个js文件
http://res.wx.qq.com/open/js/jweixin-1.2.0.js
wexin.js,wexin.js内容如下:

$.ajax({
   url:'http://abc.yeli.studio/get_wexin_params',
   type:'post',
   data:{
       "share_url":window.location.href.split('#')[0],
       "csrfmiddlewaretoken":$("input[name='csrfmiddlewaretoken']").val()
   },
   success:function(_data){
        wx.config({
            debug: false,
            appId: 'wxb6d7b7803694fc83', 
            timestamp: _data.timestamp, 
            nonceStr: _data.nonceStr, 
            signature: _data.signature,
            jsApiList: ["onMenuShareTimeline","onMenuShareAppMessage","onMenuShareQZone","onMenuShareQQ"] 
        });
        wx.ready(function () {

          var title='我是标题'
          var desc='我是描述内容'
          var link='http://abc.yeli.studio/' // 分享链接,该链接必须在公众号JS安全域名之下,`http://abc.yeli.studio/another_page`也是可以的
          var imageUrl='http://abc.yeli.studio/media/QQ20170911-150722copy.png'
              //分享到消息
          wx.onMenuShareAppMessage({
             title: title,
             desc: desc, 
             link: link,
             imgUrl: imageUrl,
             type: '', // 分享类型,music、video或link,不填默认为link
             dataUrl: '', // 如果type是music或video,则要提供数据链接,默认为空
             success: function () {
                 //分享成功
              },
             cancel: function () {
              // 取消分享
              }
          })
              //分享到朋友圈
          wx.onMenuShareTimeline({
            title: title, // 分享标题
            link: link, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            imgUrl: imageUrl, // 分享图标
            success: function () {
              // 分享成功
             },
            cancel: function () {
              // 取消分享
             }
          })
        })
     }
})

至此,网页的自定义内容分享完成。


我的博客 http://blog.xander-ye.com

微信公众号

推荐阅读更多精彩内容