移動端開發經驗小結

標籤：com   active   移動端   公司   attr   new   指令碼   ret   ati   

分享配置引用指令碼

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頁面開發。

移動端開發經驗小結