【微信開發】初次接觸微信公衆號開發，相關資料記錄

時間  2019-11-13
標籤 微信開發 初次 接觸 微信 公衆號 開發 相關 資料 記錄 简体版
原文   原文鏈接

1. 微信公衆帳號接口說明文檔javascript

　https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1433401084html

 

    1.1. 我此次查詢，主要是想使用「微信JS-SDK說明文檔」，好實現將網站的網頁 分享到朋友圈 或 發送給彭友時，能夠顯示指定的縮略圖 和 簡介。java

           分別使用到三個文檔：git

　　    1）js-sdk說明文檔web

　　　　    https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115json

　　    2）受權後如何調用js-sdk小程序

　　　　    https://open.weixin.qq.com/cgi-bin/showdocument?action=dir_list&t=resource/res_list&verify=1&id=open1421823488&token=&lang=zh_CNapi

　　     3） 受權流程安全

　　　　https://open.weixin.qq.com/cgi-bin/showdocument?action=dir_list&t=resource/res_list&verify=1&id=open1453779503&token=&lang=zh_CN服務器

 

2. 微信開放平臺

　　https://open.weixin.qq.com/cgi-bin/showdocument?action=dir_list&t=resource/res_list&verify=1&lang=zh_CN

 

　　2.1.第三方平臺

　　　　1）經過公衆號或小程序管理員受權，無需寫死AppSecret

　　　　到微信第三方開放平臺註冊帳號，申請開發者資質認證，後可以使用自動受權

　　　　https://open.weixin.qq.com/cgi-bin/showdocument?action=dir_list&t=resource/res_list&verify=1&id=open1419318292&token=&lang=zh_CN

 

　　　　或直接使用AppSecret獲取access_token，可是不安全，也容易在AppSecret重置後失效

 

3. 微信 WeixinJSBridge API

https://www.cnblogs.com/txw1958/p/WeixinJSBridge-api.html

<!DOCTYPE html>
<html>
 <head>
  <title>微信WeixinJSBridge API</title> 
  <meta charset="utf-8" /> 
  <script type="text/javascript">
(function(){
var a=document.getElementsByTagName("html")[0];
window.Session={appDomain:a.getAttribute("data-app-domain")||"",staticDomain:a.getAttribute("data-static-domain")||""}
})();
 
window.registNS=function(fullNS,isIgnorSelf){
var reg=/^[_$a-z]+[_$a-z0-9]*/i;var nsArray=fullNS.split(".");
var sEval="";
var sNS="";
var n=isIgnorSelf?nsArray.length-1:nsArray.length;
for(var i=0;i<n;i++){
    if(!reg.test(nsArray[i])){throw new Error("Invalid namespace:"+nsArray[i]+"");
    return
    }
    if(i!=0){sNS+="."}
    sNS+=nsArray[i];
    sEval+="if(typeof("+sNS+")=='undefined') "+sNS+"=new Object();
    else "+sNS+";"
}
if(sEval!=""){
return eval(sEval)
}
return{}
 
};
 
