微信公衆號開發

一、申請公衆號接口測試號

https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login

二、微信公衆平臺接口在線調試工具

https://mp.weixin.qq.com/debug/

三、建立自定義菜單

{
    "button": [
        {
            "name": "特點活動", 
            "sub_button": [
                {
                    "type": "view", 

//跳轉URL用戶點擊view類型按鈕後，微信客戶端將會打開開發者在按鈕中填寫的網頁URL，可與網頁受權獲取用戶基本信息接口結合，得到用戶基本信息。

　　　　　　　　　　　 "name": "主題活動", 
                    "url":"...",
                    "key": "rselfmenu_0_0"
                }, 
                {
                    "type": "view", 
                    "name": "共享課堂", 
                    "key": "rselfmenu_0_1", 
                    "url":"..."
                }
            ]
        }, 
        {
            "name": "生活服務", 
            "sub_button": [
                {
                    "type": "view", 
                    "name": "教育服務", 
                    "url":  "...",
                    "key": "rselfmenu_1_0"
                 }, 
                {
                    "type": "view", 
                    "name": "簽證通", 
                    "url":  "...",
                    "key": "rselfmenu_1_1"
                },
                {
                    "type": "view", 
                    "name": "抽獎", 
                    "url":  "...",
                    "key": "rselfmenu_1_2"
                },
                {
                    "type": "view", 
                    "name": "周邊支行", 
                    "url":  "...",
                    "key": "rselfmenu_1_3"
                 }
            ]
        }, 
        {
            "name": "我的中心", 
            "type": "view", 
            "key": "rselfmenu_2_0",
            "url":  "...",
             "sub_button": [ ]
        }
    ]
}

   

四、微信網頁受權

若是用戶在微信客戶端中訪問第三方網頁，公衆號能夠經過微信網頁受權機制，來獲取用戶基本信息，進而實現業務邏輯。

a）以snsapi_base爲scope發起的網頁受權，是用來獲取進入頁面的用戶的openid的，而且是靜默受權並自動跳轉到回調頁的。用戶感知的就是直接進入了回調頁（每每是業務頁面）

b）以snsapi_userinfo爲scope發起的網頁受權，是用來獲取用戶的基本信息的。但這種受權須要用戶手動贊成，而且因爲用戶贊成過，因此無須關注，就可在受權後獲取該用戶的基本信息。 

c）用戶管理類接口中的「獲取用戶基本信息接口」，是在用戶和公衆號產生消息交互或關注後事件推送後，才能根據用戶OpenID來獲取用戶基本信息。這個接口，包括其餘微信接口，都是須要該用戶（即openid）關注了公衆號後，才能調用成功的。 

1）反向代理，臨時地將一個本地的Web網站部署到外網

ngrok http 8080 => 映射本地8080端口到外網

 2）受權回調域名

在微信公衆號請求用戶網頁受權以前，開發者須要先到公衆平臺官網中的「開發 - 接口權限 - 網頁服務 - 網頁賬號 - 網頁受權獲取用戶基本信息」的配置選項中，修改受權回調域名。請注意，這裏填寫的是域名（是一個字符串），而不是URL，所以請勿加 http:// 等協議頭； 

3）受權連接（靜默受權）

https://open.weixin.qq.com/connect/oauth2/authorize?appid=xxx&redirect_uri=http%3A%2F%2Fxxx%2Fpweb%2F%23%2Fmain%2Fpersonal&response_type=code&scope=snsapi_base#wechat_redirect

或https://open.weixin.qq.com/connect/oauth2/authorize?appid=xxx&redirect_uri=http://xxx%23%2Fmain%2Fpersonal&response_type=code&scope=snsapi_base#wechat_redirect

encodeURIComponent('#/main/personal') => "%23%2Fmain%2Fpersonal"（編碼）

回調頁url：http://o2otest.cmbwh.mbcloud.com/pweb/?code=071IPtHa1suRzt0MbuGa1vK9Ha1IPtHi&state=#/main/personal（網頁受權獲取code）

