微信公眾號開發流程和踩坑之路

阿新 • • 發佈：2020-12-30

技術標籤：微信

微信登陸授權

授權地址：
https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=https://www.dingsky.com&response_type=code&scope=snsapi_userinfo&state=STATE&connect_redirect=1#wechat_redirect

scope引數註釋：

1、以snsapi_base為scope發起的網頁授權，是用來獲取進入頁面的使用者的openid的，並且是靜默授權並自動跳轉到回撥頁的。使用者感知的就是直接進入了回撥頁（往往是業務頁面）

2、以snsapi_userinfo為scope發起的網頁授權，是用來獲取使用者的基本資訊的。但這種授權需要使用者手動同意，並且由於使用者同意過，所以無須關注，就可在授權後獲取該使用者的基本資訊。

3、使用者管理類介面中的“獲取使用者基本資訊介面”，是在使用者和公眾號產生訊息互動或關注後事件推送後，才能根據使用者OpenID來獲取使用者基本資訊。這個介面，包括其他微信介面，都是需要該使用者（即openid）關注了公眾號後，才能呼叫成功的。

編輯

微信公眾號獲取Code方法

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>獲取微信公眾號的code</title>
    </head 
>
    <body>
        <div id="appid"></div>
        <script>
            getUrlParameter = (name) => {
                var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i')
                var r = window.location.search.substr(1).match(reg)
                if (r != null) return unescape(r[2])
                return null
            }

            var appid = 'wxd6464f078b772b45'
            var code = getUrlParameter('code');
            if (code) {
                console.log(code);
                document.getElementById('appid').innerHTML = code;
            } else {
                var jumpUrl = window.location.href
                let redirectUrl = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${encodeURIComponent(
                    jumpUrl
                )}&response_type=code&scope=snsapi_userinfo&state=STATE&connect_redirect=1#wechat_redirect`
                console.log('回跳路徑', jumpUrl)
                console.log('微信授權', redirectUrl)
                window.location.replace(redirectUrl)
            }
        </script>
    </body>
</html>

微信分享示例

微信官方 js-sdk 使用說明

1、直接引入微信官方的js原始碼: https://res.wx.qq.com/open/js/jweixin-1.6.0.js

2、npm install weixin-js-sdk https://www.npmjs.com/package/weixin-js-sdk

<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<script>
    wx.config({
        debug: false, // 開啟除錯模式,呼叫的所有api的返回值會在客戶端alert出來，若要檢視傳入的引數，可以在pc端開啟，引數資訊會通過log打出，僅在pc端時才會列印。
        appId: 'wxd6464f078b772b45', // 必填，公眾號的唯一標識
        timestamp: '1591088707', // 必填，生成簽名的時間戳
        nonceStr: 'L2lPTjoQfyyeNqZ0', // 必填，生成簽名的隨機串
        signature: '0f87457054c68d3fe4bcf2615ddfc5dac5cb52dc',// 必填，簽名
        jsApiList: [
            'updateAppMessageShareData', // “分享給朋友”及“分享到QQ”
            'updateTimelineShareData', // “分享到朋友圈”及“分享到QQ空間”
        ] // 必填，需要使用的JS介面列表
    });

    wx.ready(function() {
        var wxConfig = {
            title: '頁面分享標題', // 分享標題
            desc: '頁面分享描述', // 分享描述
            link: window.location.href, // 分享連結，該連結域名或路徑必須與當前頁面對應的公眾號JS安全域名一致
            imgUrl: 'https://www.dingsky.com/wcs/Upload/202004/5ea1b65abbadb.jpg', // 分享圖示
        }
        wx.updateAppMessageShareData({ 
            ...wxConfig,
            success: function () {
              // 設定成功
            }
        })
        wx.updateTimelineShareData({ 
            ...wxConfig,
            success: function () {
              // 設定成功
            }
        })
    });
    wx.error(function(err){
        console.log('失敗', err)
    });
</script>

微信公眾號開發流程和踩坑之路

微信公眾號開發文件：

微信公眾號測試號申請平臺：

微信公眾號介面除錯平臺：

微信登陸授權

微信公眾號獲取Code方法

微信分享示例

微信公眾號開發流程和踩坑之路

python微信公眾號開發簡單流程實現

基於springboot微信公眾號開發(微信自動回覆)

微信公眾號開發經驗總結

Spring Boot 微信公眾號開發(三) access_token

微信公眾號開發-分享

.net core 微信公眾號開發（一）

.net core 3.1 mvc 微信公眾號開發所遇到的問題

微信公眾號開發：伺服器配置

微信公眾號開發獲取access_token為null

微信公眾號開發access_token獲取為null

php微信公眾號開發之生成帶引數的二維碼

微信公眾號開發：5、企業微信 SDK —— 傳送文字訊息

微信公眾號開發-設定測試環境

[微信公眾號開發][裝置坑] 微信SDK授權 invalid signature以及封裝

微信公眾號開發-獲取accessToken

微信公眾號開發之vue專案引入JS-SDK

PHP微信公眾號開發之自動回覆

微信公眾號開發之傳送模板訊息

微信公眾號開發之模板訊息

微信公眾號開發流程和踩坑之路

微信公眾號開發文件：

微信公眾號測試號申請平臺：

微信公眾號介面除錯平臺：

微信登陸授權

微信公眾號獲取Code方法

微信分享示例

相關推薦