</script> 
 </head> 
 <body>
  <section class="mod-page-body"> 
   <div class="mod-page-main wordwrap clearfix"> 
    <div class="mod-pageheader"></div> 
    <div class="mod-pagecontent"> 
     <div class="mod-weixinjsapi"> 
      <div class="x-desc">
       微信客戶端自帶的Js Api：WeixinJSBridge
      </div> 
      <div id="WeixinJsApi"> 
       <input type="button" id="imagePreview" value="圖片預覽" /> 
       <input type="button" id="profile" value="查看profile" /> 
       <a href="weixin://profile/gh_412d74fbb474">企業微信小助手</a> 
       <input type="button" id="shareWeibo" value="分享微博" /> 
       <input type="button" id="shareFB" value="分享facebook" /> 
       <input type="button" id="addContact" value="添加聯繫人" /> 
       <input type="button" id="scanQRCode" value="掃描二維碼" /> 
       <input type="button" id="jumpToBizProfile" value="跳轉到指定公衆帳號頁面" /> 
       <input type="button" id="toggleMenuBtn" value="隱藏右上角按鈕" /> 
       <input type="button" id="toggleToolbar" value="隱藏底部導航欄" /> 
       <input type="button" id="getNetType" value="獲取網絡狀態" /> 
       <input type="button" id="closeWindow" value="關閉" /> 
       <input type="button" id="getBrandWCPayRequest" value="發起公衆號微信支付" /> 
       <input type="button" id="setPageState" value="設置頁面狀態" /> 
       <input type="button" id="sendEmail" value="發郵件" /> 
       <input type="button" id="openSpecificView" value="微信團隊打開webView,跳到指定頁面" /> 
       <input type="button" id="getCanIAPPay" value="getCanIAPPay" /> 
       <input type="button" id="getBrandIAPPayRequest" value="發起公衆號IAP支付" /> 
       <input type="button" id="openUrlByExtBrowser" value="用safari打開指定連接" /> 
       <input type="button" id="openProductView" value="跳轉微信商品頁" /> 
       <input type="button" id="openLocation" value="查看地理位置" /> 
       <input type="button" id="timelineCheckIn" value="朋友圈簽到" /> 
       <input type="button" id="getBrandWCPayCreateCreditCardRequest" value="開通微信信用卡" /> 
       <input type="button" id="geoLocation" value="獲取地理位置" /> 
       <input type="button" id="getInstallState" value="獲取某app是否安裝" /> 
       <input type="button" id="editAddress" value="公衆號編輯收貨地址" /> 
       <input type="button" id="getLatestAddress" value="公衆號獲取最近的收貨地址" /> 
       <input type="button" id="launch3rdApp" value="啓動第三方APP" /> 
       <input type="button" id="jumpWCMall" value="跳轉微信商品購買界面" /> 
       <input type="button" id="addEmoticon" value="添加表情" /> 
       <input type="button" id="cancelAddEmoticon" value="取消下載某表情" /> 
       <input type="button" id="hasEmoticon" value="查詢是否存在某表情" /> 
      </div> 
     </div> 
    </div> 
   </div> 
  </section> 
  <script>
function onBridgeReady() {
    WeixinJSBridge.on('menu:share:appmessage', function(argv) 
    {
        WeixinJSBridge.invoke('sendAppMessage',{
                    "link":"http://m.exmail.qq.com/",
                    "desc":"desc",
                    "title":"title for WeiXinJsBridge"
        }, function(res) {
            WeixinJSBridge.log(res.err_msg);
        });
    });
    WeixinJSBridge.on('menu:share:timeline', function(argv) 
    {
    WeixinJSBridge.invoke("shareTimeline",{
        "link":"http://m.exmail.qq.com",
        "img_url":"http://rescdn.qqmail.com/bizmail/zh_CN/htmledition/images/bizmail/v3/logo1ca3fe.png",
        "img_width":"172",
        "img_height":"40",
        "desc":"i am description",
        "title":"just test from WeixinJsBridge"
        },
        function(e){
        alert(e.err_msg);
        })
    });
}
 
