需求
為客戶做微信公眾號(hào)的內(nèi)容伐割，客戶要求分享頁(yè)面的時(shí)候能顯示自己的縮略圖，標(biāo)題與內(nèi)容笙隙。
微信默認(rèn)分享的樣式一般是： 標(biāo)題洪灯，內(nèi)容， 縮略圖竟痰。一般如果沒有自定義分享樣式的話签钩，微信會(huì)選取頁(yè)面title作為標(biāo)題，頁(yè)面的鏈接作為內(nèi)容坏快。這樣使得分享樣式很不友好铅檩。因此我們想在分享的時(shí)候增加自己的標(biāo)識(shí)，自己的內(nèi)容與圖標(biāo)假消。這樣不僅樣式好看柠并，而且增加自己公眾號(hào)的知名度。
準(zhǔn)備工作
參考學(xué)習(xí)鏈接（微信官方的開放開發(fā)文檔）：https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115
經(jīng)過借鑒上面的微信開發(fā)文檔富拗，得知大致的解決方法：調(diào)用微信的JS-SDK實(shí)現(xiàn)自定義微信分享的效果臼予，但是調(diào)用過程有些繁瑣。要求也比較嚴(yán)格啃沪。
前提：1.要有個(gè)通過實(shí)名認(rèn)證的微信服務(wù)號(hào)一個(gè)粘拾。 2.一個(gè)ICP備案的域名。 3.通過AppId和AppSecret請(qǐng)求accessToken,然后通過accessToken獲取jsapi_ticket创千，生成config接口所需參數(shù)（timestamp缰雇，?nonceStr，?signature）（這些都是后臺(tái)獲取的追驴，具體如何獲取的這里不多說械哟，本文章重點(diǎn)簡(jiǎn)述前端工作部分）。
以上前端調(diào)用的微信wx.config API所需的參數(shù)都獲取好之后殿雪，就可以開始我們前端的工作了暇咆。
具體描述
1.引入js文件?
vue： 1.安裝 install? weixin-js-sdk -dev? 2. 在main.js中引入 import wx from 'weixin-js-sdk' . （如若不使用vue開發(fā)項(xiàng)目，可引入：<script typet="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
2. 在main.js中編寫函數(shù)wxShare ,? 首先通過請(qǐng)求后臺(tái)數(shù)據(jù)獲取到（appId,?timestamp，?nonceStr爸业，?signature), 然后調(diào)用wx.config接口查看是否連接成功其骄。 具體代碼如下：
在子頁(yè)面中可通過：this.wxShare({title: '您想要展示的標(biāo)題’, desc: ‘您想要展示的內(nèi)容', link: ‘當(dāng)前頁(yè)面的url’, imgUrl: ‘您想要展示的縮略圖地址' , success: function(){success } });
總結(jié)注意
1. 在以上代碼中調(diào)試的時(shí)候把，config中的debug設(shè)置為true, 這樣你在調(diào)試的時(shí)候扯旷，如果出錯(cuò)或者成功拯爽，頁(yè)面會(huì)彈窗提示，很方便钧忽。
2. 其中在向后臺(tái)獲取config接口所需的參數(shù)的時(shí)候毯炮，需要向后臺(tái)傳遞一個(gè)url參數(shù)（上述的wx_name為我們項(xiàng)目所需，您可以不傳）惰瓜，其中url必須要與當(dāng)前的頁(yè)面的url一致（鏈接#后面的不要）否副。 如果不一致，頁(yè)面會(huì)跳出 signature無效
3. undroid 和 ios 有時(shí)候會(huì)不一樣崎坊，例如在您剛進(jìn)入頁(yè)面www.text.cc的時(shí)候备禀，調(diào)用wx.config接口是對(duì)的，然后你跳轉(zhuǎn)到www.text.cc/pages就會(huì)提示奈揍，signature無效曲尸。如果您刷新頁(yè)面，會(huì)發(fā)現(xiàn)此問題就不存在了男翰。這是由于?ios在使用路由跳轉(zhuǎn)的時(shí)候url總是第一次進(jìn)入頁(yè)面的url另患， 因此此時(shí)您傳遞到后臺(tái)的url與當(dāng)前頁(yè)面不一致。 所以我們采用 url: Vue.prototype._isIos() ? Vue.prototype.g_first_url : url, 通過Vue.prototype._isIos() 函數(shù)判斷當(dāng)前系統(tǒng)類型蛾绎， 如果是ios 昆箕，我們則傳遞Vue.prototype.g_first_url（第一次進(jìn)入時(shí)的url ） 給后臺(tái)，若是undroid 就傳遞url 租冠。 其中：Vue.prototype.g_first_url = window.location.href.split('#')[0].toString();
以上就是全部?jī)?nèi)容鹏倘，寫出來是為了大家一起學(xué)習(xí)，如有不足顽爹，請(qǐng)補(bǔ)充纤泵。萬分感謝！
