初次微信開發踩過的坑

這是第一次接觸微信開發，需要做一次微信活動，主要還是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