微信公眾號sdk

微信公眾號開發
能享用微信公眾號的API，比如分享給好友，分享到朋友圈，禁止菜單功能，選擇圖片，獲取地址，以及支付

微信的功能有兩種執行方式
一種是 wx.xx
一種是 WeixinJSBridge.call()

WeixinJSBridge是很老的方式，在微信網頁才能使用的全局變量，不需要引入js插件，現在都不用了，但是去查資料會有很多，看了沒用的，但是有兩個是可以用的

// 禁止菜單功能
WeixinJSBridge.call('hideOptionMenu');

// 關閉當前頁面
WeixinJSBridge.call('closeWindow');

除了上面的這兩個，其他的功能都要用下面的寫法
而且需要前提條件有

1. 公眾號需要通過認證，認證之后才能在微信公眾號后台的開發的接口權限里看到功能都是已獲得，未獲得就不配調用微信的API
2. 需要有服務器域名，域名配置在公眾號后台的JS接口安全域名名單里
3. 需要引入wx的js插件，專業叫wxsdk文件
   js文件在微信公眾號開發文檔里下載，現在的版本是1.4
   如果是vue使用，weixin-js-sdk

配置階段

// 引入js之后需要配置
// 除了jsApiList這個數組，其他的值都來自后端，就是跟后端拿值就行
wx.config({
  debug: true, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數信息會通過log打出，僅在pc端時才會打印。
  appId: '', // 必填，公眾號的唯一標識
  timestamp: , // 必填，生成簽名的時間戳
  nonceStr: '', // 必填，生成簽名的隨機串
  signature: '',// 必填，簽名
  jsApiList: [] // 必填，需要使用的JS接口列表
});
// 跟config寫在一起就行，如果config配置成功，就會執行這個
wx.ready(function(){
  // config信息驗證后會執行ready方法，所有接口調用都必須在config接口獲得結果之后，config是一個客戶端的異步操作，所以如果需要在頁面加載時就調用相關接口，則須把相關接口放在ready函數中調用來確保正確執行。對於用戶觸發時才調用的接口，則可以直接調用，不需要放在ready函數中。
});
// 跟config寫在一起就行，如果config配置出錯，就會執行這個
wx.error(function(res){
  // config信息驗證失敗會執行error函數，如簽名過期導致驗證失敗，具體錯誤信息可以打開config的debug模式查看，也可以在返回的res參數中查看，對於SPA可以在這里更新簽名。
});

// jsApiList需要傳參需要的功能
// 內容在下載js的鏈接的最下面就能看到

分享功能

// 微信文檔有兩個分享
// 一個是onMenuShareTimeline 和 onMenuShareAppMessage （即將廢棄）
// 一個是updateAppMessageShareData 和 updateTimelineShareData
// 用哪個，用廢棄的那個，新的只能在蘋果手機使用，廢棄的蘋果手機和安卓都沒問題

// 先配置
jsApiList: ["onMenuShareTimeline","onMenuShareAppMessage"]

// ready是配置完成后會自動執行的
// 不是所有的方法都需要寫在ready里的
// 但這兩個需要
wx.ready(function(){
    wx.onMenuShareTimeline({
	title: '參數傳標題',
	imgUrl: '參數傳圖片',
        success: function(){ ... }
    });
    wx.onMenuShareAppMessage({
	title: '參數傳標題',
	imgUrl: '參數傳圖片',
	desc: '參數傳副標題',
        success: function(){ ... }
    });
});

選擇圖片
這個是完美了解決了畫布的兼容和BUG

// 需要用到的配置
jsApiList: ["chooseImage","getLocalImgData"]

// 當用戶點擊上傳圖片的按鈕后
function ImgUpload(){
   // 打開微信相冊的功能
   wx.chooseImage({
       count: 1, // 默認9,如果選多個是返回的數組
       sizeType: ['compressed'], // 可以指定是原圖'original'還是壓縮圖，默認二者都有，這里屏蔽了原圖
       sourceType: ['album', 'camera'], // 可以指定來源是相冊還是相機'camera'，默認二者都有，這里屏蔽了相機
       success: function (res) {
            //這意味着只有IOS8以上的手機才能用這個本地圖片接口，而以下的版本如果使用JSSDK1.2.0版本會導致無法獲取圖片數據，或者使用1.1.0又無法預覽圖片的尷尬場面,另外用了1.2.0版本后uploadImage會出現file not exists的錯誤
            var localIds = res.localIds;  //這是數組
            getImgData(localIds[0]);  //但是這個程序只要一張圖片，所以取值arr[0]
        }
    })
}

function getImgData(localIds){
    // 選擇圖片后用微信的功能轉成base64
    wx.getLocalImgData({
        localId:localIds,
        success: function (res){
            //base64
            var localData = res.localData;  
            /*判斷ios是不是用的 wkwebview 內核*/
            if (window.__wxjs_is_wkwebview){
                localData = localData.replace('data:image/jgp', 'data:image/jpeg');
            }else{
                if (localData.indexOf('data:image') != 0) {
                    //判斷是否有這樣的頭部
                    localData = "data:image/jpeg;base64," + localData;
                }
            }
            // 這個值就可以直接傳給后端了
            console.log(localData)
        }
    })
}

獲取當前經緯度
這個配合騰訊地圖使用，查看下一篇

支付
需要商家向微信申請開通支付
然后配置白名單，查看配置方式

WeixinJSBridge.invoke('getBrandWCPayRequest',{
     "appId":appId,     //公眾號名稱,由商戶傳入
     "timeStamp":timeStamp,         //時間戳,自1970年以來的秒數
     "nonceStr":nonceStr, //隨機串
     "package":package,
     "signType":signType,         //微信簽名方式：
     "paySign":paySign //微信簽名
  },function(res){
	methods.hideLoading();
	if(res.err_msg == "get_brand_wcpay_request:ok" ) {
	    console.log('支付成功');
	}else if(res.err_msg == "get_brand_wcpay_request:cancel"){
	    console.log('支付取消');
	}else if(res.err_msg == "getBrandWCPayRequest:fail_nopermission"){
	    console.log('當前版本不支持，請檢查升級或到微信中支付！');
	 }else if(res.err_msg == "get_brand_wcpay_request:fail_nopermission"){
	    console.log('當前版本不支持，請檢查升級或到微信中支付！');
	 }else if(res.err_msg == "get_brand_wcpay_request:fail"){
	    console.log('支付失敗');
	}
});