2. 程式人生 > >VueJs單頁應用實現微信網頁授權及微信分享功能示例

VueJs單頁應用實現微信網頁授權及微信分享功能示例

阿新 • • 發佈：2018-11-10

在實際開發中，無論是做PC端、WebApp端還是微信公眾號等型別的專案的時候，或多或少都會涉及到微信相關的開發，最近公司專案要求實現微信網頁授權，並獲取微信使用者基本資訊的功能及微信分享的功能，現在總算完成了，但開發過程中遇到好幾個坑。廢話不多說了，開始正題。

描述點

  1. 微信相關開發知識瞭解
  2. 怎麼樣實現微信相關功能本地測試
  3. 微信網頁授權
  4. 微信分享

微信相關開發知識瞭解

  1. 微信公眾號的appId，AppSecret
    1. 當我們註冊一個微信公眾號後，便能夠得到一個appId(每個微信公眾號只有一個，一個微信公眾號唯一的標識)和appSecret(可以進行重置)，這兩個資訊是進行微信公眾號開發必不可少的，因為微信公眾號中幾乎所有功能的開發都與這兩個資訊相關。
  2. 微信公眾號中IP白名單
    1. 在開發微信公眾功能的時候，需要我們新增IP白名單，這樣以便能夠獲取到access_token，關於access_token的介紹請看這裡https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140183
  3. 網頁授權域名以及JS介面安全域名
    1. 網頁授權域名:在我們的應用中需要微信使用者進行登入、獲取微信使用者基本資訊的時候，需要設定這個域名
    2. JS介面安全域名:在我們的應用中需要實現微信分享等功能，需要設定這個域名。

怎麼樣實現微信相關功能本地測試

相對很多人都對這個問題比較感興趣，因為在進行涉及到微信公眾號中功能開發的時候，預設情況下我們是不能進行本地測試的，也就是說測試都需要將程式碼進行部署才測試，但這非常不利於我們的測試開發，其實進行本地測試開發很簡單，只需要我們有一個域名就可以了，然後將我們本地的ip對映到這個域名上，就可以本地測試了。下面我就說說我是怎麼做本地測試的.

因為購買域名需要進行備案操作之類的，比較麻煩，所以一般第三方平臺就可以讓我們得到一個域名。我是在natpp(ngrok)這個網站上註冊的https://natapp.cn/

我是花了五元錢購買了一個月的隧道，因為免費的不怎麼靠譜，畢竟是免費的，哈哈。

注意，我們不能直接使用這個隧道，因為這個隧道是三級域名，無法用於微信開發，需要繫結一個二級域名或自主域名

當繫結完域名之後，在本地我們需要將本地ip進行對映穿透操作。

windows下開啟dos視窗，輸入 natapp -authtoken 你的隧道的authtoken

將你在上面設定的二級域名新增到上述說的網頁授權域名以及JS介面安全域名

接下來便可以進行本地測試了.最後說一下，開發過程中下載微信開發工具進行除錯也是不錯的選擇，下載地址https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1455784140

微信網頁授權

微信網頁授權的目的主要是實現三方站點微信的登入、獲取微信使用者資訊等

實現微信網頁授權獲取微信使用者的基本資訊

先判斷當前瀏覽器是不是微信內建瀏覽器,微信網頁授權api： https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140842

?

1

2

3

4

5

6

7

8

isweixin() {

   const ua = window.navigator.userAgent.toLowerCase();

   if(ua.match(/MicroMessenger/i) == 'micromessenger'){

     return true;

   } else {

     return false;

   }

 },

1 第一步：使用者同意授權，獲取code

2 第二步：通過code換取網頁授權access_token

3 第三步：重新整理access_token（如果需要）

4 第四步：拉取使用者資訊(需scope為 snsapi_userinfo)

5 附：檢驗授權憑證（access_token）是否有效

微信API裡面關於這些都介紹得比較清楚的，我就說說在這個過程中我所遇到的問題，以及解決辦法