if (typeof WeixinJSBridge === "undefined"){
    if (document.addEventListener){
        document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
    }
}else{
    onBridgeReady();
}
 
    var menuHidden=!1,toolbarHidden=!1,netType={"network_type:wifi":"wifi網絡","network_type:edge":"非wifi,包含3G/2G","network_type:fail":"網絡斷開鏈接","network_type:wwan":"2g或者3g"};
    document.addEventListener("WeixinJSBridgeReady",function(){
            document.getElementById("imagePreview").addEventListener(
            "click",function(){
                                WeixinJSBridge.invoke("imagePreview",{
                "urls":[
                "http://rescdn.qqmail.com/bizmail/zh_CN/htmledition/images/bizmail/v3/logo1ca3fe.png",
                "http://rescdn.qqmail.com/bizmail/zh_CN/htmledition/images/bizmail/v3/icons_features1ca3fe.png",
                "http://rescdn.qqmail.com/bizmail/zh_CN/htmledition/images/bizmail/v3/icons_workStyle1ca3fe.png"
                ],
                "current":"http://rescdn.qqmail.com/bizmail/zh_CN/htmledition/images/bizmail/v3/icons_features1ca3fe.png"
                })
                        },!1),
        document.getElementById("profile").addEventListener(
            "click",function(){
                alert("profile clicked");
                WeixinJSBridge.invoke("profile",{
                    "username":"gh_412d74fbb474",
                    "nickname":"企業微信小助手"    
                })
            },!1),
        document.getElementById("shareWeibo").addEventListener(
            "click",function(){
                WeixinJSBridge.invoke("shareWeibo",{
                    "type":"link",
                    "link":"http://m.exmail.qq.com"
                },
                function(e){
                    alert(e.err_msg);
                })
            },!1),
        document.getElementById("shareFB").addEventListener(
            "click",function(){
                WeixinJSBridge.invoke("shareFB",{
                    "link":"http://m.exmail.qq.com"
                })
            },!1),
        document.getElementById("scanQRCode").addEventListener(
            "click",function(){
                WeixinJSBridge.invoke("scanQRCode",{
                })
            },!1),
        document.getElementById("addEmoticon").addEventListener(
            "click",function(){
                WeixinJSBridge.invoke("addEmoticon",{
                    "url":"http://rescdn.qqmail.com/bizmail/zh_CN/htmledition/images/bizmail/v3/icons_features1ca3fe.png",
                    "thumb_url":"http://rescdn.qqmail.com/bizmail/zh_CN/htmledition/images/bizmail/v3/logo1ca3fe.png"
 
                },
                function(e){
                                        alert(e.err_msg);
                                })
            },!1),
        document.getElementById("cancelAddEmoticon").addEventListener(
            "click",function(){
                WeixinJSBridge.invoke("cancelAddEmoticon",{
                    "url":"http://rescdn.qqmail.com/bizmail/zh_CN/htmledition/images/bizmail/v3/icons_features1ca3fe.png"
 
                },
                function(e){
                                        alert(e.err_msg);
                                })
            },!1),
        document.getElementById("hasEmoticon").addEventListener(
            "click",function(){
                WeixinJSBridge.invoke("hasEmoticon",{
                    "url":"http://rescdn.qqmail.com/bizmail/zh_CN/htmledition/images/bizmail/v3/icons_features1ca3fe.png"
 
                },
                function(e){
                                        alert(e.err_msg);
                                })
            },!1),
        document.getElementById("addContact").addEventListener(
            "click",function(){
                WeixinJSBridge.invoke("addContact",{
                    "webtype":"1",
                    "username":"gh_412d74fbb474"
                },
                function(e){
                    alert(e.err_msg);
                })
            },!1),
        document.getElementById("jumpToBizProfile").addEventListener(
            "click",function(){
                WeixinJSBridge.invoke("jumpToBizProfile",{
                    "tousername":"gh_2248a2ade13e"
                },
                function(e){
                    alert(e.err_msg);
                })
            },!1),
        document.getElementById("toggleMenuBtn").addEventListener(
            "click",function(){
                menuHidden?
                (WeixinJSBridge.call("showOptionMenu"),menuHidden=!1,this.value="隱藏右上角按鈕")
                :
                (WeixinJSBridge.call("hideOptionMenu"),menuHidden=!0,this.value="顯示右上角按鈕")
            },!1),
        document.getElementById("toggleToolbar").addEventListener(
            "click",function(){
                toolbarHidden?
                (WeixinJSBridge.call("showToolbar"),toolbarHidden=!1,this.value="隱藏底部導航欄")
                :
                (WeixinJSBridge.call("hideToolbar"),toolbarHidden=!0,this.value="顯示底部導航欄")
            },!1),
        document.getElementById("getNetType").addEventListener(
            "click",function(){
                WeixinJSBridge.invoke("getNetworkType",{},
                    function(e){
                        alert(netType[e.err_msg])
                    })
            },!1),
         document.getElementById("closeWindow").addEventListener(
                        "click",function(){
                                WeixinJSBridge.invoke("closeWindow",{},function(e){})
                        },!1),
        document.getElementById("getBrandWCPayRequest").addEventListener(
            "click",function(){
            WeixinJSBridge.invoke("getBrandWCPayRequest",{
                "appId" : "wxf8b4f85f3a794e77", //公衆號名稱，由商戶傳入
                "timeStamp" : "189026618", //時間戳 這裏隨意使用了一個值
                "nonceStr" : "adssdasssd13d", //隨機串
                "package" :
                "body=xxx&fee_type=1&input_charset=GBK&notify_url=http&out_trade_no=16642817866003386000&partner=1900000109&return_url=http&spbill_create_ip=127.0.0.1&total_fee=1&sign=273B7EEEE642A8E41F27213D8517E0E4", //擴展字段，由商戶傳入
                "signType" : "SHA1", //微信簽名方式:sha1
                "paySign" : "b737015b5b1eabe5db580945a07eac08c7bb55f8" //微信簽名
                },
                function(e){
                    alert(e.err_msg)
                })
            },!1),
        document.getElementById("setPageState").addEventListener(
            "click",function(){
            WeixinJSBridge.invoke("setPageState",{
                "state" : "1"
                })
            },!1),
 
        document.getElementById("sendEmail").addEventListener(
            "click",function(){
            WeixinJSBridge.invoke("sendEmail",{
                "title" : "title!",
                "content" : "i am an Email!", //時間戳 這裏隨意使用了一個值
                },
                function(e){
        //          alert(e.err_msg)
                })
            },!1),
        document.getElementById("openSpecificView").addEventListener(
            "click",function(){
            WeixinJSBridge.invoke("openSpecificView",{
                "specificview" : "contacts"
                },
                function(e){
                    alert(e.err_msg)
                })
            },!1),
        document.getElementById("getCanIAPPay").addEventListener(
            "click",function(){
            WeixinJSBridge.invoke("getCanIAPPay",{  },
                function(e){
                    alert(e.err_msg)
                })
            },!1),
        document.getElementById("getBrandIAPPayRequest").addEventListener(
            "click",function(){
            WeixinJSBridge.invoke("getBrandIAPPayRequest",{
                "appId" : "wxf8b4f85f3a794e77", //公衆號名稱，由商戶傳入
                "timeStamp" : "189026618", //時間戳 這裏隨意使用了一個值
                "nonceStr" : "adssdasssd13d", //隨機串
                "package" : "bankType=CITIC_CREDIT&bankName=%e4%b8%ad%e4%bf%a1%e9%93%b6%e8%a1%8c&sign=CF8922F49431FFE8A1834D0B32B25CE3",
                //擴展字段，由商戶傳入
                "signType" : "SHA1", //微信簽名方式:sha1
                "paySign" : "1e6f13f78ca0ec43fbb80899087f77568af66987" //微信簽名
                },
                function(e){
                    alert(e.err_msg)
                })
            },!1),
        document.getElementById("openLocation").addEventListener(
            "click",function(){
            WeixinJSBridge.invoke("openProductView",{   
                "latitude" : 23.113, //緯度
                "longitude" : 113.23, //經度
                "name" : "TIT創意園", //POI名稱
                "address" : "廣州市海珠區新港中路397號", //地址
                "scale" : 14, //地圖縮放級別
                "infoUrl" : "http://weixin.qq.com/", //查看位置界面底部的超連接                
                },
                function(e){
                    alert(e.err_msg)
                })
            },!1),
        document.getElementById("timelineCheckIn").addEventListener(
            "click",function(){
            WeixinJSBridge.invoke("timelineCheckIn",{   
                "img_url": "http://mmsns.qpic.cn/mmsns/RLllkTm3DUdV24xbZnKicx9jJWxXI0Bq84zzbtibGuRyk/0", // 分享到朋友圈的縮略圖
                "img_width": "640",　// 圖片的長度
                "img_height": "640", // 圖片高度
                "link": "http://news.qq.com/zt2012/cxkyym/index.htm",　// 鏈接地址
                "desc": "這個是描述啊啊", // 描述
                "title": "朝鮮稱中國漁船越界捕撈", // 分享標題
                "latitude" : 23.113, //緯度
                "longitude" : 113.23, //經度
                "poiId" : "dianping_2331037", //商戶id
                "poiName" : "TIT創意園", //POI名稱
                "poiAddress" : "廣州市海珠區新港中路397號", //地址
                "poiScale" : 14, //地圖縮放級別
                "poiInfoUrl" : "http://weixin.qq.com/" //查看位置界面底部的超連接
                },
                function(e){
                    alert(e.err_msg)
                })
            },!1),
        document.getElementById("geoLocation").addEventListener(
            "click",function(){
            WeixinJSBridge.invoke("geoLocation",{   
                },
                function(e){
                    alert(e.err_msg)
                })
            },!1),
        document.getElementById("getBrandWCPayCreateCreditCardRequest").addEventListener(
            "click",function(){
            WeixinJSBridge.invoke("getBrandWCPayCreateCreditCardRequest",{  
                "appId" : "wxf8b4f85f3a794e77", //公衆號名稱，由商戶傳入
                "timeStamp" : "189026618", //時間戳 這裏隨意使用了一個值
                "nonceStr" : "adssdasssd13d", //隨機串
                "package" : "bankType=CITIC_CREDIT&bankName=%e4%b8%ad%e4%bf%a1%e9%93%b6%e8%a1%8c&sign= CF8922F49431FFE8A1834D0B32B25CE3",
                //擴展字段，由商戶傳入
                "signType" : "SHA1", //微信簽名方式:sha1
                "paySign" : "1e6f13f78ca0ec43fbb80899087f77568af66987" //微信簽名
                },
                function(e){
                    alert(e.err_msg)
                })
            },!1),
        document.getElementById("getInstallState").addEventListener(
            "click",function(){
            WeixinJSBridge.invoke("getInstallState",{   
                    "packageUrl":"teamcircle://"
                },
                function(e){
                    alert(e.err_msg)
                })
            },!1),
        document.getElementById("openProductView").addEventListener(
            "click",function(){
            WeixinJSBridge.invoke("openProductView",{   
                    "productInfo":"json"
                },
                function(e){
                    alert(e.err_msg)
                })
            },!1),
        document.getElementById("getLatestAddress").addEventListener(
                "click",function(){
                WeixinJSBridge.invoke("getLatestAddress",{  
                    "appId" : "wxf8b4f85f3a794e77", //公衆號名稱，由商戶傳入
                    "timeStamp" : "189026618", //時間戳 這裏隨意使用了一個值
                    "nonceStr" : "adssdasssd13d", //隨機串
                    "signType" : "SHA1", //微信簽名方式:sha1
                    "addrSign" : "b737015b5b1eabe5db580945a07eac08c7bb55f8", //微信簽名
                    "scope"    : "snsapi"
                },
                function(e){
                    alert(e.err_msg)
                })
            },!1),
        document.getElementById("editAddress").addEventListener(
                "click",function(){
                WeixinJSBridge.invoke("editAddress",{   
                    "appId" : "wxf8b4f85f3a794e77", //公衆號名稱，由商戶傳入
                    "timeStamp" : "189026618", //時間戳 這裏隨意使用了一個值
                    "nonceStr" : "adssdasssd13d", //隨機串
                    "signType" : "SHA1", //微信簽名方式:sha1
                    "addrSign" : "b737015b5b1eabe5db580945a07eac08c7bb55f8", //微信簽名
                    "scope"    : "snsapi"
                },
                function(e){
                    alert(e.err_msg)
                })
            },!1),
        document.getElementById("launch3rdApp").addEventListener(
                "click",function(){
                WeixinJSBridge.invoke("launch3rdApp",{  
                    "appId" : "wx5823bf96d3bd56c7", //公衆號名稱，由商戶傳入
                },
                function(e){
                    alert(e.err_msg)
                })
            },!1),
        document.getElementById("jumpWCMall").addEventListener(
                "click",function(){
                WeixinJSBridge.invoke("jumpWCMall",{    
                    "appId" : "wx5823bf96d3bd56c7", //公衆號名稱，由商戶傳入
                    "funcId":"1000"
                },
                function(e){
                    alert(e.err_msg)
                })
            },!1),
        document.getElementById("openUrlByExtBrowser").addEventListener(
            "click",function(){
            WeixinJSBridge.invoke("openUrlByExtBrowser",{
                "url" : "http://m.exmail.qq.com"
                },
                function(e){
                    alert(e.err_msg)
                })
            },!1)
        }
    );
</script> 
 </body>
</html>
View Code

 

4. 遇到的問題記錄

4.1 手機微信端獲取受權code的時候，微信服務器重點向了兩次問題

　　這問題有人提過，不事後面不了了之，因此我再提一次

　　解決方案

  1. 加 &connect_redirect=1 即：https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE&connect_redirect=1#wechat_redirect   這種作法測試過，微信服務器確實是只重定向了一次，不過也有人說有些手機加了這參數還不行。那麼問題來了，這個參數在微信官方的開發文檔中並未說起，並且微信接口是有作正則判斷的，順序稍錯就不能經過，但很明顯，這麼加是能經過的，說明微信這API是有這個參數的，但沒寫到文檔上，我不知道是文檔沒及時更新仍是其餘什麼緣由。

  2. 使用中間頁面跳轉

　　　　第一步先在後臺拼接 open.weixin.qq.com的受權url，返回到中間頁面，顯示「正在登陸」；第二部，使用window.location.href = auth_url，自動跳轉

4.2 微信分享接口問題

      項目中使用的url採用的是單應用網站的格式，即帶#的hash參數爲子頁面連接

      　　例如：http://test.com/#!/detail.hx?uuid=ba5d0408-42b9-4e0a-8a03-5e3891f52298

      在wx.ready中編寫分享接口時，link參數直接放置這個url，分享出去的頁面，點擊沒法進入詳情頁，直接進入首頁

