微信内网页开发 - 微信分享（微信JS-SDK）

接口文档：微信JS-SDK说明文档

 

微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包

 

一、先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。

 

二、H5页面引入JS文件：http://res.wx.qq.com/open/js/jweixin-1.0.0.js

wx.config({

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

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

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

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

    signature: '',// 必填，签名，见附录1

    jsApiList: [] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2

});

 

三、因为AppSecret是放在服务端（不建议放在前端），所以从服务端获得以下信息：

1、输入参数： 待分享的页面url

输出参数：timestamp，nonceStr，signature

2、 函数逻辑：

先获取api_ticket （api_ticket 是用于调用微信卡券JS API的临时票据，有效期为7200 秒，通过access_token 来获取。type=jsapi）

http请求方式: GET

https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi

 

3、根据签名算法，生成签名

 

代码片段（Perl语言）：

sub createSignature {

    my $url = $_[0];

   

    my $timestamp = time();

    my $jsapi_ticket = getTicket();

    if ($jsapi_ticket->{errcode} ne "0" || $jsapi_ticket->{errmsg} ne "ok") {#接口错误返回

         return $jsapi_ticket;

    }

    $jsapi_ticket = $jsapi_ticket->{ticket};

    my $nonceStr = '';

    for (my $i = 0; $i < 30; $i++) {

        $nonceStr .= chr(65+int(rand(125-65)));

    }

 

    my $data = {

        'jsapi_ticket' => $jsapi_ticket,

        'nonceStr' => $nonceStr,

        'timestamp' => $timestamp,

        'url' => $url

    };

    my $signStr = 'jsapi_ticket=' . $data->{jsapi_ticket}

        . '&noncestr=' . $data->{nonceStr}

        . '&timestamp=' . $data->{timestamp}

        . '&url=' . $data->{url};

 

    my $signature = lc(sha1_hex($signStr));

    $data->{signature} = $signature;

    $data->{appId} = $WECHAT_APPID;

    delete ($data->{jsapi_ticket});

    delete ($data->{url});

 

    return $data;

}

 

四、通过ready接口处理成功验证

function shareWx(data,title,img){

    var config={

        debug: false, // 开启调试模式

        appId: data.appId, // 必填，公众号的唯一标识

        timestamp: data.timestamp, // 必填，生成签名的时间戳

        nonceStr: data.nonceStr, // 必填，生成签名的随机串

        signature: data.signature,// 必填，签名，见附录1

        jsApiList: ["onMenuShareTimeline","onMenuShareAppMessage","onMenuShareQQ","onMenuShareWeibo","onMenuShareQZone"] // 必填，需要使用的JS接口列表

    }

    //微信配置

    wx.config(config);

    wx.ready(function(){

       runWxShare(title,img);

    });

}

 

function runWxShare(title,img){

    var link="xxxx";

    var imgUrl="xxxx";

    

    var desc="";

    var title=title;

    var desc1=title;

    wx.onMenuShareTimeline({

        title:desc1, // 分享标题

        link: link, // 分享链接

        imgUrl: imgUrl, // 分享图标

        success: function () { 

           //用户分享成功后执行的回调函数

        },

        cancel: function () { 

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

        }

    });

    //分享到朋友

    wx.onMenuShareAppMessage({

        title:title, // 分享标题

        link: link, // 分享链接

        imgUrl: imgUrl, // 分享图标

        desc: desc, // 分享描述

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

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

        success: function () { 

           

        },

        cancel: function () { 

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

        }

    });

}