H5使用微信JSSDK分享到朋友圈和好友茬高,獲取用戶unionID和基本資料。

自定義分享

在微信內(nèi)置瀏覽器環(huán)境中假抄,默認(rèn)是有分享功能的怎栽,但是標(biāo)題、簡(jiǎn)述和頭圖都是不能自定義的宿饱,在分享時(shí)會(huì)抓取網(wǎng)頁(yè)中的信息熏瞄。

類似這樣(圖文無關(guān))

默認(rèn)分享

這樣的消息看起來不是太友好,有時(shí)候?yàn)榱藵M足產(chǎn)品運(yùn)營(yíng)的需求我們需要自定義分享出去的標(biāo)題谬以、簡(jiǎn)述和圖片(看看人家拼多多的分享文案)巴刻。

要實(shí)現(xiàn)自定分享內(nèi)容,首先在需要分享功能的頁(yè)面中引入微信jssdk蛉签,初始化配置信息胡陪。


<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>

然后初始化微信的配置信息沥寥。


/*

    * 注意:

    * 1. 所有的JS接口只能在公眾號(hào)綁定的域名下調(diào)用,公眾號(hào)開發(fā)者需要先登錄微信公眾平臺(tái)進(jìn)入“公眾號(hào)設(shè)置”的“功能設(shè)置”里填寫“JS接口安全域名”柠座。

    * 2. 如果發(fā)現(xiàn)在 Android 不能分享自定義內(nèi)容邑雅,請(qǐng)到官網(wǎng)下載最新的包覆蓋安裝,Android 自定義分享接口需升級(jí)至 6.0.2.58 版本及以上妈经。

    * 3. 常見問題及完整 JS-SDK 文檔地址:http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html

    *

    * 開發(fā)中遇到問題詳見文檔“附錄5-常見錯(cuò)誤及解決辦法”解決淮野,如仍未能解決可通過以下渠道反饋:

    * 郵箱地址:weixin-open@qq.com

    * 郵件主題:【微信JS-SDK反饋】具體問題

    * 郵件內(nèi)容說明:用簡(jiǎn)明的語言描述問題所在,并交代清楚遇到該問題的場(chǎng)景吹泡,可附上截屏圖片骤星,微信團(tuán)隊(duì)會(huì)盡快處理你的反饋。

    */

    wx.config({

        debug: true, //debug模式下會(huì)alert一些調(diào)試信息方便開發(fā)調(diào)試

        appId: '<?php echo $signPackage["appId"];?>',

        timestamp: <?php echo $signPackage["timestamp"];?>,

        nonceStr: '<?php echo $signPackage["nonceStr"];?>',

        signature: '<?php echo $signPackage["signature"];?>',

        jsApiList: [

            // 所有要調(diào)用的 API 都要加到這個(gè)列表中

            'onMenuShareTimeline', //分享到朋友圈

            'onMenuShareAppMessage', //分享給朋友

            'onMenuShareQQ' //分享到QQ

        ]

    });

    wx.ready(function () {

        // 在這里調(diào)用 API

        var options = {

            title: '十七度是一個(gè)好網(wǎng)站', // 分享標(biāo)題

            link: 'https://www.shiqidu.com/news/detail/id/1', // 分享鏈接爆哑,記得使用絕對(duì)路徑洞难,不能用document.URL

            imgUrl: 'http://www.shiqidu.com/Uploads/News/2016-11/1477995152201598.jpg', // 分享圖標(biāo)

            desc: '程序員的后花園', // 分享描述

            success: function () {

                console.info('分享成功!');

                // 用戶確認(rèn)分享后執(zhí)行的回調(diào)函數(shù)

            },

            cancel: function () {

                console.info('取消分享揭朝!');

                // 用戶取消分享后執(zhí)行的回調(diào)函數(shù)

            }

        };

        wx.onMenuShareTimeline(options); // 分享到朋友圈

        wx.onMenuShareAppMessage(options); // 分享給朋友

        wx.onMenuShareQQ(options); // 分享到QQ

    });

如上圖队贱,在初始化配置的時(shí)候,我們需要一些參數(shù):appId,nonceStr,signature等潭袱。

如何獲取這些信息呢柱嫌,在微信官方sdk demo中,已經(jīng)為我們寫好了大半屯换,改改直接用即可编丘。

下載PHP版SDK,下載完成后解壓放到你的項(xiàng)目中彤悔。

引入SDK嘉抓,傳入appIdappSecret調(diào)用GetSignPackage方法,獲得signPackage傳到頁(yè)面js中完成微信配置初始化即可蜗巧。


require_once "jssdk.php";

$jssdk = new JSSDK("你的appId", "你的appSecret");

$signPackage = $jssdk->GetSignPackage();

然后在微信中打開我們的頁(yè)面,在debug模式下蕾盯,在進(jìn)入頁(yè)面的時(shí)候幕屹,會(huì)alert出調(diào)試信息,如果一些OK的話级遭,點(diǎn)擊右上角的三個(gè)點(diǎn)望拖,點(diǎn)擊分享到朋友圈或分享給好友,這時(shí)也會(huì)alert出一些調(diào)試信息挫鸽,以便你debug说敏。如果一切順利的話,分享功能到此就結(jié)束了丢郊。