在第一步獲取code的時候，因為這個code在五分鐘之內只能夠使用一次，所以必須對這個code進行快取起來。否則會出現"errcode":40163,"errmsg":"code been used, hints: [ req_id: nOCEBa0466th12 ]"或{"errcode":40029,"errmsg":"invalid code"} 錯誤。

微信分享

微信分享其實用得非常得多，我就簡單說下在vue-cli中怎麼引入微信分享的sdk，以及怎麼樣實現分享功能.

微信分享APi: https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115

首先引入sdk:

?

1

npm install weixin-js-sdk --save-dev

然後通過require或者import引入

?

1

import wx from 'weixin-js-sdk';

微信分享中最重要的是獲取到簽名，才能夠實現微信的分享

再根據當前的url去獲取到所需要的引數來完成簽名的驗證，引數主要用appId、nonceStr、timestamp、signature，然後通過wx物件的config方法去進行配置驗證簽名

?

1

2

3

4

5

6

7

8

9

10

11

12

wx.config({

    debug: false,

    appId: appId, // 和獲取Ticke的必須一樣------必填，公眾號的唯一標識

    timestamp:timestamp, // 必填，生成簽名的時間戳

    nonceStr: nonceStr, // 必填，生成簽名的隨機串

    signature: signature,// 必填，簽名，見附錄1

    //需要分享的列表項:傳送給朋友，分享到朋友圈，分享到QQ，分享到QQ空間

    jsApiList: [

     'onMenuShareAppMessage','onMenuShareTimeline',

     'onMenuShareQQ','onMenuShareQZone'

    ]

   });

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

//處理驗證失敗的資訊

wx.error(function (res) {

 logUtil.printLog('驗證失敗返回的資訊:',res);

});

//處理驗證成功的資訊

wx.ready(function () {

//       alert(window.location.href.split('#')[0]);

 //分享到朋友圈

 wx.onMenuShareTimeline({

  title: _this.newDetailObj.title, // 分享標題

  link: window.location.href.split('#')[0], // 分享連結，該連結域名或路徑必須與當前頁面對應的公眾號JS安全域名一致

  imgUrl: _this.newDetailObj.thu_image, // 分享圖示

  success: function (res) {

   // 使用者確認分享後執行的回撥函式

   logUtil.printLog("分享到朋友圈成功返回的資訊為:",res);

   _this.showMsg("分享成功!")

  },

  cancel: function (res) {

   // 使用者取消分享後執行的回撥函式

   logUtil.printLog("取消分享到朋友圈返回的資訊為:",res);

  }

 });

 //分享給朋友

 wx.onMenuShareAppMessage({

  title: _this.newDetailObj.title, // 分享標題

  desc: _this.desc, // 分享描述

  link: window.location.href.split('#')[0], // 分享連結，該連結域名或路徑必須與當前頁面對應的公眾號JS安全域名一致

  imgUrl: _this.newDetailObj.thu_image, // 分享圖示

  type: '', // 分享型別,music、video或link，不填預設為link

  dataUrl: '', // 如果type是music或video，則要提供資料鏈接，預設為空

  success: function (res) {

   // 使用者確認分享後執行的回撥函式

   logUtil.printLog("分享給朋友成功返回的資訊為:",res);

  },

  cancel: function (res) {

   // 使用者取消分享後執行的回撥函式

   logUtil.printLog("取消分享給朋友返回的資訊為:",res);

  }

 });

 //分享到QQ

 wx.onMenuShareQQ({

  title: _this.newDetailObj.title, // 分享標題

  desc: _this.desc, // 分享描述

  link: window.location.href.split('#')[0], // 分享連結

  imgUrl: _this.newDetailObj.thu_image, // 分享圖示

  success: function (res) {

   // 使用者確認分享後執行的回撥函式

   logUtil.printLog("分享到QQ好友成功返回的資訊為:",res);

  },

  cancel: function (res) {

   // 使用者取消分享後執行的回撥函式

   logUtil.printLog("取消分享給QQ好友返回的資訊為:",res);

  }

 });

 

 //分享到QQ空間

 wx.onMenuShareQZone({

  title: _this.newDetailObj.title, // 分享標題

  desc: _this.desc, // 分享描述

  link: window.location.href.split('#')[0], // 分享連結

  imgUrl: _this.newDetailObj.thu_image, // 分享圖示

  success: function (res) {

   // 使用者確認分享後執行的回撥函式

   logUtil.printLog("分享到QQ空間成功返回的資訊為:",res);

  },

  cancel: function (res) {

   // 使用者取消分享後執行的回撥函式

   logUtil.printLog("取消分享到QQ空間返回的資訊為:",res);

  }

 });

});

