需求

成都創(chuàng)新互聯(lián)10多年企業(yè)網(wǎng)站設(shè)計服務(wù);為您提供網(wǎng)站建設(shè),網(wǎng)站制作,網(wǎng)頁設(shè)計及高端網(wǎng)站定制服務(wù),企業(yè)網(wǎng)站設(shè)計及推廣,對iso認證等多個領(lǐng)域擁有多年的網(wǎng)站運維經(jīng)驗的網(wǎng)站建設(shè)公司。

最近在做一個項目需求，分享領(lǐng)好書活動，獲取用戶的個人信息以及unionID，并誘導用戶分享給好友或朋友圈，達到裂變拉新的目的。在做的過程中遇到了一些坑的地方，所以回過來總結(jié)一下

技術(shù)方案

使用微信JS-SDK自定義分享到好友和分享到朋友圈

實現(xiàn)步驟

1、要實現(xiàn)微信H5網(wǎng)頁自定義分享功能，必須先熟悉下微信公眾平臺開發(fā)文檔，具體文檔里面說的很詳細，這里說下需要注意的點，別忘了綁定開發(fā)者權(quán)限，還有綁定js安全域名，要不然有可能會報redirect_uri參數(shù)錯誤。

2、首先一般在做微信H5網(wǎng)頁活動，都需要獲取用戶的個人信息，這就需要用戶授權(quán)，一般授權(quán)有兩種方式，一種是靜默授權(quán)，一種是網(wǎng)頁授權(quán)，這個在微信開發(fā)文檔說的很詳細。

對于已關(guān)注公眾號的用戶，如果用戶從公眾號的會話或者自定義菜單進入本公眾號的網(wǎng)頁授權(quán)頁，即使是scope為snsapi_userinfo，也是靜默授權(quán)，用戶無感知
一般網(wǎng)頁授權(quán)流程分為四步：

①引導用戶進入授權(quán)頁面同意授權(quán)，獲取code

②通過code換取網(wǎng)頁授權(quán)access_token（與基礎(chǔ)支持中的access_token不同）

③如果需要，開發(fā)者可以刷新網(wǎng)頁授權(quán)access_token，避免過期

④通過網(wǎng)頁授權(quán)獲取用戶基本信息（openid 、UnionID、個人頭像、性別、省市、微信昵稱等）

3、下面是具體實現(xiàn)代碼，說下大概思路，通過判斷參數(shù)是否在微信瀏覽器中打開，是否讓用戶授權(quán)，并重定向到微信的接口拿到code后通過接口傳給后端返回用戶的基本信息。

// 用戶授權(quán)
 if (this.$route.query.from) {
   // 跳轉(zhuǎn)微信頁面
    let _nowUrl = window.location.href.split("?")[0] +`?pictureId=${this.$route.query.pictureId}`; // 參數(shù)拼接
    let _shareUrl = `https://open.weixin.qq.com/connect/oauth3/authorize?appid=微信公眾號APPID&redirect_uri=${encodeURIComponent(_nowUrl)}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect`;
    window.location.href = _shareUrl; // 重定向到這個定義的URL
  }
  // 通過code獲取用戶信息
  if (this.$route.query.code) {
   let _code = this.$route.query.code;
   this.handleWechatMsg(_code);
  }

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

網(wǎng)站題目：記錄一次開發(fā)微信網(wǎng)頁分享的步驟-創(chuàng)新互聯(lián)
分享地址：http://weahome.cn/article/epoid.html