分享出去的消息類似這樣盔沫。(圖文無關(guān))

自定義分享樣式

獲取微信用戶信息和unionID

有時(shí)候医咨,我們希望獲取用戶的unionid和昵稱頭像這些信息,當(dāng)然必須是在用戶授權(quán)之后架诞。

以tp3.2為例拟淮,方法很簡(jiǎn)單,話不多說直接上代碼谴忧。

首先調(diào)用微信授權(quán)api很泊,傳入APPID回調(diào)地址,在用戶同意授權(quán)后沾谓,會(huì)跳轉(zhuǎn)到這個(gè)回調(diào)地址委造。


$str = "https://www.shiqidu.com/test/getWechatInfoCallbak";

$str_url = urlencode($str);

$url = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' . "[你的APPID]" . '&redirect_uri=' . "[用戶授權(quán)后的回跳地址]" . '&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect';

header("Location:" . $url);

然后在指定的getWechatInfoCallbak方法中會(huì)到一個(gè)code,拿到code調(diào)用微信api獲取access_tokenopenid均驶。拿到這兩個(gè)參數(shù)后在調(diào)用微信userinfo api獲取用戶基本資料unionid昏兆。


$code = I('code');

$state = I('state');

// 獲取access_token和openid

$accessTokenUrl = "https://api.weixin.qq.com/sns/oauth2/access_token?appid=" . "[你的APPID]" . "&secret=" . "[你的AppSecret]" . "&code={$code}&grant_type=authorization_code";

$accessTokenResult = json_decode(curl_request($accessTokenUrl), 1);

$access_token = $accessTokenResult['access_token'];

$openid = $accessTokenResult['openid'];

!$openid && exit("Openid獲取失敗");

// 獲取userInfo

$getUserInfoUrl = "https://api.weixin.qq.com/sns/userinfo?access_token={$access_token}&openid={$openid}&lang=zh_CN";

$userInfoResult = json_decode(curl_request($getUserInfoUrl), 1);

!is_array($userInfoResult) && exit("用戶信息獲取失敗,請(qǐng)重試~");

// 返回的數(shù)據(jù)中包含unionid

$unionId = $userInfoResult['unionid'];

原文來自十七度 https://www.shiqidu.com/d/673

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市辣恋,隨后出現(xiàn)的幾起案子亮垫,更是在濱河造成了極大的恐慌,老刑警劉巖伟骨,帶你破解...
    沈念sama閱讀 218,525評(píng)論 6 507
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件饮潦,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡携狭,警方通過查閱死者的電腦和手機(jī)继蜡,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,203評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來逛腿,“玉大人稀并,你說我怎么就攤上這事〉ツ” “怎么了碘举?”我有些...
    開封第一講書人閱讀 164,862評(píng)論 0 354
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)搁廓。 經(jīng)常有香客問我引颈,道長(zhǎng),這世上最難降的妖魔是什么境蜕? 我笑而不...
    開封第一講書人閱讀 58,728評(píng)論 1 294
  • 正文 為了忘掉前任蝙场,我火速辦了婚禮,結(jié)果婚禮上粱年,老公的妹妹穿的比我還像新娘售滤。我一直安慰自己,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,743評(píng)論 6 392
  • 文/花漫 我一把揭開白布完箩。 她就那樣靜靜地躺著赐俗,像睡著了一般。 火紅的嫁衣襯著肌膚如雪嗜憔。 梳的紋絲不亂的頭發(fā)上秃励,一...
    開封第一講書人閱讀 51,590評(píng)論 1 305
  • 那天,我揣著相機(jī)與錄音吉捶,去河邊找鬼夺鲜。 笑死,一個(gè)胖子當(dāng)著我的面吹牛呐舔,可吹牛的內(nèi)容都是我干的币励。 我是一名探鬼主播,決...
    沈念sama閱讀 40,330評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼珊拼,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼食呻!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起澎现,我...
    開封第一講書人閱讀 39,244評(píng)論 0 276
  • 序言:老撾萬榮一對(duì)情侶失蹤仅胞,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后剑辫,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體干旧,經(jīng)...
    沈念sama閱讀 45,693評(píng)論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,885評(píng)論 3 336
  • 正文 我和宋清朗相戀三年妹蔽,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了椎眯。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,001評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡胳岂,死狀恐怖编整,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情乳丰,我是刑警寧澤掌测,帶...
    沈念sama閱讀 35,723評(píng)論 5 346
  • 正文 年R本政府宣布,位于F島的核電站产园,受9級(jí)特大地震影響汞斧,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜淆两,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,343評(píng)論 3 330
  • 文/蒙蒙 一断箫、第九天 我趴在偏房一處隱蔽的房頂上張望拂酣。 院中可真熱鬧秋冰,春花似錦、人聲如沸婶熬。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,919評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至虽另,卻和暖如春暂刘,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背捂刺。 一陣腳步聲響...
    開封第一講書人閱讀 33,042評(píng)論 1 270
  • 我被黑心中介騙來泰國(guó)打工谣拣, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人族展。 一個(gè)月前我還...
    沈念sama閱讀 48,191評(píng)論 3 370
  • 正文 我出身青樓森缠,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親仪缸。 傳聞我的和親對(duì)象是個(gè)殘疾皇子贵涵,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,955評(píng)論 2 355