　　　　緣由：微信默認自動去除了#以後的字符串

              解決方案：wx.ready中配置接口link時，應添加「from=singlemessage」的參數

　　　　例如：http://test.com/?from=singlemessage#!/detail.hx?uuid=ba5d0408-42b9-4e0a-8a03-5e3891f52298

             

        var prefix = window.location.href.split(splitChar)[0];
        if(prefix.indexOf(wxShareKeyword) <= 0){
            prefix = prefix + "?" + wxShareKeyword;
        }
//        log("prefix:" + prefix);
        var last = window.location.href.split(splitChar)[1];
//        log("last:" + last);
        var requestUrl = prefix + splitChar + last;

 

 4.2 調起微信公衆號關注界面，而後跳回到原頁面

      沒有找到，能夠直接打開關注界面，而後跳轉的方案

　  替代方案：  發現用戶未關注，則打開關注公衆號的二維碼，用戶掃描打開關注公衆號後，在公衆號對話界面主動推送一個連接，能夠點擊跳轉到原頁面

　　　　　　　使用的接口：1）帳號管理-》生成帶參數的二維碼；2）消息管理--》接收事件推送

　　

 

5. 在線Debug工具

　　原文：http://ngdemo.sinaapp.com/debug/?hash=test

在線Debug工具

本工具爲了解決移動端console日誌沒法查看的難題，只須要一個js文件便可在本頁面實時查看console日誌！

Js文件地址：http://ngdemo.sinaapp.com/library/debug?hash=debug 請把debug改爲你本身的參數

使用方法

  1. 在須要調試的頁面寫入 <script src="http://ngdemo.sinaapp.com/library/debug?hash=debug"></script>
  2. 打開本頁面，下方便可實時查看JS日誌
源代碼以下：var socket = new WebSocket("ws://localhost:18080");
var connected = false;
window.console.log = function(o) {
o =typeof o == "object"?JSON.stringify(o):o;
var timer = setInterval(function(){
if(connected){
timer && clearInterval(timer);
socket.send(JSON.stringify({hash:"debug",msg:o,type:"msg"}));
}
},100);
}
socket.onopen = function(e){
connected = true;
console.log("[110.87.105.11] "+navigator.appVersion+" connected.");
};
socket.onclose = function(e){
connected = false;
};
socket.onmessage = function(e){
};

window.onerror = function (err, url, line) {
if(connected){
socket.send(JSON.stringify({hash:"debug",error:err,url:url,line:line,type:"error"}));
}
return true;
};
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程