在這個過程中出現的錯誤就是:config:invalid signature，這個錯誤就說明簽名不對，這時候需要靜下心來去想想，然後進行排除，我最後發現原來是當前的url的錯誤，看了網上很多都是url需要進行編碼，我也是這樣做的，但一直出現config:invalid signature

原來的:

?

1

let url = encodeURIComponent(window.location.href.split('#')[0]);

修改後

?

1

let url = window.location.href.split('#')[0];

就不錯了，最後來看看效果

一般出現這個問題，大部分都是url的問題哦。

相關推薦

VueJs單頁應用實現微信網頁授權及微信分享功能示例

在實際開發中，無論是做PC端、WebApp端還是微信公眾號等型別的專案的時候，或多或少都會涉及到微信相關的開發，最近公司專案要求實現微信網頁授權，並獲取微信使用者基本資訊的功能及微信分享的功能，現在總算完成了，但開發過程中遇到好幾個坑。廢話不多說了，開始正題。 描述點 微信相關開發知識

手把手實現微信網頁授權和微信支付，附源代碼（VUE and thinkPHP）

nec ble 名單 ret 一次 hash 掃一掃 網頁 ada wechat github 手把手實現微信網頁授權和微信支付，附源代碼（VUE and thinkPHP） 概述 公眾號開發是痛苦的，痛苦在好多問題開發者文檔是沒有提到的，是需要你猜的. 在開發過程中翻

vue單頁應用實現優化seo區分tdk

由於做的活動有tdk的需求，而且並不只有一個頁面，所以就需要區分不同路由的tdk檢索了很多方式開始嘗試了一種智慧實現title的替換，外掛名字我忘記了，最後沒有用他我現在使用的是 vue-meta-info但是查閱了資料以後好像更優的話還需要其他設定，但是現在基本滿足需求了~

微信網頁授權及獲取使用者資訊

