快捷導(dǎo)航

微信自定義分享鏈接信息（標(biāo)題，圖片和內(nèi)容）實(shí)現(xiàn)過(guò)程詳解

更新時(shí)間：2019年09月04日 10:51:55 作者：qwwszz1

這篇文章主要介紹了微信自定義分享鏈接信息（標(biāo)題，圖片和內(nèi)容）實(shí)現(xiàn)過(guò)程詳解,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下

網(wǎng)頁(yè)分享到微信要怎么才能自定義標(biāo)題，內(nèi)容和圖片呢？

需求概述

微信中可以直接轉(zhuǎn)發(fā)網(wǎng)頁(yè)鏈接，用戶(hù)在微信內(nèi)置瀏覽器中打開(kāi)后可以通過(guò)微信瀏覽器中右上角進(jìn)行分享到朋友，朋友圈，QQ等。但直接這樣分享的話，用戶(hù)看到的只是一條鏈接，沒(méi)有任何的圖文內(nèi)容。

如下圖，圖1是別人分享給我的鏈接效果，圖2是我分享給別人的效果。兩種方案的用戶(hù)體驗(yàn)我想都不用我多說(shuō)了，一眼就能看的出來(lái).

方案實(shí)現(xiàn)

要達(dá)到上圖自定義文案與圖標(biāo)的效果，必須要采用微信提供的JS-SDK，微信JS-SDK是微信公眾平臺(tái)面向網(wǎng)頁(yè)開(kāi)發(fā)者提供的基于微信內(nèi)的網(wǎng)頁(yè)開(kāi)發(fā)工具包?？蓞⒖嘉⑿臞S-SDK說(shuō)明文檔。（如果你不懂技術(shù)或者沒(méi)有認(rèn)證的公眾號(hào)，使用wecard工具也可以實(shí)現(xiàn)相關(guān)的效果。）

具體步驟：

1、準(zhǔn)備一個(gè)備案的域名和空間，綁定域名到該空間去。

2、登錄微信公眾平臺(tái)，進(jìn)入“公眾號(hào)設(shè)置”的功能設(shè)置里面填寫(xiě)js接口安全域名，這個(gè)要填寫(xiě)的是你微信瀏覽器要打開(kāi)的域名地址，不能添加IP地址。

3、引入js文件，在需要調(diào)用js接口的頁(yè)面接入JS文件。

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

4、通過(guò)config接口注入權(quán)限并驗(yàn)證配置（這一步算是整個(gè)步驟中最關(guān)鍵的一步，必須正確的配置信息才可以進(jìn)行調(diào)用JS-SDK。）

wx.config({
  debug: true, // 開(kāi)啟調(diào)試模式,調(diào)用的所有api的返回值會(huì)在客戶(hù)端alert出來(lái)，若要查看傳入的參數(shù)，可以在pc端打開(kāi)，參數(shù)信息會(huì)通過(guò)log打出，僅在pc端時(shí)才會(huì)打印。
  appId: '', // 必填，公眾號(hào)的唯一標(biāo)識(shí)
  timestamp: , // 必填，生成簽名的時(shí)間戳
  nonceStr: '', // 必填，生成簽名的隨機(jī)串
  signature: '',// 必填，簽名，見(jiàn)附錄1
  jsApiList: [] // 必填，需要使用的JS接口列表，所有JS接口列表見(jiàn)附錄2
});

詳細(xì)接入代碼

+ (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">

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: