微信公衆號網頁開發

基本配置

1.設置—公衆號設置—功能設置—配置JS接口安全域名

安全域名配置規則如下

2.開發—基本配置

開發者密碼第一次使用需要重新設置
記錄開發者ID(AppID) 開發者密碼（AppSecret）後面會用到

3.IP白名單配置

推薦填寫當前本地開發IP地址和服務器IP地址
本地開發地址獲取方式

服務器IP地址（根據自己的服務器Ip地址自行填寫）
多個IP地址填寫用回車隔開

4重要的一步

在：微信公衆號-開發-接口權限查看想要調用的開發接口是否可用
如果有相關接口權限無法開啓，推薦使用：微信公衆平臺-開發-開發者工具-公衆平臺測試帳號開發

開始開發

1.引入JS文件

在需要調用JS接口的頁面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/...

2通過config接口注入權限驗證配置（最重要的一步）

wx.config({
  debug: true, // 開啓調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數信息會通過log打出，僅在pc端時纔會打印。
  appId: '', // 必填，公衆號的唯一標識
  timestamp: , // 必填，生成簽名的時間戳
  nonceStr: '', // 必填，生成簽名的隨機串
  signature: '',// 必填，簽名
  jsApiList: [] // 必填，需要使用的JS接口列表
});

appID（前面在微信公衆號基本配置中已經拿到了）
jsApiList:['uploadImage','updateAppMessageShareData'] (例：上傳圖片接口,和自定義分享接口)

簽名算法（微信官方提供）
jsapi_ticket
生成簽名之前必須先了解一下jsapi_ticket，jsapi_ticket是公衆號用於調用微信JS接口的臨時票據。正常情況下，jsapi_ticket的有效期爲7200秒，通過access_token來獲取。由於獲取jsapi_ticket的api調用次數非常有限，頻繁刷新jsapi_ticket會導致api調用受限，影響自身業務，開發者必須在自己的服務全局緩存jsapi_ticket 。

參考以下文檔獲取access_token（有效期7200秒，開發者必須在自己的服務全局緩存access_token）：https://developers.weixin.qq....

用第一步拿到的access_token 採用http GET方式請求獲得jsapi_ticket（有效期7200秒，開發者必須在自己的服務全局緩存jsapi_ticket）：https://api.weixin.qq.com/cgi...

2.1簽名獲取拆解

第一步GET請求access_token

access_token的有效期爲7200秒（不必反覆請求）
https://api.weixin.qq.com/cgi...

grant_type是獲取access_token填寫client_credential
appid是第三方用戶唯一憑證
secret是第三方用戶唯一憑證密鑰，即appsecret**

appid 和 secret 在前面的基本配置中其實都已經拿到。但是由於開發者密碼（AppSecret）是校驗公衆號開發者身份的密碼，具有極高的安全性。不能直接暴露在前端代碼中，所以access_token的請求需在後端完成，這裏簽名的生成過程都在後端完成。

當前以node搭建後端服務

//獲取到access_token示例
var url = `https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=${appid}&secret=${secret}`;
        request(url, function (error, response, body) {
            if (!error && response.statusCode == 200) {
                console.log("access_token值" +JSON.parse(body).access_token)
            }
        });

第二步GET請求jsapi_ticket

jsapi_ticket的有效期爲7200秒（不必反覆請求）
https://api.weixin.qq.com/cgi...
用第一步獲取到的access_token的值進行請求

//
var url = `https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=${access_token}&type=jsapi`
        request(url, function (error, response, body) {
            if (!error && response.statusCode == 200) {
                console.log("jsapi_ticket值" + JSON.parse(body).ticket);
            }
        });

第三步生成算法簽名

const timestamp = parseInt(Date.now() / 1000) //生成簽名的時間戳
const nonceStr = Math.random().toString(36).substr(2, 15) //生成簽名的隨機串
let jsapi_ticket //在第二步生成
let url//簽名用的url必須是調用JS接口頁面的完整URL（前端請求服務端接口帶入）


const sha1 = require('sha1')//這裏需要引入一個插件npm install sha1