經過code換取網頁受權access_token（前端把回調頁url中的code傳給服務端，後續操做由服務端完成）

因爲公衆號的secret和獲取到的access_token安全級別都很是高，必須只保存在服務器，不容許傳給客戶端。後續刷新access_token、經過access_token獲取用戶信息等步驟，也必須從服務器發起。

4）使用微信web開發者工具調試

五、WeUI

WeUI是一套同微信原生視覺體驗一致的基礎樣式庫，由微信官方設計團隊爲微信內網頁和微信小程序量身設計，令用戶的使用感知更加統一。

1）weui.alert('系統錯誤');

2）weui.toast('信息修改爲功');//成功提示

3）weui.picker  下拉選擇框

var sexArr=[{label:'男',value:0},{label:'女',value:1}];

var self=this;
weui.picker(sexArr, { 
　　onConfirm: function (result) {
　　　　self.currentSexIndex=result[0].value;
　　} 
});

4）weui.confirm對話框

weui.confirm('', {
　　title: title,
　　buttons: [{
　　　　label: '取消',
　　　　type: 'default'
　　}, {
　　　　label: '肯定',
　　　　onClick: doneCallback
　　}]
});

5）不少css框架都把默認字體大小設置成16px，解決picker錯位問題

.weui-picker{ font-size: 16px; }

六、獲取用戶基本信息

在關注者與公衆號產生消息交互後，公衆號可得到關注者的OpenID（加密後的微信號，每一個用戶對每一個公衆號的OpenID是惟一的。對於不一樣公衆號，同一用戶的openid不一樣）。

https://api.weixin.qq.com/cgi-bin/user/info?access_token=ACCESS_TOKEN&openid=OPENID&lang=zh_CN 

會返回subscribe（用戶是否訂閱該公衆號標識，值爲0時，表明此用戶沒有關注該公衆號，拉取不到其他信息。）

七、微信JS-SDK

經過使用微信JS-SDK，網頁開發者可藉助微信高效地使用拍照、選圖、語音、位置等手機系統的能力，同時能夠直接使用微信分享、掃一掃、卡券、支付等微信特有的能力。

1）綁定域名

先登陸微信公衆平臺進入「公衆號設置」的「功能設置」裏填寫「JS接口安全域名」。

2）引入JS文件

<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>

3）經過config接口注入權限驗證配置

 參與簽名的字段包括noncestr（隨機字符串）, 有效的jsapi_ticket, timestamp（時間戳）, url（當前網頁的URL，不包含#及其後面部分）

var currentUrl=location.href.split('#')[0];//前端將url送到服務端來生成簽名
this.httpPost('sdkSign.do',{Url:currentUrl},function(response){
    wx.config({
        debug: false, // true：開啓調試模式,調用的全部api的返回值會在客戶端alert出來
        appId: appid, // 必填，公衆號的惟一標識
        timestamp: response.Timestamp, // 必填，生成簽名的時間戳
        nonceStr: response.Noncestr, // 必填，生成簽名的隨機串
        signature: response.Signature,// 必填，簽名
        jsApiList: [
            'getLocation',
            'showMenuItems',
            'hideMenuItems',
            'hideAllNonBaseMenuItem',
            'onMenuShareTimeline',
            'onMenuShareAppMessage',
            'closeWindow',
            'previewImage',
            'chooseImage',
            'getLocalImgData
        ] // 必填，須要使用的JS接口列表
    });
});    

4）經過ready接口處理成功驗證

wx.ready(function(){

    // config信息驗證後會執行ready方法，全部接口調用都必須在config接口得到結果以後，config是一個客戶端的異步操做，因此若是須要在頁面加載時就調用相關接口，則須把相關接口放在ready函數中調用來確保正確執行。對於用戶觸發時才調用的接口，則能夠直接調用，不須要放在ready函數中。

});

5）接口

（a）預覽圖片接口

