移動端開發經驗小結

微信分享配置

引用腳本

1. jQuery/zepto
2. jweixin-1.0.0.js （//st02.chrstatic.com/themes/event/campaign/pofeng/common/js/jweixin-1.0.0.js）
3. appInteractive.js（//st02.chrstatic.com/themes/event/campaign/pofeng/common/js/appInteractive.js）

使用方法

1. 上述腳本按序引入，在後續執行js：

   window.chrconfig = {
        "isShare": true,
        "shares": {
            "shareTitle": "分享標題",
            "shareContent": "分享內容",
            "shareImageUrl": "圖片url",
            "shareUrl": "分享出去的連接"
        }
    };
   
    var active = new window.AppInteractive(chrconfig);
    active.wxShare();

2. 注意事項
   1. 若是手機鏈接到電腦，電腦配置了host，則沒法在手機微信內訪問https協議的連接；若是須要在app內配置分享，圖片url必須是https協議。因此在測試的時候，圖片丟失狀況難以免。
   2. iOS微信裏，若是本網頁的url協議是https，則分享配置沒法生效。因此分享出去的連接應該改爲http協議的。
   3. 本網頁的連接必須是域名方式（不能是ip，因此開發時要注意，避免踩坑）。

APP配置分享

1. 引用腳本和使用方法同上，若是不須要在微信內分享，能夠刪去jweixin-1.0.0.js和 active.wxShare();
2. 安卓APP內，若是分享圖片size過大，可能致使加載圖片失效的問題。
3. 分享到qq的時候，因爲qq版本不一樣，可能出現分享出去的是圖片和文字分離的兩條消息的狀況。

根據運行平臺，拉起原生職位/公司頁或web職位/公司頁的實現

var apitype = 0;
        //判斷環境
        if (!!window.webkit && !!window.webkit.messageHandlers && !!window.webkit.messageHandlers.chinahr) {
            apitype = 2; //ios5.4.2+
        } else {
            if (!!window.chinahr) {
                apitype = 1;  //andriod及ios低版本
            } else {
                apitype = 0; //非app環境
            }
        }
        if (apitype !== 0) {//app環境
            $('a').on('click', function (e) {
                var href = $(this).attr('href');
                e.preventDefault();
                if (href.indexOf('job') > -1) { // 職位
                    var id = href.split('job/')[1].split('.html')[0];
                    var message = "chinahr://customer/job?id=" + id + "";
                    if (apitype == 2) {
                        window.webkit.messageHandlers.chinahr.postMessage(message);
                    } else if (apitype == 1) {
                        window.chinahr.gotoPage_callback(message, "");
                    }
                }
                else if (href.indexOf('company') > -1) { // 公司
                    var id = href.split('company/')[1].split('.html')[0];
                    var message = "chinahr://customer/company?id=" + id + "";
                    if (apitype == 2) {
                        window.webkit.messageHandlers.chinahr.postMessage(message);
                    } else if (apitype == 1) {
                        window.chinahr.gotoPage_callback(message, "");
                    }
                }

            });
        }

 

APP內webview開發調試 

調試方法：

1.  將項目放到服務器（本地/測試服），使用fiddler、charlse等抓包工具進行規則替換，將app內任一webview頁面請求替換爲要測試的頁面。注意：須要在手機端安裝https證書，以避免替換規則失敗，詳見：

   抓包工具配置HTTPS。

2. 將項目放到測試服務器，找移動端QA同窗配置APP測試環境，經過測試包入口進入網頁。

注意事項：

1. APP會對webview進行緩存，能夠修改版本號，或者清除應用緩存。
2. webview適配視口（viewport）縮放存在問題（只能放大，不能縮小），不建議使用視口縮放的策略進行webview頁面開發。