<?php require_once('weixin.class.php'); $weixin = new class_weixin(); if (!isset($_GET["code"])){ $redirect_url = 'http://'.$_SERVER['HTTP_HOST'

一、單頁應用如何調用微信接口和手機端的一些方法？

9.png 啟用 調用 對象賦值 之前 手動 全局 微信公眾平臺 一個 因為angular 是單頁應用，所以在調用一些手機端可微信接口的地方會很麻煩，這裏總結一下在手機端調用分享和調用微信接口的時候出現的問題及解決的辦法： 出現問題： 手機端的方法如果有回調，H5需要調

vue單頁應用history模式下的微信分享（深坑）

之前的專案到我接手時微信分享這個問題已經被處理過了，所以也就偷懶沒有研究了。目前公司專案用的是vue,然後在微信分享這塊也是被坑的很慘了。主要問題在我自己，但我！甩鍋超級厲害！！！技術認輸，甩鍋絕不認輸（滑稽 今天我就要把整個問題的過程記錄一哈，第一次寫部落格

教你在微信中給Vue單頁應用設定標題

前言 由於Vue React Angular等框架出來的應用都是SPA(single-page-application),所以就沒有所謂的頁面 都是router 而網頁的標題 隨著路由的改變而改變 也就成了一個(偽)需求 問題 在iOS的微信中 一個SPA應用 想

前端 SPA 單頁應用資料統計解決方案 (ReactJS / VueJS)

前端 SPA 單頁應用資料統計解決方案 (ReactJS / VueJS) 一、百度統計的程式碼： UV PV 統計方式可能存在問題 在 SPA 的前端專案中 資料統計，往往就是一個比較麻煩的事情，React 和 Vue 也是一樣。 在 發現問題之前，我們得來思考下 百度統計的 統計原理 是什麼？

前端 SPA 單頁應用數據統計解決方案 (ReactJS / VueJS)

情況下 tee 移除 簡單的 tag function vue each 簡單 前端 SPA 單頁應用數據統計解決方案 (ReactJS / VueJS) 一、百度統計的代碼： UV PV 統計方式可能存在問題 在 SPA 的前端項目中 數據統計，往往就是一個比較麻煩的事情

vue 單頁應用（spa）前端路由實現原理

寫在前面：通常 SPA 中前端路由有2種實現方式： window.history location.hash 下面就來介紹下這兩種方式具體怎麼實現的 一.history 1.history基本介紹 window.history 物件包含瀏覽器的

JAVA實現微信網頁授權的實列程式碼

1、需要有一個公眾號（我這裡用的測試號），拿到AppID和AppSecret； 2、進入公眾號開發者中心頁配置授權回撥域名。具體位置：介面許可權-網頁服務-網頁賬號-網頁授權獲取使用者基本資訊-修改 注意，這裡僅需填寫全域名（如www.qq.com、www.baidu.c

[微信開發] 微信網頁授權Java實現

功能：主要用於在使用者通過手機端微信訪問第三方H5頁面時獲取使用者的身份資訊（openId,暱稱,頭像,所在地等。。）可用來實現微信登入、微信賬號繫結、使用者身份鑑權等功能。 開發前的準備： 1、需要有一個公眾號，拿到AppID和AppSecret； 2、進入公眾號開

使用vue前端框架實現單頁應用(SPA)

ArthurSlog SLog-6 Year·1 Guangzhou·China July 13th 2018 時間 時間 時間 每一份有限的時間裡 都飽含無限的價值 需要非常珍惜 開發環境MacOS(High Sierra 10.13.5)

vue單頁應用前進重新整理後退使用快取的實現

目錄 前言 問題場景 一、頁面A->頁面B->頁面C 二、頁面A->頁面B->頁面C->頁面B 解決方案 (1) keep-alive時限前進重新整理後退使用快取 (2)結合vuex實現前進重新整理後退使用快取 注： 前言 v

詳解vue 單頁應用（spa）前端路由實現原理

寫在前面：通常 SPA 中前端路由有2種實現方式：window.historylocation.hash下面就來介紹下這兩種方式具體怎麼實現的一.history1.history基本介紹window.history 物件包含瀏覽器的歷史，window.history 物件在編

微信網頁授權訪問實現方式，根據授權獲取微信openid

在微信公眾號請求使用者網頁授權之前，開發者需要先到公眾平臺官網中的開發者中心頁配置授權回撥域名。請注意，這裡填寫的是域名（是一個字串），而不是URL，因此請勿加 http:// 等協議頭。 （1）登陸微信公眾號後臺，點選許可權介面點修改如圖： （2）修改如圖 配置時要

微信網頁授權(OAuth2.0) PHP 原始碼簡單實現

提要： 　　1. 建議對OAuth2.0協議做一個學習。 　　2. 微信官方文件和微信官網工具要得到充分利用。 比較簡單，直接帖原始碼了。其中“xxxxxxxxxx”部分，是需要依據自己環境做替換的/*** OAuth2.0微信授權登入實現** @author zzy* @

微信網頁授權Java實現

授權步驟： 1、引導使用者進入授權頁面同意授權，獲取code  2、通過code換取網頁授權access_token（與基礎支援中的access_token不同）  3、通過網頁授權access_token和openid獲取使用者基本資訊 Java實現： 1、引導使用者進入授權頁面同意授權

PHP+TP框架實現微信網頁授權，獲取使用者資訊

一.準備工作. 1.將需要使用到的微信配置放在config.php配置檔案中方便獲取.（我使用的是微信測試號） return array( //'配置項'=>'配置值' 'appID'=>'wxf58**********f2e', '

一個簡單的php文件，實現微信網頁授權回調域名的代理轉發

host 代理 sco com 文件 lose mage 一個 time 一個簡單的php文件，實現微信網頁授權回調域名的代理轉發 <?php function is_HTTPS() { if (!isset($_SERVER[‘HTTPS‘