wx.previewImage({

    current: '', // 當前顯示圖片的http連接

    urls: [] // 須要預覽的圖片http連接列表

});

（b）關閉當前網頁窗口接口（關閉微信公衆號）：wx.closeWindow();

（c）只能分享到微信好友和朋友圈；或者不能分享

router.afterEach(function(route) {　　

   //路由跳轉時調用該接口，默認隱藏每一個頁面的分享功能
　　//對於須要分享的頁面再進行相關配置

    wx.ready(function(){
        wx.hideAllNonBaseMenuItem();//隱藏全部非基礎按鈕接口,包含傳播分享類
    });
})

var shareLink=cmbUrl+'index.html?sharePage=communityActivity';
var shareData = {
    title: '共享課堂',// 分享標題
    desc: '親，去招管家看看武漢各社區支行發起的活動吧',// 分享描述
    link: shareLink,// 分享連接，該連接域名或路徑必須與當前頁面對應的公衆號JS安全域名一致
    imgUrl: cmbUrl+'images/logo.png'// 分享圖標
};
shareData.success=function(){// 用戶確認分享後執行的回調函數
    weui.alert('分享成功');
};
wx.ready(function(){
    wx.showMenuItems({
        menuList: ['menuItem:share:appMessage','menuItem:share:timeline'] // 要顯示的菜單項
    });
    wx.onMenuShareAppMessage(shareData);//分享給朋友
    wx.onMenuShareTimeline(shareData);//分享到朋友圈
})

（d）獲取地理位置接口

wx.getLocation：不存在用戶每次進入公衆號都須要受權的問題（百度地圖api）。

（e）拍照或從手機相冊中選圖接口：wx.chooseImage

（f）獲取本地圖片接口：wx.getLocalImgData

　　此接口僅在 iOS WKWebview 下提供，用於兼容 iOS WKWebview 不支持 localId 直接顯示圖片的問題。微信iOS客戶端將於2017年3月1日前逐步升級爲WKWebview內核，須要網頁開發者提早作好網站的兼容檢查和適配。WKWebView 是蘋果在iOS 8中引入的新組件，目的是提供一個現代的支持最新Webkit功能的網頁瀏覽控件，擺脫過去 UIWebView的老、舊、笨，特別是內存佔用量巨大的問題。它使用與Safari中同樣的Nitro JavaScript引擎，大大提升了頁面js執行速度。在頁面中可經過微信注入的window.__wxjs_is_wkwebview變量判斷當前使用的webview內核。 iOS微信6.5.3及其以後的版本 window.__wxjs_is_wkwebview 爲true時是使用WKWebview，爲 false或者 「undefine」時是 UIWebview 。

wx.chooseImage({
    count: 5, // 默認9
    sizeType: ['compressed'], // 能夠指定是原圖仍是壓縮圖，默認兩者都有
    sourceType: ['album', 'camera'], // 能夠指定來源是相冊仍是相機，默認兩者都有
    success: (res) => {
        var localIds = res.localIds; // 返回選定照片的本地ID列表
        //在android系統，localId能夠做爲img標籤的src屬性顯示圖片，ios系統沒法顯示圖片
        if(window.__wxjs_is_wkwebview){//ios
            this.picArr = [];
        }else{//android
            this.picArr = localIds;
        }
        base64Pics = [];
        localIds.forEach((localId) => {
            wx.getLocalImgData({
                localId: localId, // 圖片的localID
                success: (res) => {
                    var localData = res.localData; // localData是圖片的base64數據，能夠用img標籤顯示
                    //在ios系統，localData能夠做爲img標籤的src屬性顯示圖片，但android系統沒法顯示該種圖片
                    if(window.__wxjs_is_wkwebview){//ios
                        this.picArr.push(localData);
                    }else{//android
                        localData = "data:image/jpeg;base64," + localData;
                    }
                    base64Pics.push(localData);//上傳圖片爲base64位
                }
            });
        });
    }
});