初次微信開發踩過的坑

這是第一次接觸微信開發，須要作一次微信活動，主要仍是html5+js開發,但須要用一些微信的js-sdk及後端sdk，而這次須要的實現的功能比較簡單，須要作上傳圖片和微信分享。

---

1.js-sdk的引入
能夠直接在頁面裏引入

在須要調用JS接口的頁面引入以下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.2.0.js（須要支持ie8及如下的， 請使用 http://res.wx.qq.com/open/js/jweixin-1.1.0.js）

請注意，若是你的頁面啓用了https，務必引入 https://res.wx.qq.com/open/js/jweixin-1.0.0.js ，不然將沒法在iOS9.0以上系統中成功使用JSSDK

如需使用搖一搖周邊功能，請引入 jweixin-1.1.0.js

備註：支持使用 AMD/CMD 標準模塊加載方法加載
這裏我用的是amd的方式引入，用的require.js
配置以下

var require = {
baseUrl: "/",
urlArgs: 'v=2016011601',
waitSeconds: 0,
paths: {
    wx:['http://res.wx.qq.com/open/js/jweixin-1.0.0','Assets/vendor/wx/jweixin-1.0.0'],//支持cdn引入
    root: 'wxactivity/20160115/root',
    text: 'Assets/vendor/require/text',
    domReady: 'Assets/vendor/require/domReady',
    css: 'Assets/vendor/require/css'
    },
priority: ['text', 'css']};

在作這個以前，我看了下js-sdk的demo,在手機微信中打開，並利用fiddler進行代理查看請求，發現個很奇怪的問題，雖然它的頁面引入了js-sdk，可是並沒有此文件請求，多是直接將此文件放在本地了。我寫好requirejs的配置後，開始查看是否正確引入了js-sdk，暴露出來了一個wx的變量，繼續走fiddler，發現同一頁面第二次打開時，即便我加上版本參數，也不會再次請求相關js文件。

2.微信分享
配置js-sdk

wx.config({
           debug: false,//開發時可設爲true
           appId: appid,
           timestamp: timestamp,
           nonceStr: nonceStr,
           signature: signature,
           jsApiList: [
               'onMenuShareTimeline',
               'onMenuShareAppMessage',
               'hideMenuItems'
           ] //須要用到的api必須在此列出來，若未列出，後面使用會出錯
          });

我作的並非單頁應用，因此我但願作一個公共的分享函數，但其中有一個模塊需求不同，因而我寫下以下代碼

var wx_share = function(title,imgUrl,desc,link,callback){
        var base = {
            title: title,
            link: link,
            imgUrl: imgUrl,
            success: function () {
                callback && callback();
            };
        //分享到朋友圈
        wx.onMenuShareTimeline(base);
        //分享給朋友
        wx.onMenuShareAppMessage(base);
    };


wx.ready(function(){
   wx.hideMenuItems({
       menuList: ["menuItem:share:qq","menuItem:share:weiboApp","menuItem:share:QZone",'menuItem:openWithQQBrowser',
           'menuItem:openWithSafari']
   });
   if(module_name !='info')
        vm.wx_share() });

並在info模塊本身寫了一個調用分享的模塊，但配置文件仍是用的公共的
本身測試的感受好好的，但提交測試後，測試說怎麼info頁面第一次進來分享會失敗，分享標題變成了頁面標題，無圖片，描述變成了頁面url。再次去看js-sdk開發文檔，看到了這樣的一句話，全部須要使用JS-SDK的頁面必須先注入配置信息，不然將沒法調用
因而，我在info頁面從新注入配置信息，這時分享成功了，但測試又說蘋果能夠了，但安卓不行啊，繼續調試，打開debug選項，發現全部api都已注入成功，但就是不成功，各類崩潰，繼續看文檔，又看到了一條重要信息，
config信息驗證後會執行ready方法，全部接口調用都必須在config接口得到結果以後，config是一個客戶端的異步操做，因此若是須要在頁面加載時就調用相關接口，則須把相關接口放在ready函數中調用來確保正確執行。對於用戶觸發時才調用的接口，則能夠直接調用，不須要放在ready函數中。但個人分享是用戶觸發時才調用的啊，我須要先調後臺api得到數據才能生成分享相關信息，因此我在info頁面並無寫在ready內，此時也沒其餘辦法，將其放入ready內，分享成功。結果活動上線後，上午分享還好好的，下午忽然全部設備分享都失敗，此時心裏是崩潰的，繼續打開debug，利用fiddler本地調試，發現微信簽名所有失敗，雖然能夠分享，但標題、描述、圖片均不是自定義的，分享成功的回調函數也沒法執行，由於已經上線，這次活動主要是分享，吸引人氣，領導要求必須儘快修復。後臺api是另一個同事寫的，恰好那天他又不在，我去查看api代碼，發現他只緩存了access_token,而未緩存ticket,用戶每次訪問，都從微信服務器拿ticket,而文檔並未填寫調用數量，此時我拿到錯誤的狀態碼45009，說明已經超過調用api限制。只能第二天才能重置。通過其餘同事的測試發現，微信分享默認以頁面標題做爲標題，頁面中第一個img做爲圖片，描述默認是頁面url。我立刻調整頁面標題及首個img。

3.上傳圖片
原本我準備使用js-sdk來上傳圖片，但文檔裏的一句話使我斷了這個念頭，上傳圖片有效期3天，可用微信多媒體接口下載圖片到本身的服務器。並不能本身指定保存的服務器，還有有效期，並且下載還有限制。我只能苦逼的本身寫了。

小結
因爲是針對於手機的，可使用html5+css3,作彈出框的時候就不須要本身算位置了，直接fixed搞定了。還用r.js對js作了打包，唉，致使我寫的根據頁面引入相關js沒用了，

require(['root'],function(root){
    var module_name = root.getModule('index');
    root.init();
    require(['domReady!','wxactivity/2016/modules/'+module_name],function(domReady,module){
        //初始化操做
    });
});

注意r.js不支持fallback選項，
附上個人r.js的一個build配置文件

({
baseUrl: ".",
name: "index-r",
paths: {
    'jquery': 'vendor/jquery/jquery-1.7.1.min',
    'api': 'vendor/utils/api',
    'domReady': 'vendor/require/domReady',
    'avalon': 'vendor/avalon/avalon',
    'jquery.timeago' : 'vendor/jquery/jquery.timeago',
    'jquery.floatDiv': 'vendor/jquery/jquery.floatDiv',
    'Base64': 'vendor/base64/base64',
    'config': './config',
    'css': 'vendor/require/css',
    'mmAnimate': 'vendor/avalon/mmAnimate',
    'avalon.cookie':'vendor/avalon/avalon.cookie',
},
shim: {
    'avalon':['config', 'domReady'],
    'modules/index/index':['jquery.timeago']
},
out: "index-dist.js"

})

而後在當前目錄運行node r.js -o index-build.js