router.get('/', (req, res, next) => {

const url = decodeURIComponent(req.query.url)//這裏的url採用前端加密，後端解密的形式獲取
const timestamp = parseInt(Date.now() / 1000)
const nonceStr = Math.random().toString(36).substr(2, 15)
let jsapi_ticket = "在第二步拿到了"

const params = {
        nonceStr,
        jsapi_ticket,
        timestamp,
        url
    }
    const string = Object.keys(params).sort().map(key => `${key.toLowerCase()}=${params[key]}`).join('&')
    const signature = sha1(string)//生成的簽名
    
    res.status(200).json({//將參數返回給前端
        timestamp,
        signature,
        nonceStr
    });
    
    })


module.exports = router;

3前端靜態頁面實際調用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    
    <h1>分享頁面</h1>
    <script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
    <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
    <script>
    function wxFN(){
        $.ajax({
                type: "get",
                url: `http://*************/api/wx?url=${encodeURIComponent(location.href.split('#')[0])}`,
                success: function(data) {
                    console.log(data);
                    wx.config({
                        debug: true, // 開啓調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數信息會通過log打出，僅在pc端時纔會打印。
                        appId: data.appId, // 必填，公衆號的唯一標識
                        timestamp: data.timestamp, // 必填，生成簽名的時間戳
                        nonceStr: data.nonceStr, // 必填，生成簽名的隨機串
                        signature: data.signature, // 必填，簽名
                        jsApiList: ['updateAppMessageShareData'] // 必填，需要使用的JS接口列表
                    });


                }
            });
    }
        wxFN()
        wx.ready(function() { //需在用戶可能點擊分享按鈕前就先調用
            wx.updateAppMessageShareData({
                title: '', // 分享標題
                desc: '', // 分享描述
                link: '', // 分享鏈接，該鏈接域名或路徑必須與當前頁面對應的公衆號JS安全域名一致
                imgUrl: '', // 分享圖標
                success: function() {
                    alert("成功")
                    // 設置成功
                }
            })
        });
        
        wx.error(function(res) {
            console.log('err', res)

        });
    </script>
    
</body>
</html>

4常見錯誤及解決方法(微信提供)

調用config 接口的時候傳入參數 debug: true 可以開啓debug模式，頁面會alert出錯誤信息。以下爲常見錯誤及解決方法：

