[Solutions] micro-letter web links to share a custom picture and caption content

Share on page letter to how to customize the title, content and pictures?

Demand Overview

Micro letter can be forwarded directly link to this page, users open the micro-channel built-in browser can be shared to friends, circle of friends, QQ and other micro letter through the browser right corner. But this direct sharing, users see only a link, there is no graphic content.

The following diagram, Figure 1 is someone to share my link effect, 2 effect that I share with others. Users experience the two programs I think I do not have to say, one can see out.

 

 

Program to achieve

To reach the figure custom copy of the icon of the effect, we must adopt JS-SDK provides micro-channel, micro-channel JS-SDK is a micro-channel public platform for Web developers to provide web-based development within the micro-channel kits. Reference may be micro-channel JS-SDK documentation. (Public No. If you do not understand technology or without authentication, using wecard tools can also be related to the effect of implementation.)

 

Specific steps:

1, to prepare a record of the domain name space and bind to the domain name space to go.

2, log micro letter public platform, into the "number of public settings" feature set which fill js port security domain, this is to fill your browser to open a micro letter domain address, you can not add an IP address.

3, the introduction js file, you need to call the page js JS file access interface.

http://res.wx.qq.com/open/js/jweixin-1.2.0.js

　　

4, through the config interface injection permission and verify the configuration (this step is considered the most critical step of the whole step, you must correct configuration information can be called JS-SDK.)

wx.config({
    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
    appId: '', // 必填，公众号的唯一标识
    timestamp: , // 必填，生成签名的时间戳
    nonceStr: '', // 必填，生成签名的随机串
    signature: '',// 必填，签名，见附录1
    jsApiList: [] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
});

　　

 

详细接入代码

+ (currentLink.indexOf("?") > -1 ? ("&u=" + "${u!}" + "&t=" + "${t!}" + "&o=" + "${o!}" + "&s=" + "${s!}") : ("?u=" + "${u!}" + "&t=" + "${t!}" + "&o=" + "${o!}" + "&s=" + "${s!}"));
           shareLink = shareLink  + (shareLink.indexOf("?") > -1 ? ("&city=" + "深圳") : ("?city=" + "深圳"));
    var shareImgUrl = "${IMGPATH!}/images/banner2.png";
    var shareGid = "";

    wx.ready(function () {
        //分享给朋友
        wx.onMenuShareAppMessage({
            title: shareTitle,
            desc: shareDesc,
            link: shareLink,
            imgUrl: shareImgUrl,
            success: function (res) {
                   shared(shareLink, "friend", shareGid);
               },
               fail: function (res) {
                 alert(JSON.stringify(res));
               }
        });
        //分享到朋友圈
        wx.onMenuShareTimeline({
            title: shareTitle,
            desc: shareDesc,
            link: shareLink,
            imgUrl: shareImgUrl,
            success: function (res) {
                   shared(shareLink, "Timeline", shareGid);
               },
               fail: function (res) {
                 alert(JSON.stringify(res));
               }
        });
          //分享到QQ
        wx.onMenuShareQQ({
            title: shareTitle,
            desc: shareDesc,
            link: shareLink,
            imgUrl: shareImgUrl,
            success: function (res) {
                   shared(shareLink, "QQ", shareGid);
               },
               fail: function (res) {
                 alert(JSON.stringify(res));
               }
        });
          //分享到腾讯QQ
        wx.onMenuShareWeibo({
            title: shareTitle,
            desc: shareDesc,
            link: shareLink,
            imgUrl: shareImgUrl,
            success: function (res) {
                   shared(shareLink, "Weibo", shareGid);
               },
               fail: function (res) {
                 alert(JSON.stringify(res));
               }
        });
          //分享到QZone
        wx.onMenuShareQZone({
            title: shareTitle,
            desc: shareDesc,
            link: shareLink,
            imgUrl: shareImgUrl,
            success: function (res) {
                   shared(shareLink, "QZone", shareGid);
               },
               fail: function (res) {
                 alert(JSON.stringify(res));
               }
        });
    });

    function shared(url, type, gid){
        var rUrl = basePath + "/share/add?type=" + type + "&url=" + encodeURI(url);
        if(!!gid) {
            rUrl += "&gid=" + gid;
        }
        $.ajax({
            type: "GET",
            url: rUrl,
            dataType: "json",
            success: function(rs){
                //alert("分享成功");
            }
        });
    }
   " _ue_custom_node_="true">