invalid url domain當前頁面所在域名與使用的appid沒有綁定，請確認正確填寫綁定的域名，僅支持80（http）和443（https）兩個端口，因此不需要填寫端口號（一個appid可以綁定三個有效域名，見 ]目錄1.1.1）。
invalid signature簽名錯誤。建議按如下順序檢查：
1. 確認簽名算法正確，可用http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign頁面工具進行校驗。
2. 確認config中nonceStr（js中駝峯標準大寫S）, timestamp與用以簽名中的對應noncestr, timestamp一致。
3. 確認url是頁面完整的url(請在當前頁面alert(location.href.split('#')[0])確認)，包括'http(s)😕/'部分，以及'？'後面的GET參數部分,但不包括'#'hash後面的部分。
4. 確認 config 中的 appid 與用來獲取 jsapi_ticket 的 appid 一致。
5. 確保一定緩存access_token和jsapi_ticket。
6. 確保你獲取用來簽名的url是動態獲取的，動態頁面可參見實例代碼中php的實現方式。如果是html的靜態頁面在前端通過ajax將url傳到後臺簽名，前端需要用js獲取當前頁面除去'#'hash部分的鏈接（可用location.href.split('#')[0]獲取,而且需要encodeURIComponent），因爲頁面一旦分享，微信客戶端會在你的鏈接末尾加入其它參數，如果不是動態獲取當前鏈接，將導致分享後的頁面簽名失敗。
the permission value is offline verifying這個錯誤是因爲config沒有正確執行，或者是調用的JSAPI沒有傳入config的jsApiList參數中。建議按如下順序檢查：
1. 確認config正確通過。
2. 如果是在頁面加載好時就調用了JSAPI，則必須寫在wx.ready的回調中。
3. 確認config的jsApiList參數包含了這個JSAPI。
permission denied該公衆號沒有權限使用這個JSAPI，或者是調用的JSAPI沒有傳入config的jsApiList參數中（部分接口需要認證之後才能使用）。
function not exist當前客戶端版本不支持該接口，請升級到新版體驗。
爲什麼6.0.1版本config:ok，但是6.0.2版本之後不ok（因爲6.0.2版本之前沒有做權限驗證，所以config都是ok，但這並不意味着你config中的簽名是OK的，請在6.0.2檢驗是否生成正確的簽名以保證config在高版本中也ok。）
在iOS和Android都無法分享（請確認公衆號已經認證，只有認證的公衆號才具有分享相關接口權限，如果確實已經認證，則要檢查監聽接口是否在wx.ready回調函數中觸發）
服務上線之後無法獲取jsapi_ticket，自己測試時沒問題。（因爲access_token和jsapi_ticket必須要在自己的服務器緩存，否則上線後會觸發頻率限制。請確保一定對token和ticket做緩存以減少2次服務器請求，不僅可以避免觸發頻率限制，還加快你們自己的服務速度。目前爲了方便測試提供了1w的獲取量，超過閥值後，服務將不再可用，請確保在服務上線前一定全局緩存access_token和jsapi_ticket，兩者有效期均爲7200秒，否則一旦上線觸發頻率限制，服務將不再可用）。
uploadImage怎麼傳多圖（目前只支持一次上傳一張，多張圖片需等前一張圖片上傳之後再調用該接口）
沒法對本地選擇的圖片進行預覽（chooseImage接口本身就支持預覽，不需要額外支持）
通過a鏈接(例如先通過微信授權登錄)跳轉到b鏈接，invalid signature簽名失敗（後臺生成簽名的鏈接爲使用jssdk的當前鏈接，也就是跳轉後的b鏈接，請不要用微信登錄的授權鏈接進行簽名計算，後臺簽名的url一定是使用jssdk的當前頁面的完整url除去'#'部分）
出現config:fail錯誤（這是由於傳入的config參數不全導致，請確保傳入正確的appId、timestamp、nonceStr、signature和需要使用的jsApiList）
如何把jsapi上傳到微信的多媒體資源下載到自己的服務器（請參見文檔中uploadVoice和uploadImage接口的備註說明）
Android通過jssdk上傳到微信服務器，第三方再從微信下載到自己的服務器，會出現雜音（微信團隊已經修復此問題，目前後臺已優化上線）
綁定父級域名，是否其子域名也是可用的（是的，合法的子域名在綁定父域名之後是完全支持的）
在iOS微信6.1版本中，分享的圖片外鏈不顯示，只能顯示公衆號頁面內鏈的圖片或者微信服務器的圖片，已在6.2中修復
是否需要對低版本自己做兼容（jssdk都是兼容低版本的，不需要第三方自己額外做更多工作，但有的接口是6.0.2新引入的，只有新版纔可調用）
該公衆號支付簽名無效，無法發起該筆交易（請確保你使用的jweixin.js是官方線上版本，不僅可以減少用戶流量，還有可能對某些bug進行修復，拷貝到第三方服務器中使用，官方將不對其出現的任何問題提供保障，具體支付簽名算法可參考 JSSDK微信支付一欄）
目前Android微信客戶端不支持pushState的H5新特性，所以使用pushState來實現web app的頁面會導致簽名失敗，此問題已在Android6.2中修復
uploadImage在chooseImage的回調中有時候Android會不執行，Android6.2會解決此問題，若需支持低版本可以把調用uploadImage放在setTimeout中延遲100ms解決
require subscribe錯誤說明你沒有訂閱該測試號，該錯誤僅測試號會出現
getLocation返回的座標在openLocation有偏差，因爲getLocation返回的是gps座標，openLocation打開的騰訊地圖爲火星座標，需要第三方自己做轉換，6.2版本開始已經支持直接獲取火星座標
查看公衆號（未添加）: "menuItem:addContact"不顯示，目前僅有從公衆號傳播出去的鏈接才能顯示，來源必須是公衆號
ICP備案數據同步有一天延遲，所以請在第二日綁定

微信公衆號網頁開發

基本配置

1.設置—公衆號設置—功能設置—配置JS接口安全域名

2.開發—基本配置

3.IP白名單配置

4重要的一步

開始開發

1.引入JS文件

2通過config接口注入權限驗證配置（最重要的一步）

2.1簽名獲取拆解

第一步GET請求access_token

當前以node搭建後端服務

第二步GET請求jsapi_ticket

第三步生成算法簽名

3前端靜態頁面實際調用

4常見錯誤及解決方法(微信提供)

微信公衆號網頁開發

在vue下引入jquery bootstrap

Vue webpack前後端分離整理學習整理

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結